كل ما تحتاج معرفته عن ال Meta وقائمة بأهم أنواعها

لما تفتح صفحة ويب أنت بتشوف المحتوى الموجود في body لكن فيه معلومات تانية بتساعد المتصفح ومحركات البحث وخدمات مشاركة الروابط تفهم الصفحة المعلومات دي اسمها Metadata ومن العناصر اللي بنستخدمها لكتابتها عنصر meta

في المقال ده هنراجع الأنواع المهمة ونفرق بين اللي بيغير طريقة عرض الصفحة واللي بيقدم وصف عنها مع مثال كامل تقدر تبدأ منه وتعدله حسب مشروعك

يعني إيه Meta ومكانها فين

ال Metadata معناها بيانات بتوصف بيانات تانية زي وصف صفحة أو اسم كاتبها في الأمثلة هنا هنكتب عناصر meta داخل head وهي عناصر فارغة ملهاش وسم إغلاق

ال name بيحدد نوع المعلومة وال content بيحمل قيمتها لكن مش كل الأنواع بتستخدم نفس الشكل فيه charset لتحديد الترميز وفيه property في عناصر Open Graph

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Learn HTML with practical examples">
</head>

تحديد ترميز الصفحة باستخدام charset

ال charset معناها Character Set وهي هنا بتحدد ترميز المستند استخدم UTF-8 واحفظ الملف بنفس الترميز علشان الحروف تظهر بشكل سليم وده يشمل العربي والإنجليزي ورموز كتير

خلي تصريح الترميز في بداية head وداخل أول 1024 بايت من المستند بالكامل كتابة الترميز لوحدها مش بتحدد لغة الصفحة أو اتجاهها لأن اللغة بتتحدد من lang والاتجاه من dir

<meta charset="UTF-8">

تجهيز عرض الصفحة على الموبايل باستخدام viewport

ال Viewport هي مساحة عرض الصفحة داخل المتصفح ال width=device-width بتخلي العرض يتناسب مع عرض الجهاز بوحدات CSS وال initial-scale=1 بتحدد مستوى التكبير الأولي

السطر ده خطوة مهمة للتصميم المتجاوب لكنه مش هيصلح وحده عناصر بعرض ثابت أكبر من الشاشة متمنعش المستخدم من التكبير باستخدام user-scalable=no لأن التكبير ممكن يكون ضروري للقراءة

<meta name="viewport" content="width=device-width, initial-scale=1">

كتابة وصف واضح باستخدام description

ال description بتحتوي على ملخص دقيق لمحتوى الصفحة اكتب وصف مميز لكل صفحة يوضح فائدتها بدل تكرار نفس وصف الموقع في كل المقالات

محرك Google ممكن يستخدم الوصف في مقتطف نتيجة البحث وممكن يختار نص من محتوى الصفحة حسب بحث المستخدم مفيش ضمان إنه يعرض الوصف حرفيا أو بطول ثابت في كل الأجهزة

<meta name="description" content="Understand HTML meta tags with examples for encoding and page previews">

توجيه محركات البحث باستخدام robots

ال robots بتدي تعليمات لمحركات البحث المتعاونة مع النوع ده من الإعدادات ال noindex بتطلب عدم إظهار الصفحة في نتائج البحث وال nofollow بتطلب عدم تتبع روابط الصفحة

لازم محرك البحث يقدر يوصل للصفحة علشان يقرأ noindex متمنعش الزحف إليها في robots.txt وتتوقع إنه يشوف التعليمة في نفس الوقت والإعداد ده مش حماية للصفحات الخاصة لأنها تفضل محتاجة تسجيل دخول وصلاحيات

المثال التالي لصفحة مش عاوزها تظهر في البحث متنسخوش في صفحة عامة عاوز الناس تلاقيها والصفحات العادية مش محتاجة تصريح index و follow لمجرد السماح بالفهرسة

<meta name="robots" content="noindex">

تعريف الكاتب باستخدام author

ال author بتوضح اسم مؤلف الصفحة تقدر تضيفها لو المعلومة مفيدة لنظامك لكنها مش بديل عن اسم الكاتب الظاهر للقارئ أو صفحة التعريف بيه

<meta name="author" content="Osama Elzero">

اقتراح لون واجهة المتصفح باستخدام theme-color

ال theme-color بتقترح لون تستخدمه واجهة المتصفح المحيطة بالصفحة في البيئات اللي بتدعمها مش المقصود إنها تغير خلفية محتوى الصفحة نفسه وظهورها بيختلف حسب المتصفح والجهاز

<meta name="theme-color" content="#0075ff">

تجهيز معاينة الرابط باستخدام Open Graph

ال OG اختصار Open Graph وهو بروتوكول لوصف الصفحة عند مشاركتها في خدمات بتدعمه تقدر تحدد عنوان المعاينة ونوع المحتوى والرابط والصورة وتضيف وصف مناسب

ال og:title لعنوان المشاركة وال og:type لنوع المحتوى وال og:url للرابط الأساسي وال og:image للصورة استخدم روابط كاملة قابلة للوصول فعلا وأضف وصف للصورة باستخدام og:image:alt

الأمثلة بتستخدم example.com للتوضيح استبدله بنطاقك ومسار صورتك ظهور التعديل ممكن يتأخر بسبب التخزين المؤقت عند خدمة المشاركة

<meta property="og:title" content="A Practical Guide to HTML Meta Tags">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/articles/meta-tags">
<meta property="og:image" content="https://example.com/images/meta-tags.png">
<meta property="og:image:alt" content="HTML meta tags guide cover">
<meta property="og:description" content="Learn which meta tags your page needs">

معلومات قديمة محتاجة توضيح

ال keywords مش مستخدمة بواسطة Google للفهرسة أو الترتيب فإضافة قائمة كلمات فيها مش طريقة لتحسين ظهور الصفحة في Google

ال revised مش طريقة معتمدة لضمان ظهور تاريخ تحديث المقال في Google الأفضل تعرض تاريخ حقيقي للقارئ وتستخدم بيانات منظمة مناسبة للمقال فيها datePublished و dateModified حسب الحالة ومن غير تغيير تاريخ التحديث لمجرد إظهار المحتوى كأنه جديد

وجود اسم copyright جوه meta مش هيمنع نسخ المحتوى ولا يعتبر وسيلة تقنية لحمايته ومتحتاجش تجمع كل أسماء Meta اللي تلاقيها وتضيفها من غير ما تعرف مين بيستخدمها

مش كل عنصر داخل head اسمه Meta

ال title عنصر مستقل لعنوان المستند وال link عنصر مستقل ممكن تستخدمه لتحديد الرابط الأساسي باستخدام rel="canonical" وجودهم جنب meta في نفس المكان مش بيخليهم نفس العنصر

لو بتتعلم من مثال جاهز افهم وظيفة كل سطر وعدل وصف الصفحة وروابطها وصورتها قبل استخدامه علشان متطلعش كل صفحات الموقع بنفس المعلومات

<title>HTML Meta Tags | Web Notes</title>
<link rel="canonical" href="https://example.com/articles/meta-tags">

مثال كامل لصفحة مقال

ده مثال يجمع الأساسيات مع معاينة المشاركة خلي وصف الصفحة والعنوان والصورة مناسبين للمقال نفسه ومفيش noindex هنا لأن المثال لصفحة عامة

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML Meta Tags | Web Notes</title>
  <meta name="description" content="A practical guide to essential HTML meta tags">
  <meta name="author" content="Osama Elzero">
  <meta name="theme-color" content="#0075ff">
  <link rel="canonical" href="https://example.com/articles/meta-tags">
  <meta property="og:title" content="HTML Meta Tags">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/articles/meta-tags">
  <meta property="og:image" content="https://example.com/images/meta-tags.png">
  <meta property="og:image:alt" content="HTML meta tags guide cover">
  <meta property="og:description" content="Understand the metadata behind a web page">
</head>
<body>
  <main>
    <h1>HTML Meta Tags</h1>
    <p>Learn how metadata describes your page</p>
  </main>
</body>
</html>

تراجع شغلك إزاي

افتح مصدر الصفحة وراجع إن القيم تخص الصفحة الحالية وإن الروابط كاملة وصورة المشاركة قابلة للوصول وبعدها جرب عرض الصفحة على الموبايل وافحص الرابط بأداة فحص الروابط في Search Console لو الموقع متحقق من ملكيته

تغيير البيانات مش معناه إن محرك البحث أو خدمة المشاركة هتعرضها في نفس اللحظة لأن إعادة الزيارة وتحديث النسخة المخزنة بياخدوا وقت حسب الخدمة