HTMLالوسم <meta>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
- نصائح و ملاحظات
تعريفه
نستخدم الوسم <meta> بداخل الوسم <head> لتحديد خصائص الصفحة مثل الترميز, إسم المؤلف, الكلمات المفتاحية و غيرها.
المعلومات التي تحددها بواسطة هذا الوسم تكون مفيدة إما للمتصفح حتى يعرض محتوى الصفحة كما يجب و إما لمحركات البحث حتى تعرض الصفحة بالشكل الذي نريدها حين يتم مشاركة الصفحة في مواقع التواصل الإجتماعي.
في العادة نقوم بوضع عدة وسوم <meta> في الصفحة و ستعرف لاحقاً أهمية ذلك.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <meta>.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| مدعوم | 12 | 1 | مدعوم | مدعوم | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
خصائصه
نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.
الخاصية charset
يمكن إضافتها للوسم لتحديد نوع ترميز الأحرف الموضوعة في الصفحة.
في الإصدار HTML 5 الترميز الإفتراضي الموضوع في الصفحات هو utf-8, هذا الترميز يتيح لك عرض جميع الأحرف في الصفحة بأي لغة (عربية, إنجليزية, صينية إلخ..) كانت لذلك لا داعي لأن تحدد نوع الترميز بنفسك.
أنواع الترميز الأخرى مثل ISO-8859-1 لا تتيح لك عرض جميع الأحرف حيث أن هذا النوع يسمح فقط بعرض الأحرف الإنجليزية و في حال حاولت عرض أحرف عربية ستجده يعرضها في الصفحة كرموز غير مفهومة.
إنتبه: يجب وضع الوسم الذي تحدد فيه نوع الترميز في أول الوسم <head> لأن المتصفح يتوقع أن يجد الوسم الذي تم فيه تحديد نوع الترميز في أول 1024 Byte في الملف (أي أول 1024 حرف منه في حال كانت أحرفه إنجليزية) مما يعني أنه قد لا يقرأ السطر الذي حددت فيه نوع الترميز إذا كان موجوداً بعد ذلك.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| مدعوم | 12 | 1 | مدعوم | مدعوم | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
الخاصية content
على حسب القيمة التي نمررها للوسم نفسه بواسطة للخاصية http-equiv أو للخاصية name نقوم بإضافة هذه الخاصية لتحديد قيمة مرتبطة بهما.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 1 | 12 | 1 | ≤12.1 | ≤4 | 1 | 18 | 4 | ≤12.1 | ≤3 | 1.0 |
الخاصية http-equiv
يمكن إضافتها للوسم لتحديد كيف سيتعامل المتصفح مع محتوى الصفحة مع الإشارة إلى أن المعلومات التي يتم تحديدها هنا يتمريرها في Header الصفحة.
عند استخدام الخاصية http-equiv لا بد من استخدام الخاصية content أيضاً لإعطاء قيمة للمعلومة التي يتم تحديدها بواسطة الخاصية http-equiv.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 1 | 12 | 1 | ≤12.1 | ≤4 | 1 | 18 | 4 | ≤12.1 | ≤3 | 1.0 |
يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية http-equiv لتحديد ما هي المعلومات التي سيتم إضافتها في Header الصفحة.
| القيمة | معناها |
|---|---|
content-security-policy |
لتحديد خصائص الحماية المتبعة في عرض محتوى الصفحة فمثلاً إضافة الوسم التالي بداخل الوسم <head> يعني أنه لا يوجد مشكلة في حال كانت الصفحة تضمّن ملفات (صور, خطوط, فيديوهات, سكربتات إلخ..) تستخدم بروتوكل الإتصال http أو https:<meta http-equiv="Content-Security-Policy" content="default-src https:"> |
content-type |
نضيفها للوسم لتحديد نوع محتوى الرابط بأسلوب MIME و هنا يجب تحديده كالتالي: <meta content-type="text/html" content="text/html; charset=utf-8"> هذه الخاصية يمكن استخدامها مع النوع text/html فقط.ملاحظة: لا يوجد أي فرق بين تعريف نوع المحتوى بواسطة هذه الخاصية أو هكذا <meta charset="utf-8">. |
default-style |
نضيفها للوسم لتعيين ملف تصميم إفتراضي و بالطبع يجب تمرير مسار للملف كقيمة للخاصية content. |
x-ua-compatible |
في حال كان المستخدم يتصفح الموقع بواسطة متصفح Internet Explorer فهذه الخاصية يمكن إضافتها له كالتالي لضمان أن يقوم المتصفح باعتماد أحدث طريقة لديه لرسم محتوى الصفحة: <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
refresh |
نضيفها للوسم في حال أردنا جعل الصفحة تقوم بتحديث نفسها بشكل تلقائي بعد مدة محددة, فمثلاً الوسم التالي يجعل الصفحة تتحدث كل 30 ثانية بشكل تلقائي: <meta http-equiv="refresh" content="30"> في حال أردنا جعل الصفحة تقوم بالإنتقال لصفحة أخرى بعد عدد محدد من الثاني, فيجب إضافة ;url= من بعد تحديد عدد الثواني فقط, فمثلاً الوسم التالي يقوم بتوجيه المستخدم إلى الصفحة الموضوع رابطها بشكل تلقائي بعد 30 ثانية: <meta http-equiv="refresh" content="30;url=https:/meta/harmash.com"> |
الخاصية name
يمكن إضافتها للوسم لإضافة معلومات مفيدة لمن سيتعامل مع الصفحة سواء محركات البحث, الصفحات التي قد تقوم بمشاركة رابط الصفحة بالإضافة لجعلها تظهر بشكل أفضل على مختلف أنواع الأجهزة (حاسوب, هاتف إلخ..) التي قد يتم مشاهدة محتوى الصفحة من خلالها.
عند استخدام الخاصية name لا بد من استخدام الخاصية content أيضاً لإعطاء قيمة للمعلومة التي يتم تحديدها بواسطة الخاصية name.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 1 | 12 | 1 | ≤12.1 | ≤4 | 1 | 18 | 4 | ≤12.1 | ≤3 | 1.0 |
يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية name لتحديد ما هي المعلومات التي سيتم إضافتها في الصفحة.
| القيمة | معناها |
|---|---|
application-name |
لوضع إسم للصفحة في حال كانت عبارة عن تطبيق ويب و بالطبع يجب تمرير الإسم لها كقيمة. ملاحظة: بالرغم من أن هذه القيمة مهئية لهذا الأمر إلا أن محركات البحث لا تعيرها أي إهتمام. مثال: <meta name="application-name" content="Web Editor"> |
author |
لوضع إسم كاتب الصفحة (المؤلف) و بالطبع يجب تمرير إسمه لها كقيمة. مثال: <meta name="author" content="Mhamad Harmush"> |
description |
لوضع وصف للصفحة يظهر عند مشاركة الصفحة في مواقع أخرى و عند البحث في محركات البحث فإنه أيضاً يظهر تحت عنوان الصفحة. يجب تمرير الوصف لها كقيمة. مثال: <meta name="description" content="This tutorial is made for free for beginners and for professionals"> |
generator |
لوضع إسم الأداة المستخدمة في إنشاء الصفحة. يجب تمرير إسم الأداة لها كقيمة. مثال: <meta name="generator" content="Harmash Page Generator 4.0.1"> |
keywords |
لوضع كلمات بحث للصفحة و نقصد بذلك تجهيز الجمل التي قد يستخدمها المستخدم عند البحث في محركات البحث. و بالطبع يجب تمرير الجمل لها كقيمة مع وضع فاصلة بين كل جملتين. ملاحظة: بالرغم من أن هذه القيمة مهئية لهذا الأمر إلا أن محركات البحث لم تعد تعيرها أي إهتمام. مثال: <meta name="keywords" content="HTML, Learn HTML, HTML Tutorials"> |
viewport |
لجعل القياسات الموضوعة تظهر بشكل مناسب على جميع الأجهزة. يجب تعريفها و تحديد قيمتها كالتالي: <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
إستخدامه
في المثال التالي قمنا بإضافة 5 وسوم <meta> في الصفحة.
مثال
تصميمه الإفتراضي
لا يوجد تصميم إفتراضي له لأنه بالأساس شيء لا يتم عرضه أمام المستخدم.
نصائح و ملاحظات
الأمثلة التالية توضح أهمية إضافة الوسم التالي كما هو في الصفحات لضمان أن تظهر بشكل مناسب مهما كان الجهاز الذي يستعمله المستخدم.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
في حال كنت تستخدم حاسوب فإنك لن تلاحظ أي فرق بين المثالين الموضوعين و لكن في حال كنت تستخدم هاتف أو تابلت فإنك ستلاحظ الفرق بينهما.
