بيانات الصفحة الوصفية: head وmeta

يحتفظ <head> بمعلومات لا تُعرض مباشرة للزائر لكنها مهمة للمتصفحات ومحركات البحث: العنوان والترميز وروابط الأنماط والسكربتات ووسوم meta.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fresh bread in Baku | Example Bakery</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.svg">
</head>

• يضمن charset="utf-8" ظهور الحروف بشكل صحيح.
• يعطي viewport مقاسًا صحيحًا على شاشات الهاتف.

<title> هو العنوان الظاهر في تبويب المتصفح ونتائج البحث ويجب أن يكون فريدًا وواضحًا لكل صفحة. وقد يصبح <meta name="description"> مصدر الوصف القصير في نتائج البحث؛ ويكفي 150–160 حرفًا.

<meta name="description" content="Daily fresh bread, pastries and coffee in the centre of Baku.">
<link rel="canonical" href="https://example.com/bread">

تحدد وسوم Open Graph شكل الرابط عند مشاركته: og:title وog:description وog:image. ويعلن <html lang="az"> لغة المستند، وتُستخدم روابط hreflang للإشارة إلى اللغات البديلة.

<meta property="og:title" content="Fresh bread in Baku">
<meta property="og:image" content="https://example.com/cover.jpg">
<link rel="alternate" hreflang="en" href="https://example.com/en/bread">