تعرَّفت في قسم "بنية المستند" على المكوّنات التي تجدها دائمًا في <head> ضمن مستند HTML. إنّ كل العناصر في <head>، بما في ذلك <title> و<link> و<script> و<style> والأقل استخدامًا <base>، هي في الواقع "بيانات وصفية"، إلا أنّ هناك علامة <meta> للبيانات الوصفية لا يمكن تمثيلها بهذه العناصر الأخرى.
تتضمن المواصفات العديد من أنواع البيانات الوصفية، وهناك العديد من أنواع البيانات الوصفية الأخرى التي تتوافق مع التطبيقات والتي ليست في أي مواصفات رسمية. في هذا القسم، سنناقش السمات والقيم التي يتم تضمينها في المواصفات، وبعض الأسماء الوصفية الشائعة وقيم المحتوى، وبعض الأنواع الوصفية المفيدة للغاية لتحسين محركات البحث ونشر المشاركات على وسائل التواصل الاجتماعي وتجربة المستخدم التي لم يتم تعريفها رسميًا بواسطة whatWG أو W3C.
تمت إعادة الاطّلاع على علامات <meta> المطلوبة.
لنعيد النظر في علامتَي <meta> الضروريتَين اللتَين سبق أن تم تضمينهما، وهما بيان مجموعة الأحرف والعلامة الوصفية لإطار العرض، ونتعرّف بشكل أفضل على علامة <meta> في هذه العملية.
ظهرت سمة charset للعنصر <meta> بطريقة فريدة. في الأصل، كانت البيانات الوصفية لمجموعة الأحرف مكتوبة بالصيغة <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" />، إلا أنّ العديد من المطوّرين أخطأوا في كتابة السمة content على النحو التالي: content="text/html" charset="<characterset>"، ما دفع المتصفِّحات إلى السماح باستخدام مجموعة الأحرف كسمة. تم توحيد هذا المعيار الآن في معيار HTML للمعيشة باسم <meta charset="<charset>" />، حيث يمثّل <charset> السلسلة غير الحساسة لحالة الأحرف "utf-8" في HTML.
ربما لاحظت أنّ التعريف الوصفي لمجموعة الأحرف الأصلي المستخدَم لتضمين السمة http-equiv. وهو اختصار لعبارة "http-معادلة"، حيث إن العلامة الوصفية تنسخ في الأساس ما يمكن تعيينه في عنوان HTTP. بالإضافة إلى استثناء charset، تحتوي جميع العلامات الوصفية الأخرى المحددة في مواصفات HTML ماذاWG على السمة http-equiv أو name.
العلامات الوصفية المحددة رسميًا
هناك نوعان رئيسيان من العلامات الوصفية: توجيهات pragma، وتتضمّن السمة http-equiv، مثل العلامة الوصفية لمجموعة الأحرف، والأنواع الوصفية المُسمّاة، مثل العلامة الوصفية لإطار العرض التي تتضمّن السمة name التي ناقشناها في قسم بنية المستند. يجب أن يتضمّن كل من النوعَين التعريفيَين name وhttp-equiv السمة content التي تحدّد المحتوى لنوع البيانات الوصفية المُدرَجة.
توجيهات براغما
تحتوي السمة http-equiv على توجيه pragma. تصف هذه التوجيهات كيفية تحليل الصفحة. تعمل قيم http-equiv المتوافقة على تفعيل توجيهات الإعداد عندما لا تتمكّن من تحديد عناوين HTTP مباشرةً.
تحدِّد المواصفات سبعة توجيهات من نوع pragma، يحتوي معظمها على طرق أخرى للضبط. على سبيل المثال، حين يمكنك تضمين توجيه لغوي مع <meta http-equiv="content-language" content="en-us" />، سبق أن ناقشنا استخدام السمة lang في عنصر HTML، وهي السمة التي يجب استخدامها بدلاً من ذلك.
توجيه pragma الأكثر شيوعًا هو التوجيه refresh.
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
ومع أنّه يمكنك ضبط توجيه لإعادة التحميل على فاصل زمني لعدد الثواني المحدّد في السمة content وحتى إعادة التوجيه إلى عنوان URL مختلف، لا ننصح بذلك. إنّ إعادة تحميل المحتوى وإعادة توجيهه بدون طلب صريح من المستخدم لإجراء ذلك يُعدّ ضعيفًا من حيث الاستخدام ويؤثر سلبًا على إمكانية الوصول. ألا تكرهونك عندما تكون في منتصف إحدى الفقرات وتتم إعادة ضبط الصفحة؟ تخيل أنك تواجه مشاكل في الإدراك أو الرؤية ويحدث هذا الأمر. إذا كنت تريد ضبط إعادة تحميل باستخدام إعادة توجيه، تأكّد من أنّ المستخدم لديه الوقت الكافي لقراءة الصفحة، ورابطًا لتسريع العملية، وإذا كان ذلك مناسبًا، استخدِم زر "إيقاف الساعة" ومنع حدوث عملية إعادة التوجيه.
لن نضمّن ذلك في موقعنا لأنه ليس هناك سبب لانتهاء مهلة جلسة المستخدم سوى إزعاج الزائرين.
توجيه pragma الأكثر فائدة هو content-security-policy، ويتيح تحديد سياسة محتوى للمستند الحالي. تحدِّد سياسات المحتوى في الغالب مصادر الخادم ونقاط نهاية النص البرمجي المسموح بها، ما يساعد في الحماية من هجمات البرمجة النصية على مستوى المواقع الإلكترونية.
<meta http-equiv="content-security-policy" content="default-src https:" />
إذا لم يكن لديك إذن الوصول لتغيير عناوين HTTP (أو إذا كان لديك إذن بذلك)، إليك قائمة بقيم المحتوى المفصولة بمسافات لتوجيهات content-security-policy.
العلامات الوصفية المُسمّاة
وفي أغلب الأحيان، تقوم بتضمين بيانات وصفية ذات أسماء محددة. ضمِّن السمة name، على أن تمثل قيمة السمة اسم البيانات الوصفية. كما هي الحال مع توجيهات pragma، تكون السمة content مطلوبة.
السمة name هي اسم البيانات الوصفية. بالإضافة إلى viewport، ننصحك بتضمين description وtheme-color، ولكن ليس keywords.
الكلمات الرئيسية
أساء مندوبو مبيعات عمليات تحسين محركات البحث استخدام العلامة الوصفية للكلمات الرئيسية من خلال ملء قوائم كلمات غير مرغوب فيها مفصولة بفواصل بدلاً من قوائم المصطلحات الأساسية ذات الصلة، ولذلك لم تعد محركات البحث تعتبر هذه البيانات الوصفية مفيدة بعد الآن. لا حاجة إلى تضييع الوقت أو الجهد أو وحدات البايت عند إضافتها.
الوصف
في المقابل، إنّ قيمة description مفيدة لتحسين محركات البحث، إذ إنّ قيمة محتوى الوصف هي غالبًا ما تعرضه محرّكات البحث أسفل عنوان الصفحة في نتائج البحث. تستخدم العديد من المتصفحات، مثل Firefox وOpera، كوصف تلقائي للصفحات التي تم وضع إشارة عليها. يجب أن يكون الوصف ملخّصًا قصيرًا ودقيقًا لمحتوى الصفحة.
<meta name="description"
content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
إذا لم يكن النصف الثاني من الوصف منطقيًا بالنسبة إليك، فمن المحتمل أنك لم تشاهد فيلم Zoolander.
روبوتات
إذا كنت لا تريد أن تفهرس محرّكات البحث موقعك الإلكتروني، يمكنك إخبارها. يطلب <meta name="robots" content="noindex, nofollow" /> من برامج التتبّع عدم فهرسة الموقع الإلكتروني وعدم اتّباع أي روابط. يجب أن تستمع برامج التتبّع إلى الطلب، لكن لا يوجد قانون يتطلّب الاستجابة للطلب. ليس عليك تضمين <meta name="robots" content="index, follow" /> لطلب فهرسة الموقع الإلكتروني ومتابعة الروابط لأنّ هذا هو الخيار التلقائي، ما لم تنص عناوين HTTP على خلاف ذلك.
<meta name="robots" content="index, follow" />
لون المظهر
تتيح لك القيمة theme-color تحديد لون لتخصيص واجهة المتصفّح. سيتم استخدام قيمة اللون في سمة المحتوى من خلال المتصفّحات وأنظمة التشغيل المتوافقة، ما يتيح لك تقديم لون مقترَح لبرامج وكيل المستخدم التي تتيح تلوين شريط العناوين أو شريط علامات التبويب أو مكوّنات Chrome الأخرى. هذه العلامة الوصفية مفيدة بشكلٍ خاص لتطبيقات الويب التقدّمية. وإذا كنت تريد تضمين ملف بيان، وهو ملف مطلوب لتطبيق PWA، يمكنك تضمين لون المظهر هناك بدلاً من ذلك. ومع ذلك، يضمن تحديده في HTML إمكانية العثور على اللون على الفور، قبل العرض، والذي قد يكون أسرع عند التحميل الأول من انتظار البيان.
لضبط لون المظهر على اللون الأزرق للون خلفية الموقع الإلكتروني، عليك تضمين ما يلي:
<meta name="theme-color" content="#226DAA" />
يمكن أن تتضمن العلامة الوصفية للون المظهر السمة media التي تتيح ضبط ألوان المظاهر المختلفة استنادًا إلى الاستعلامات عن الوسائط. يمكن تضمين السمة media في هذه العلامة الوصفية فقط ويتم تجاهلها في كل العلامات الوصفية الأخرى.
هناك العديد من القيم الوصفية name الأخرى، ولكن القيم التي ناقشناها هي الأكثر شيوعًا. باستثناء تحديد قيم theme-color مختلفة لاستعلامات الوسائط المختلفة، يجب تضمين قيمة واحدة فقط من كل علامة وصفية. إذا كنت تحتاج إلى تضمين أكثر من نوع واحد من العلامات الوصفية لدعم المتصفّحات القديمة، يجب أن تأتي القيم القديمة بعد القيم الأحدث، لأنّ برامج وكيل المستخدم تقرأ القواعد المتتالية إلى أن يتم العثور على تطابق.
فتح الرسم البياني
يمكن استخدام Open Graph وبروتوكولات العلامات الوصفية المشابهة للتحكم في كيفية عرض مواقع وسائل التواصل الاجتماعي، مثل Twitter وLinkedIn وFacebook، للروابط المؤدية إلى المحتوى الخاص بك. وفي حال عدم تضمين هذه البيانات، ستحصل مواقع التواصل الاجتماعي على نحو صحيح لعنوان صفحتك والوصف من العلامة الوصفية، وهي المعلومات نفسها التي تقدّمها محرّكات البحث، ولكن يمكنك تحديد ما تريد أن يراه المستخدمون عند نشر رابط في موقعك الإلكتروني.
عند نشر رابط إلى MachineLearningWorkshop.com أو web.dev على Facebook أو Twitter، تظهر بطاقة تحتوي على صورة وعنوان موقع إلكتروني ووصف للموقع الإلكتروني. البطاقة الكاملة هي رابط تشعّبي يؤدي إلى عنوان URL الذي قدّمته.
تتضمّن العلامات الوصفية للرسم البياني المفتوح سمتَين لكل منهما: السمة property بدلاً من السمة name، والمحتوى أو القيمة الخاصة بتلك السمة. لم يتم تحديد السمة property في المواصفات الرسمية، ولكنّها معتمدة على نطاق واسع في التطبيقات التي تتيح بروتوكول Open Graph. إنّ إنشاء سمات "جديدة" مثل property يضمن عدم تضارب قيم السمات التي تمّ إنشاؤها لسمة البروتوكول مع القيم المستقبلية للسمتَين name أو http-equiv.
إنشاء بطاقة وسائط على Facebook:
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
يمكنك تضمين عنوان لمشاركتك للعرض. يتم عرض هذا العنوان بشكل عام أسفل الصورة وأعلى الوصف. يجب أن يصل الوصف إلى ثلاث جمل تلخص مشاركتك. سيظهر هذا العنوان بعد العنوان المحدّد في og:title. عليك تقديم عنوان URL الكامل لصورة البانر التي تريد عرضها، بما في ذلك بروتوكول https://. عند تضمين صورة بتنسيق HTML، يجب دائمًا تضمين وصف نصي بديل للصورة، حتى عندما تظهر الصورة في مكان آخر. بالنسبة إلى بطاقات وسائل التواصل الاجتماعي بنظام Open Graph، حدِّد alt على أنّه قيمة المحتوى للسمة og:image:alt. يمكنك أيضًا تضمين عنوان URL أساسي مع og:url.
يتم تعريف جميع هذه العلامات الوصفية في بروتوكول Open Graph. يجب أن تكون القيم هي المحتوى الذي تريد أن يعرضه تطبيق الويب التابع لجهة خارجية.
لوسائل التواصل الاجتماعي الأخرى بنيتها الخاصة، مثل ترميز بطاقة Twitter. وهذا يتيح تقديم تجربة مختلفة استنادًا إلى مكان ظهور الرابط، أو تفعيل ميزة تتبُّع الرابط من خلال إضافة مَعلمة في نهاية عنوان URL.
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
لضمان عدم تضارب قيمة السمة name مع المواصفات المستقبلية في Twitter، بدلاً من استخدام سمة جديدة مثل السمة property في Open Graph، وذلك في ما يتعلّق ببيانات بطاقة Twitter، يجب أن تبدأ جميع قِيم الأسماء ببادئة twitter:.
يمكنك معرفة الشكل الذي ستبدو عليه بطاقة وسائل التواصل الاجتماعي على Twitter وFacebook.
يمكنك استخدام صور وعناوين وأوصاف مختلفة للبطاقات على مواقع إلكترونية مختلفة على وسائل التواصل الاجتماعي أو لمَعلمات روابط مختلفة. على سبيل المثال، يضبط https://perfmattersconf.com قيمًا مختلفة لكلّ من og:image وog:title وog:description استنادًا إلى معلَمة عنوان URL.
إذا أدخلت https://perfmattersconf.com?name=erica وhttps://perfmattersconf.com?name=melanie في أداة التحقّق من بطاقات Twitter، سترى هاتَين البطاقتَين المختلفتَين، لأنّنا قدّمنا محتوًى مختلفًا على الرغم من أنّهما يتضمّنان رابطين إلى الصفحة الرئيسية للمؤتمر نفسه.
معلومات وصفية أخرى مفيدة
إذا وضع شخص إشارة مرجعية على موقعك الإلكتروني، أو إضافته إلى شاشته الرئيسية، أو إذا كان موقعك عبارة عن تطبيق ويب تقدّمي، أو كان يعمل بلا اتصال بالإنترنت أو بدون عرض ميزات Chrome الخاصة بالمتصفّح، يمكنك توفير رموز التطبيق للشاشة الرئيسية للجهاز الجوّال.
يمكنك استخدام العلامة <link> للربط بصور بدء التشغيل التي تريد استخدامها. في ما يلي مثال على تضمين بعض الصور مع الاستعلامات عن الوسائط:
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
إذا كان موقعك الإلكتروني أو تطبيقك متوافقًا مع تطبيق الويب، أي أنّ الموقع الإلكتروني يمكن أن يتوقّف بمفرده في واجهة مستخدم بسيطة، مثل عدم توفُّر زر الرجوع، يمكنك استخدام العلامات الوصفية لإخبار المتصفّح بذلك أيضًا:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
ولا تضمِّن هذه الخيارات إلا إذا كان تطبيقك متوافقًا مع هذه التطبيقات. إذا لم يكن موقعك الإلكتروني كذلك، سيتم إعداد أبرز الداعمين لموقعك الإلكتروني وهم الذين أضافوا الموقع إلى شاشتهم الرئيسية لتقديم تجربة سيئة للمستخدم بشكل كبير. سوف تفقد حبك لها!
إذا كان أحد الأشخاص سيحفظ رمزك على الشاشة الرئيسية لجهازه الصغير، فأنت بحاجة إلى تزويد نظام التشغيل باسم مختصر لا يشغل مساحة كبيرة على الشاشة الرئيسية للجهاز الصغير. ويمكنك القيام بذلك من خلال تضمين علامة وصفية أو استخدام ملف بيان ويب. يوضح ما يلي طريقة العلامة الوصفية:
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
لقد غطيت العديد من العلامات الوصفية، وجميعها سيجعل العنوان أطول. إذا كنت بصدد إنشاء تطبيق ويب تقدّمي متوافق مع تطبيقات الويب ويمكن استخدامه بلا إنترنت، بدلاً من تضمين هاتين العلامتَين الوصفيتَين الإضافيتَين، يمكنك تضمين short_name: MLW في ملف Webmanifest ببساطة وإيجاز.
يمكن أن يمنع ملف البيان الرأس غير العملي المليء بعلامات <link> و<meta>. يمكننا إنشاء ملف بيان، يُسمى عمومًا manifest.webmanifest أو manifest.json. بعد ذلك، نستخدم علامة <link> المفيدة مع سمة rel مضبوطة على manifest والسمة href مع عنوان URL لملف البيان:
<link rel="manifest" href="/mlw.webmanifest" />
تركّز هذه السلسلة على ترميز HTML، ولكن يمكنك الاطّلاع على دورة web.dev التدريبية حول تطبيقات الويب التقدّمية أو مستندات بيان تطبيق الويب في MDN.
يبدو ملف HTML الآن كما يلي:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
<link rel="manifest" href="/mlwmanifest.json" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
إنه طويل جدًا، لكنه قد اكتمل.
الآن وقد اكتملت عملية <head> تقريبًا، يمكنك الاطّلاع على بعض رموز HTML الدلالية.
التحقق من فهمك
اختبر معلوماتك عن بيانات التعريف
توجيه إعادة تحميل pragma.
افتح العلامات الوصفية للرسم البياني.