الفرق بين المراجعتين لصفحة: «HTML/meta»

مراجعة 08:36، 27 يناير 2018

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

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

<meta charset="utf-8">

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

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

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

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

ملاحظة: للخاصية العامة 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 فستُعرَّف بيانات وصفية خاصة بالمستخدم.

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

معيار HTML Living Standard.
مواصفة HTML5، أضافت هذه المواصفة دعمًا للخاصية charset.
مواصفة HTML 4.01.

@@ سطر 196: / سطر 196: @@
 *مواصفة [http://www.w3.org/TR/html5/document-metadata.html#the-meta-element HTML5]، أضافت هذه المواصفة دعمًا للخاصية <code>[[HTML/meta#charset|charset]]</code>.
 *مواصفة [http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.2 HTML 4.01].<code></code>
-[[تصنيف:Metadata]]
-__لصق_فهرس__
 [[تصنيف:HTML]]
 [[تصنيف:HTML Elements]]
+[[تصنيف:Metadata]]