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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
   
   <head>
      <title> مثال علي العلامات الوصفية </title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

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

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

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي العلامات الوصفية </title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

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

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

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي العلامات الوصفية </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>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

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

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

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

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي العلامات الوصفية </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>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

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

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

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

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي العلامات الوصفية </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>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

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

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

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي العلامات الوصفية </title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags" />
      <meta name = "author" content = "Tito4Tech" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

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

يمكنك استخدام علامة <meta> لتحديد مجموعة الأحرف المستخدمة في صفحة الويب.

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

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي العلامات الوصفية </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>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

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

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي العلامات الوصفية </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>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

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

Nov. 6, 2021 | تيتو 4 تك