شرح العنصر <meta> في HTML: دليل شامل
وسم <meta> هو وسم بيانات وصفية يوفر معلومات منظمة عن المستند، مثل ترميز الأحرف، واسم المؤلف، وإعدادات نافذة العرض. ويلعب دورًا محوريًا في تحسين إمكانية الوصول إلى صفحات الويب ووظائفها.
بناء الجملة
العنصر <meta> يغلق نفسه تلقائيًا ولا يحتوي على وسم إغلاق. يُوضع داخل قسم <head> من مستند HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="وصف صفحة الويب" />
</head>
<body>
<!-- محتوى صفحة الويب يظهر هنا -->
</body>
</html>
أمثلة شائعة
تحديد ترميز الأحرف
<meta charset="UTF-8" />
ملاحظة: UTF-8 هو الترميز الموصى به الذي يدعم جميع الأحرف واللغات.
وصف صفحة الويب
<meta name="description" content="متجر إلكتروني للإلكترونيات والأدوات" />
يظهر هذا الوصف غالبًا في نتائج محركات البحث.
إعدادات العرض على الجوال
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
ضروري لجعل الموقع متجاوبًا مع مختلف أحجام الشاشات.
الكلمات المفتاحية
<meta name="keywords" content="إلكترونيات، أدوات، متجر إلكتروني، تقنية" />
ملاحظة: لم تعد محركات البحث تعتمد كثيرًا على هذه العلامة.
تحديد المؤلف
<meta name="author" content="جون دو" />
التحديث التلقائي
<meta http-equiv="refresh" content="5;url=https://example.com" />
تحديث الصفحة كل 5 ثوانٍ أو إعادة توجيهها لرابط آخر.
توافق إنترنت إكسبلورر
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
لضمان العرض الصحيح في متصفح Internet Explorer.
السمات الرئيسية
| السمة | الوصف | مثال |
|---|---|---|
charset |
يحدد ترميز الأحرف للمستند | charset="UTF-8" |
name |
يحدد نوع البيانات الوصفية | name="description" |
content |
يحدد قيمة البيانات الوصفية | content="وصف الصفحة" |
http-equiv |
يحدد رأس HTTP المطلوب | http-equiv="refresh" |
أفضل الممارسات
- استخدم
<meta charset="UTF-8">في كل صفحة ويب - أضف وصفًا مختصرًا وجذابًا باستخدام
name="description" - لا تهمل إعدادات
viewportلتصميم متجاوب - استخدم
http-equiv="X-UA-Compatible"إذا كنت تدعم IE - تجنب الإفراط في استخدام
http-equiv="refresh"لأنه قد يزعج الزوار
نصائح لتحسين محركات البحث (SEO)
الوصف الجيد
اكتب وصفًا مختصرًا (150-160 حرفًا) يجذب انتباه المستخدمين في نتائج البحث.
الكلمات المفتاحية
رغم تراجع أهميتها، يمكن استخدامها كمرجع داخلي لفهم محتوى الصفحة.
الخاتمة
تعتبر علامات <meta> من العناصر الأساسية في تطوير الويب، حيث توفر معلومات حيوية لمتصفحات الويب ومحركات البحث. استخدامها الصحيح يحسن من تجربة المستخدم ويساعد في تحسين ظهور الموقع في نتائج البحث.
