العلامات الوصفية (Meta Tags) في HTML

3 ديسمبر، 2023 * تيتو 4 تك

تتيح لك HTML تحديد البيانات الأولية - معلومات إضافية مهمة حول المستند بعدة طرق. يمكن استخدام عناصر META لتضمين أزواج الاسم / القيمة التي تصف خصائص مستند HTML ، مثل المؤلف وتاريخ انتهاء الصلاحية وقائمة الكلمات الرئيسية ومؤلف المستند وما إلى ذلك.

يتم استخدام علامة <meta> لتوفير مثل هذه المعلومات الإضافية. هذه العلامة عنصر فارغ وبالتالي لا تحتوي على علامة إغلاق ولكنها تحمل معلومات ضمن سماتها.

يمكنك تضمين علامة وصفية واحدة أو أكثر في مستندك بناءً على المعلومات التي تريد الاحتفاظ بها في المستند الخاص بك ، ولكن بشكل عام ، لا تؤثر العلامات الوصفية على المظهر المادي للمستند ، لذا من وجهة نظر المظهر ، لا يهم إذا قمت بتضمين لهم أم لا.

إضافة العلامات الوصفية إلى المستندات في HTML

يمكنك إضافة البيانات الوصفية إلى صفحات الويب الخاصة بك عن طريق وضع علامات <meta> داخل رأس المستند الذي يتم تمثيله بعلامات <head> و <head/>. يمكن أن تحتوي العلامة الوصفية على السمات التالية بالإضافة إلى السمات الأساسية :

السمة	الوصف
Name	ممكن ان يكون اي شيء. تشمل الأمثلة الكلمات الرئيسية والوصف والمؤلف والمراجع وما إلى ذلك
content	يحدد قيمة الخاصية
scheme	يحدد مخططًا لتفسير قيمة الخاصية كما هو موضح في سمة المحتوى
http-equiv	تستخدم لرؤوس رسائل استجابة http. على سبيل المثال ، يمكن استخدام http-equiv لتحديث الصفحة أو لتعيين ملف تعريف ارتباط. تشمل القيم نوع المحتوى ، وانتهاء الصلاحية ، والتحديث

تحديد الكلمات الرئيسية (Keywords) في HTML

يمكنك استخدام علامة <meta> لتحديد الكلمات الرئيسية المهمة المتعلقة بالمستند وبعد ذلك يتم استخدام هذه الكلمات الرئيسية بواسطة محركات البحث أثناء فهرسة صفحة الويب الخاصة بك لغرض البحث.

مثال
فيما يلي مثال ، حيث نضيف HTML و Meta Tags و Metadata ككلمات رئيسية مهمة حول المستند.

<!DOCTYPE html>
<html> 
   <head>
      <title> Example of meta tags </title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>  
   <body>
      <p>Hello HTML5!</p>
   </body>  
</html>

وصف المستند (Description) في HTML

يمكنك استخدام علامة <meta> لإعطاء وصف موجز عن المستند. يمكن استخدام هذا مرة أخرى بواسطة العديد من محركات البحث أثناء فهرسة صفحة الويب الخاصة بك لغرض البحث.

<head>
      <title> Example of meta tags </title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags" />
</head>

تاريخ مراجعة المستند (Revision Date) في HTML

يمكنك استخدام علامة <meta> لإعطاء معلومات حول آخر مرة تم فيها تحديث المستند. يمكن استخدام هذه المعلومات بواسطة متصفحات الويب المختلفة أثناء تحديث صفحة الويب الخاصة بك.

<head>
      <title> Example of meta tags </title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags" />
      <meta name = "revised" content = "Tito4Tech, 06/11/2021" />
</head>

تحديث المستند (Refreshing) في HTML

يمكن استخدام علامة <meta> لتحديد المدة التي سيتم بعدها تحديث صفحة الويب تلقائيًا.

إذا كنت تريد استمرار صفحتك في التحديث بعد كل 5 ثوانٍ ، فاستخدم الصيغة التالية:

   <head>
      <title> Example of meta tags </title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags" />
      <meta name = "revised" content = "Tito4Tech, 06/11/2021" />
      <meta http-equiv = "refresh" content = "5" />
   </head>

إعادة توجيه الصفحة (Redirection) في HTML

يمكنك استخدام علامة <meta> لإعادة توجيه صفحتك إلى أية صفحة ويب أخرى. يمكنك أيضًا تحديد مدة إذا كنت تريد إعادة توجيه الصفحة بعد عدد معين من الثواني.

فيما يلي مثال على إعادة توجيه الصفحة الحالية إلى صفحة أخرى بعد 5 ثوانٍ. إذا كنت تريد إعادة توجيه الصفحة على الفور ، فلا تحدد سمة المحتوى.

   <head>
      <title> Example of meta tags </title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags" />
      <meta name = "revised" content = "Tito4Tech, 06/11/2021" />
      <meta http-equiv = "refresh" content = "5; url = https://tito4tech.com" />
   </head>

تعيين اسم المؤلف أو المالك (Author) في HTML

يمكنك تعيين اسم مؤلف في صفحة ويب باستخدام علامة التعريف. انظر المثال أدناه :

<head>
      <title> Example of meta tags </title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags" />
      <meta name = "author" content = "Tito4Tech" />
</head>

تحديد مجموعة الأحرف (Character Set) في HTML

يمكنك استخدام علامة <meta> لتحديد مجموعة الأحرف المستخدمة في صفحة الويب.
بشكل افتراضي ، تستخدم خوادم الويب ومتصفحات الويب ترميز ISO-8859-1 (Latin1) لمعالجة صفحات الويب. فيما يلي مثال لتعيين ترميز UTF-8 :

 <head>
      <title> Example of meta tags </title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags" />
      <meta name = "author" content = "Tito4Tech" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>

لتقديم الصفحة الثابتة بأحرف صينية تقليدية ، يجب أن تحتوي صفحة الويب على علامة <meta> لتعيين تشفير Big5 :

<head>
      <title> Example of meta tags </title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags" />
      <meta name = "author" content = "Tito4Tech" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
</head>