يمثِّل العنصر <meta>
البيانات الوصفية التي لا يمكن تمثيلها باستخدام عناصر HTML المتعلقة بالبيانات الوصفية مثل <base>
أو <link>
أو <script>
أو <style>
أو <title>
.
مثال عن استخدام العنصر <meta>
لضبط ترميز المحارف إلى UTF-8:
<meta charset="utf-8">
تصنيفات المحتوى | البيانات الوصفية |
---|---|
المحتوى المسموح | لا يوجد، فهذا العنصر فارغ. |
الوسم المختصر | لمّا كان هذا العنصر فارغًا، فيجب توفير وسم البداية وحذف وسم النهاية. |
العناصر الأب | العنصر <head> . |
واجهة DOM |
|
Chrome | Firefox | Edge | Safari | Opera |
---|---|---|---|---|
مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
يمكن استخدام الخاصيات العامة في هذا العنصر.
name
معنى خاص في العنصر <meta>
.charset
تُعرِّف هذه الخاصية ما هو ترميز المحارف (character encoding) المستخدم في الصفحة. يجب أن تحتوي هذه الخاصية على اسم ترميز محارف معياري. وصحيحٌ أنَّ المواصفة لا تتطلب استخدام ترميز معيّن، لكنها تنصح بما يلي:
CESU-8
و UTF-7
و BOCU-1
و SCSU
لإمكانية حدوث هجمات cross-site scripting مع هذه الترميزات.مثال عن استخدام العنصر <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 صحيح.مثال عن إعادة توجيه الصفحة إلى موقع coreiten.com
بعد ثلاث ثواني:
<meta http-equiv="refresh" content="3;url=https://coreiten.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 . |
|
noodp |
منع استخدام وصف Open Directory Project إن وجد كوصفٍ للصفحة في نتائج محركات البحث. | Google, Yahoo, Bing |
noarchive |
الطلب من محركات البحث عدم تخزين محتوى الصفحة مؤقتًا. | Google, Yahoo, Bing |
nosnippet |
منع محركات البحث من عرض أيّ وصف في صفحة نتائج البحث. | Google, Bing |
noimageindex |
طلب عدم إظهار هذه الصفحة على أنها الصفحة المحيلة (referring page) لصفحة مفهرسة. | |
nocache |
قيمة مكافئة للقيمة noarchive . |
Bing |
ملاحظات:
robots.txt
.noindex
، لكنها ستحذف بعد أن يزورها العنكبوت مجددًا، لذا احرص على أنَّ الملف robots.txt
لا يمنع إعادة زيارة عناكب البحث. يجدر بالذكر أنَّ بعض محركات البحث فيها أدوات للمطورين تسمح بحذف الصفحة بسرعة وسهولة.index
و noindex
أو follow
و nofollow
، ففي حال استخدام كلا القيمتين معًا سيكون سلوك العناكب غير محدَّد ويتفاوت بينها.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
فستُعرَّف بيانات وصفية خاصة بالمستخدم.charset
.