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 charset="UTF-8">
<meta name="description" content="في هذا الدرس ستتعرف على جميع الوسوم التي يمكن عرضها في صفحات الويب">
<meta name="keywords" content="HTML, وسوم, وسم, خصائص, عناصر صفحات الويب">
<meta name="author" content="محمد هرموش">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
		

جرب الكود

تصميمه الإفتراضي

لا يوجد تصميم إفتراضي له لأنه بالأساس شيء لا يتم عرضه أمام المستخدم.

نصائح و ملاحظات

الأمثلة التالية توضح أهمية إضافة الوسم التالي كما هو في الصفحات لضمان أن تظهر بشكل مناسب مهما كان الجهاز الذي يستعمله المستخدم.

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

في حال كنت تستخدم حاسوب فإنك لن تلاحظ أي فرق بين المثالين الموضوعين و لكن في حال كنت تستخدم هاتف أو تابلت فإنك ستلاحظ الفرق بينهما.

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة