🍿 CornPop

Metadata in HTML

8 min read

إمتى آخر مرة استخدمت فيها محرك بحث؟ غالبًا من كام ساعة أو حتى دقايق. ممكن تكون كنت عايز تدور على حاجة بسرعة، أو يمكن كنت محتاج معلومات أعمق عن موضوع معين.

في كل الأحوال، محرك البحث اللي استخدمته ده أكيد رجّعلك قايمة نتايج ليها علاقة باللي إنت دورت عليه. بس إزاي محرك البحث بيحدد إيه أكتر صفحات الويب المناسبة؟

في المقال ده، هنعرف إزاي محركات البحث بتحلل صفحات الويب، وإزاي الـ meta tags بتساعدها بالمعلومات دي.

إيه هو الـ SEO؟

جزء كبير من إطلاق أي موقع هو عملية اسمها Search Engine Optimization أو SEO. العملية دي عبارة عن تحسينات بتتعمل على محتوى الموقع، طريقة كتابته (Semantic HMTL)، وطريقة تقديمه. الهدف هو تحسين ترتيب الموقع في نتايج البحث.

محركات البحث بتشتغل إزاي؟

ممكن تكون بتسأل، هو محرك البحث بيعمل إيه بالظبط لما بيحلل صفحة ويب؟

بص يا سيدي، لما محرك البحث بيزور موقعك، هو بيحلل ملف الـ html ومحتوى الميديا اللي فيه. لو لقى لينك لملف html تاني، بيمشي ورا اللينك ده ويكمل يتابع اللينكات. بيفضل يعمل كده لحد ما يخلص تحليل الموقع كله.

وبناءً على نتايج التحليل ده والمحتوى اللي على موقعك، محرك البحث بيدي ترتيب للموقع ده. الترتيب ده بيكون بالنسبة لكلمات بحث مختلفة. يعني ممكن موقعك يبقى النتيجة الأولى لكلمة بحث معينة. وفي نفس الوقت ترتيبه قليل أوي لكلمة تانية.

كل محرك بحث ليه الـ algorithm الخاص بيه عشان يرتب المواقع. ورغم إن تفاصيل الترتيب ده مش معلنة، فيه ممارسات كتير (best practices) ممكن تتبعها. الممارسات دي ممكن تأثر على طريقة تحليل وترتيب محركات البحث لموقعك.

بس خلينا دلوقتي نركز على إزاي الـ meta tags بتأثر على ترتيب الموقع.

دور الـ Meta Tags

إيه هي الـ Meta Tags؟

الـ Meta tags بتعرّف حاجة اسمها metadata عن صفحة الويب. بتسأل إيه هي الـ metadata دي؟ هي ببساطة بيانات عن بيانات تانية (data about the data). وفي حالتنا دي، هي بيانات عن صفحة الويب نفسها.

  • شوفناها قبل كدا في الـ charset في charset.
  • الـ Meta tags بتتضاف جوا الـ head HTML في ملف الـ html بتاعك.
  • وزي ما إنت عارف، أي حاجة جوا الـ head element مش بتظهر في الـ web browser.
  • بمعنى تاني، الـ meta tags دي عناصر مخفية جوا الـ browser.
  • ملحوظة: الـ meta tag مالوش closing tag، يعني هو Self-Closing Elements HTML.

الـ meta element ليه اتنين attributes مهمين: name و content.

  • الـ name attribute بيحدد اسم الـ metadata.
  • والـ content attribute بيحدد قيمة الـ metadata دي.

أنواع الـ Meta Tags المهمة

تعالى نشوف أمثلة على الـ metadata دي:

  • الـ Author Metadata:

    • دي بتحدد مين مؤلف الصفحة.
    • الـ name attribute بيكون author.
    • والـ content attribute بيكون اسم الشخص أو الشركة المؤلفة.
    <meta name="author" content="اسم المؤلف هنا">

  • الـ Description Metadata:

    • دي بتوصف محتوى صفحة الويب.
    • محركات البحث غالبًا بتستخدمها كنص وصفي بيظهر في نتايج البحث.
    • الـ name attribute بيكون description.
    • والـ content attribute بيكون النص الوصفي ده.
    <meta name="description" content="وصف مختصر لمحتوى الصفحة هنا">

  • الـ Keywords Metadata:

    • زمان كانت بتستخدم عشان تدي محركات البحث كلمات مفتاحية (keywords).
    • بس ده خلى مواقع كتير تستخدمها عشان تتلاعب بترتيب البحث وتحط كلمات مش ليها لازمة.
    • دلوقتي، فيه محركات بحث كبيرة بتتجاهل الـ metadata دي تمامًا.
    • وفيه محركات تانية بتعتبرها علامة spam.
    • عشان كده، النصيحة هي ماتستخدمهاش في صفحات الويب الحديثة.
    <!-- بلاش تستخدم دي -->
<meta name="keywords" content="كلمة1, كلمة2, كلمة3">

  • الـ Robots Metadata:

    • النوع ده بيقول لمحركات البحث إذا كانت تحلل صفحتك وإزاي تحللها.
    • اسم robots جاي من البرامج الآلية (automated software) اللي بيسموها bots. الـ bots دي محركات البحث بتستخدمها عشان تحلل المواقع.
    • الـ name attribute بيكون robots.
    • الـ content attribute للـ Robots ليه أربع قيم ممكنة:
      1. الـ index: بتقول للـ bot يحلل (يعمل index) للصفحة دي.
      2. الـ follow: بتقول للـ bot يزور كمان كل اللينكات اللي في الصفحة.
      3. الـ noindex: بتقول للـ bot ما يحللش الصفحة دي. (خد بالك: بعض الـ bots ممكن تتجاهل الأمر ده، فمتعتمدش عليه أوي لو الموضوع حساس).
      4. الـ nofollow: بتقول للـ bot ما يزورش اللينكات اللي في الصفحة. (برضه خد بالك: بعض الـ bots ممكن تتجاهل القيمة دي).
    <!-- مثال: اسمح بالتحليل ومتابعة اللينكات -->
<meta name="robots" content="index, follow">
 
<!-- مثال: امنع التحليل وامنع متابعة اللينكات -->
<meta name="robots" content="noindex, nofollow">

  • الـ Viewport Metadata:

    • اتكلمنا عنها قبل كده في موضوع الـ viewport HTML.
    • دي مهمة جدًا لما تيجي تصمم صفحات ويب متجاوبة (Responsive).
    • ليه؟ عشان لما حد بيفتح صفحة ويب على موبايل أو تابلت، الجهاز بشكل افتراضي بيحاول يعرض الصفحة كأنها معروضة على ديسكتوب. ده بيخلي تجربة التصفح وحشة للمستخدم والصورة تبان صغيرة أوي.
    • الحل إنك تعرّف الـ viewport metadata.
    • فيه قيم كتير متاحة ليها. أشهر قيمة مستخدمة لتجربة الموبايل هي:
      • تخلي الـ width يساوي device-width (عرض الشاشة بتاعة الجهاز).
      • وتخلي الـ initial-scale تكون 1.0 (يعني درجة الـ zoom الأولية تكون 100%).
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • مهم تعرف إن الـ viewport metadata لوحدها مش بتحل كل مشاكل تصفح المواقع على الموبايل. الجزء التاني من الحل هو الـ responsive web design نفسه، يعني تصميم الموقع نفسه بطريقة تتأقلم مع الشاشات المختلفة.

الـ Viewport والـ SEO

بس إحنا كنا بنتكلم عن الـ SEO، صح؟ الـ Viewport metadata مهمة عشان تجربة المستخدم (user experience)، ومهمة كمان للـ SEO. وده لإن محركات بحث كتير دلوقتي (زي جوجل) بتعتبر تجربة استخدام الموقع على الموبايل (mobile experience) جزء مهم من الـ algorithms بتاعتها في الترتيب. يعني لو موقعك مش mobile-friendly، ترتيبه ممكن يتأثر بالسلب.

الخلاصة

فيه أنواع تانية من الـ metadata ممكن تعرفها عشان تحسن ظهور موقعك على السوشيال ميديا تحديدًا (زي Open Graph tags بتاعة فيسبوك وتويتر)، بس دي هنتكلم عليها بعدين.

المهم دلوقتي إنك تعرف إن الـ metadata زي:

  • author
  • description
  • keywords (وقلنا التحذير بتاعه: بلاش تستخدمه)
  • robots
  • viewport

كلهم ليهم دور في عملية الـ SEO لصفحات الويب بتاعتك.

ودلوقتي، خلينا نلخصلك أهم الـ meta tags اللي ممكن تحتاجها في شكل cheat sheet:

تركيبة الـ Meta Tag الأساسية

الـ meta tag بيكون ليه attributes زي:

  • الـ name:

    • ده اسم الـ property أو الخاصية اللي بتعرفها.
    • ممكن تحط أي اسم، بس الـ browsers ومحركات البحث بتتوقع أسماء معينة عشان تفهمها وتتصرف بناءً عليها.
    • مثال: <meta name="author" content="name"> عشان تحدد مؤلف الصفحة.

  • الـ content:

    • ده بيحدد القيمة بتاعة الـ property اللي حددتها في name.
    • مثال: <meta name="language" content="english"> عشان تحدد لغة الصفحة لمحركات البحث.

  • الـ charset:

    • ده attribute مخصوص بيحدد الـ character encoding اللي الصفحة بتستخدمه.
    • ده مهم عشان الـ browser يقدر يعرض الحروف والرموز صح (خصوصًا العربي).
    • أشهر قيمة هي utf-8.
    • بيتضاف كده في الـ <head>: <meta charset="UTF-8">.

  • الـ http-equiv:

    • اختصار لـ HTTP equivalent (المكافئ لـ HTTP).
    • بيستخدم عشان يحاكي (simulate) الـ HTTP response headers.
    • استخدامه قليل دلوقتي، والأفضل تستخدم الـ HTTP headers الحقيقية من الـ server بدل الـ meta tags دي.
    • مثال: الـ tag ده بيخلي الـ browser يعمل refresh للصفحة كل 30 ثانية (القيمة بالثواني): <meta http-equiv="refresh" content="30">.

Meta Tags (Cheat Sheet)

HTML Meta Tags

Basic Meta Tags (For SEO)

  • الـ <meta name="description"/>: بيدي وصف مختصر لصفحة الويب (بيظهر في نتايج البحث غالبًا).
  • الـ <meta name=”title”/>: بيحدد عنوان صفحة الويب (مع إن الـ <title> tag هو الأساسي لده).
  • الـ <meta name="author" content="name">: بيحدد مؤلف صفحة الويب.
  • الـ <meta name="language" content="english">: بيحدد لغة صفحة الويب.
  • الـ <meta name="robots" content="index,follow" />: بيقول لمحركات البحث إزاي تعمل crawl أو index لصفحة معينة (زي ما شرحنا فوق: index, follow, noindex, nofollow).
  • الـ <meta name="google"/>: (استخدام خاص بجوجل) بتقول لـ Google متظهرش الـ sitelinks search box لصفحتك في نتايج البحث.
  • الـ <meta name="googlebot" content=”notranslate” />: (استخدام خاص بجوجل) بتقول لـ Google إنك مش عايز توفر ترجمة أوتوماتيكية لصفحتك لو اليوزر بيستخدم لغة تانية.
  • الـ <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />: بيحدد تاريخ ووقت آخر تعديل عملته على الصفحة.
  • الـ <meta name="rating" content="safe for kids">: بيحدد الجمهور المتوقع للصفحة (مثلًا: آمنة للأطفال).
  • الـ <meta name="copyright" content="Copyright 2022">: بيحدد حقوق النشر.

تاجات <meta http-equiv="..."/>

  • They can simulate HTTP response headers. (not recommended)
  • They are useful if you don’t have access to the server configurations.
  • الـ <meta http-equiv="content-type" content="text/html">: بيحدد الـ format بتاع الـ document اللي الـ server بيرجعه (مع إن charset و الـ HTTP header بتاع Content-Type هما الأكثر استخدامًا دلوقتي).
  • الـ <meta http-equiv="default-style"/>: بيحدد الـ format بتاع الـ styling document (ملف الـ CSS الافتراضي).
  • الـ <meta http-equiv="refresh"/>: بيحدد المدة (بالثواني) قبل ما الصفحة تعتبر قديمة ومحتاجة refresh (زي المثال اللي فوق).
  • الـ <meta http-equiv=”Content-language”/>: بيحدد لغة الصفحة (زي name="language").
  • الـ <meta http-equiv="Cache-Control" content="no-cache">: بيدي تعليمات للـ browser إزاي يعمل cache للصفحة بتاعتك (مثلًا: no-cache يعني متخزنش نسخة).

Responsive Design/Mobile Meta Tags

  • الـ <meta name="format-detection" content="telephone=yes"/>: بتوضح إن أرقام التليفونات المفروض تظهر كـ hypertext links ينفع تدوس عليها عشان تعمل مكالمة.
  • الـ <meta name="HandheldFriendly" content="true"/>: (قديمة شوية) كانت بتستخدم عشان توضح إن الصفحة بتتعرض كويس على الأجهزة المحمولة. الـ viewport أهم دلوقتي.
  • الـ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>: بتحدد منطقة الشاشة (window) اللي المحتوى بتاع الويب بيظهر فيها، وده أساسي للـ responsive design (زي ما شرحنا فوق).

كده يبقى لمينا الموضوع كله بخصوص الـ Meta Tags ودورها في الـ SEO وتجربة المستخدم.

Graph View

Backlinks