العنصر <meta>

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث

يمثِّل العنصر <meta> البيانات الوصفية التي لا يمكن تمثيلها باستخدام عناصر HTML المتعلقة بالبيانات الوصفية مثل <base> أو <link> أو <script> أو <style> أو <title>.

مثال عن استخدام العنصر <meta> لضبط ترميز المحارف إلى UTF-8:

<meta charset="utf-8">
تصنيفات المحتوى البيانات الوصفية
المحتوى المسموح لا يوجد، فهذا العنصر فارغ.
الوسم المختصر لمّا كان هذا العنصر فارغًا، فيجب توفير وسم البداية وحذف وسم النهاية.
العناصر الأب العنصر <head>.
واجهة DOM HTMLMetaElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم
دورة تطوير واجهات المستخدم
  • 66 ساعة فيديو تدريبية
  • من الصفر دون الحاجة لخبرة مسبقة
  • شهادة معتمدة من أكاديمية حسوب
  • متابعة أثناء الدورة من فريق مختص

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

ملاحظة: للخاصية العامة name معنى خاص في العنصر <meta>.

charset

تُعرِّف هذه الخاصية ما هو ترميز المحارف (character encoding) المستخدم في الصفحة. يجب أن تحتوي هذه الخاصية على اسم ترميز محارف معياري. وصحيحٌ أنَّ المواصفة لا تتطلب استخدام ترميز معيّن، لكنها تنصح بما يلي:

  • من المفضل أن يستعمل المطورون ترميز UTF-8.
  • يجب على المطورين عدم استخدام الترميزات غير المتوافقة مع معيار ASCII لتفادي المخاطر الأمنية الناجمة عن تفسير النص على أنه شيفرة HTML.
  • يجب ألا يستعمل المطورون ترميزات CESU-8 و UTF-7 و BOCU-1 و SCSU لإمكانية حدوث هجمات cross-site scripting مع هذه الترميزات.
  • يجب عدم استخدام ترميز UTF-32 لعدم قدرة جميع خوارزميات ترميز HTML5 على التفريق بينه وبين UTF-16.

مثال عن استخدام العنصر <meta> لضبط ترميز المحارف إلى UTF-8:

<meta charset="utf-8">

ملاحظات:

  • يجب أن يطابق ترميز المحارف الترميز الذي خُدِّمَت معه الصفحة، لتفادي حدوث تشويه في المحارف أو ثغرات أمنية.
  • يجب أن يكون العنصر <meta> الذي يُعرِّف ترميز المحارف ضمن العنصر <head> وضمن أوّل 1024 بايت من مستند HTML، لأن بعض المتصفحات تبحث في مجال معيّن من البايتات قبل أن تختار ترميزًا للمستند تلقائيًا.
  • العنصر <meta> هو جزء من خوارزمية تحديد ترميز المحارف في الصفحة، فترويسة HTTP المسماة Content-Type لها أولوية على هذا العنصر.
  • من المستحسن بشدة تعريف ترميز المحارف، فلو لم يُعرَّف ترميز المحارف للصفحة فقد يشكِّل ذلك مخاطر أمنية.
  • العنصر <meta> مع الخاصية charset يكافئ العنصر الآتي الذي كان يستعمل قبل HTML5: ‏‎<meta http-equiv="Content-Type" content="text/html; charset="IANAcharset">‎، حيث IANAcharset هو اسم ترميز المحارف الذي تقبله الخاصية charset. الشكل القديم ما يزال مدعومًا لكن ينصح بعدم استخدامه.


content

تحتوي هذه الخاصية القيمة الموافقة لخاصية http-equiv أو name، اعتمادًا على سياق استخدامها.

http-equiv

تحتوي هذه الخاصية على اسم إحدى ترويسات HTTP، لاحظ أنَّ اسم هذه الخاصية هو اختصارٌ للتعبير http-equivalent، وهذه الخاصية تعرّف تعليمة يمكنها تعديل سلوك الخادوم أو المتصفح؛ وتكون قيمة هذه الخاصية موجودة ضمن الخاصية content.

هذه بعض القيم التي تأخذها هذه الخاصية:

"content-type"

تعرِّف هذه التعليمة نوع MIME للمستند، متبوعًا بترميز المحارف، ولهذه القيمة نفس شكل ترويسة HTTP الشهيرة content-type، لكنها معرفة داخل صفحة HTML.

لاحظ أنَّ من المستحيل استخدام قيم بخلاف text/html في مستندات HTML، وبالتالي فإن الشكل الصحيح للخاصية content هو وضع السلسلة النصية text/html متبوعةً بترميز المحارف الذي يُصرَّح عنه بالصيغة ‎; charset=IANAcharset حيث IANAcharset هو اسم ترميز المحارف الذي تقبله الخاصية charset.

يجدر بالذكر أنَّ من المستحسن عدم استخدام هذه القيمة وإنما استخدام الخاصية charset مع العنصر <meta>.

"refresh"

هذه التعليمة تحدِّد:

  • عدد الثواني التي يجب انتظارها حتى تتم إعادة تحمل الصفحة، وذلك إذا كانت قيمة الخاصية content تحتوي على عدد صحيح موجب فقط.
  • عدد الثواني التي يجب انتظارها حتى يتم إعادة التوجيه إلى صفحة أخرى، وذلك إذا احتوت الخاصية content على عدد صحيح موجب متبوع بالسلسلة النصية‎ ;url= ‎ ثم رابط URL صحيح.

مثال عن إعادة توجيه الصفحة إلى موقع hsoub.com بعد ثلاث ثواني:

<meta http-equiv="refresh" content="3;url=http://www.hsoub.com">

name

هذه الخاصية تُعرِّف اسم المعلومات الوصفية في المستند، ولا يجوز أن تُضبَط إذا كان العنصر <meta> يحتوي على خاصية itemprop أو http-equiv أو charset.

البيانات الوصفية المرتبطة بالخاصية name لها قيمة مُعرَّفة ضمن الخاصية content؛ وهذه بعض القيم التي يمكن استخدامها مع الخاصية name:

  • application-name تُعرِّف اسم التطبيق الذي يعمل في صفحة الويب. قد تستخدم المتصفحات هذه القيمة لتعريف التطبيق، وهذه القيمة مختلفة عن العنصر <title> الذي قد يحتوي على اسم التطبيق، لكن قد يتضمن معلومات أخرى مثل اسم المستند أو حالة التطبيق.
  • author تعرِّف اسم مؤلف هذا المستند.
  • description تحتوي على شرح مختصر وخلاصة دقيقة للمحتوى الموجود في الصفحة؛ عددٌ من المتصفحات -مثل Firefox و Opera- تستعمل هذه القيمة كوصف افتراضي للصفحات الموجودة في المفضلة.
  • generator تحتوي على مُعرِّف البرمجية التي ولّدت الصفحة.
  • keywords تحتوي على قائمة بالكلمات المفتاحية المتعلقة بمحتوى الصفحة، مفصولٌ بينهما بفاصلة ,.

مثال عن استخدام العنصر <meta> لإضافة كلمات مفتاحية وشرح مختصر عن المستند واسم كاتب الصفحة:

<meta name = "keywords" content = "HTML, meta tag, metadata"> 
<meta name = "description" content = "Brief description of the document">
<meta name = "author" content="Abdullatif Eymash">

هنالك قائمة بقيم الخاصية name الأخرى شائعة الاستخدام، لكنها ليست معيارية:

  • creator تُعرِّف اسم مُنشِئ المستند، مثل المنظمة أو المعهد المسؤول عن الصفحة؛ وإذا كان هنالك أكثر من قيمة فيمكن استخدام أكثر من وسم <meta>.
  • publisher تُعرِّف اسم ناشر المستند.
  • robots تُعرِّف سلوك عناكب محركات البحث (robots) الذي يجب أن تتبعه تلك العناكب عند تعاملها مع الصفحة، والقيم المرتبطة بها يُفصل بينها بفاصلة:
القيمة الوصف مستعملة من
index السماح للعناكب بفهرسة الصفحة (القيمة الافتراضية). جميع العناكب
noindex الطلب من العناكب ألّا تفهرس الصفحة. جميع العناكب
follow السماح للعناكب باتباع الروابط الموجودة في الصفحة (القيمة الافتراضية). جميع العناكب
none هذه القيمة تكافئ استخدام noindex, nofollow. Google
noodp منع استخدام وصف Open Directory Project إن وجد كوصفٍ للصفحة في نتائج محركات البحث. Google, Yahoo, Bing
noarchive الطلب من محركات البحث عدم تخزين محتوى الصفحة مؤقتًا. Google, Yahoo, Bing
nosnippet منع محركات البحث من عرض أيّ وصف في صفحة نتائج البحث. Google, Bing
noimageindex طلب عدم إظهار هذه الصفحة على أنها الصفحة المحيلة (referring page) لصفحة مفهرسة. Google
nocache قيمة مكافئة للقيمة noarchive. Bing
ملاحظات:
  • القواعد السابقة ليست إجبارية، وإنما تتبعها بعض العناكب المتعاونة، لذا لا تتوقع منع العناكب الخبيثة التي تجمع عناوين البريد الإلكتروني باستخدامها.
  • ستحتاج العناكب إلى وصولٍ إلى الصفحة لقراءة القواعد السابقة، لذا لتوفير استهلاك التراسل الشبكي فمن المستحسن استخدام ملف robots.txt.
  • إذا أردتَ حذف صفحة ما، فاستعمل القيمة noindex، لكنها ستحذف بعد أن يزورها العنكبوت مجددًا، لذا احرص على أنَّ الملف robots.txt لا يمنع إعادة زيارة عناكب البحث. يجدر بالذكر أنَّ بعض محركات البحث فيها أدوات للمطورين تسمح بحذف الصفحة بسرعة وسهولة.
  • بعض القيم مرتبطة بالتبادل مثل index و noindex أو follow و nofollow، ففي حال استخدام كلا القيمتين معًا سيكون سلوك العناكب غير محدَّد ويتفاوت بينها.
  • يدعم بعض العناكب مثل عناكب Google و Yahoo و Bing بعض القيم في ترويسة HTTP المسماة X-Robot-Tags؛ مما يسمح باستخدام القواعد السابقة مع أنواع الملفات الأخرى مثل الصور.
  • googlebot وهي قيمة مكافئة للقيمة robots لكن لن يتبع تعليماتها إلا Googlebot، الذي هو عنكبوت البحث التابع لمحرك Google.
  • slurp وهي قيمة مكافئة للقيمة robots لكن لن يتبع تعليماتها إلا Slurp، الذي هو عنكبوت البحث التابع لمحرك Yahoo .
  • viewport التي تعطي فكرةً عن حجم إطار العرض المبدئي، وهي تستعمل من الهواتف المحمولة فقط. القيم القابلة للاستعمال في عنصر <meta name="viewport"‎>
القيمة القيم الفرعية الوصف
width عدد صحيح موجب، أو السلسلة النصية device-width تحديد عرض إطار العرض بالبكسل، أو السماح لإطار العرض بملائمة عرض شاشة الجهاز.
height عدد صحيح موجب، أو السلسلة النصية device-height تحديد ارتفاع إطار العرض، وهذه القيمة غير مستعملة من أيّ متصفح.
initial-scale عدد موجب بين 0.0 و 10.0 تعريف النسبة بين عرض الجهاز (أي device-width في الوضع العمودي للجهاز أو device-height في الوضع الأفقي للجهاز) وبين أبعاد إطار العرض.
maximum-scale عدد موجب بين 0.0 و 10.0 تعريف أكبر قدر للتقريب، ويجب أن تكون هذه القيمة أكبر أو تساوي minimum-scale وإلا فسيكون تأثيرها غير معرف. يمكن تجاهل هذه القيمة من ضبط المتصفح، ويتجاهلها نظام iOS10+‎ افتراضيًا.
user-scalable yes أو no إذا ضُبِطَت إلى no، فلن يتمكن المستخدم من تقريب أو تكبير (zoom) الصفحة. القيمة الافتراضية هي yes، ويمكن تجاهل هذه القيمة من ضبط المتصفح، ويتجاهلها نظام iOS10+‎ افتراضيًا.
ملاحظات:
  • صحيحٌ أنَّ القيم السابقة لا تتبع لمعيار معيّن، لكن أغلبية متصفحات الهواتف تحترمها.
  • القيم الافتراضية تختلف بين الأجهزة والمتصفحات.

مثال عن ضبط أبعاد إطار العرض في الهواتف المحمولة: 

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

ملاحظات

اعتمادًا على الخاصيات المستعملة في العنصر <meta>، فيمكن أن تنضوي البيانات الوصفية تحت أحد التصنيفات الآتية:

  • إذا ضُبِطَت الخاصية name، فالبيانات الوصفية ستُطبَّق على كامل الصفحة.
  • إذا ضُبِطَت الخاصية http-equiv فستوفَّر معلومات تعطى عادةً من الخادوم.
  • إذا ضُبِطَت الخاصية charset فسيُحدَّد ما هو ترميز المحارف المستعمل في الصفحة.
  • إذا ضُبِطَت الخاصية itemprop فستُعرَّف بيانات وصفية خاصة بالمستخدم.

مصادر ومواصفات

مجلوبة من "https://wiki.hsoub.com/index.php?title=HTML/meta&oldid=32116"