<meta>
وسم البيانات الوصفية <meta>
وسم meta يزود المتصفح ومحركات البحث بمعلومات عن الصفحة: الترميز، الوصف، إعداد الشاشة، بطاقات المشاركة.
ساكن head غير المرئي الذي تُبنى عليه أشياء مرئية جدًّا: charset يضمن ظهور العربية سليمة، وviewport شرط أي تصميم متجاوب على الجوال، وdescription هو النص الذي تعرضه Google تحت عنوان صفحتك في النتائج، ووسوم og: تصنع بطاقة المعاينة عند المشاركة في وسائل التواصل.
سطران لا تُنشأ صفحة بدونهما: charset="UTF-8" وviewport.
الصياغة
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="وصف الصفحة لمحركات البحث">
⚡ جرّب بنفسك
عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.
🎨 محرّر HTML/CSS
<p style="background:#ede9fe; padding:12px; border-radius:8px"> وسوم meta تعيش في <head> ولا تظهر للزائر — لكن بدون <code>charset="UTF-8"</code> كان هذا النص العربي سيظهر رموزًا مشوهة: العربية </p>
النتيجة المباشرة:
أهم الخصائص
| الخاصية | الوظيفة |
|---|---|
| charset="UTF-8" | ترميز المحرف — الضمانة الوحيدة لظهور العربية سليمة |
| name="viewport" | إعداد العرض على الجوال — شرط التصميم المتجاوب |
| name="description" | وصف SERP تحت عنوانك في Google (~150 حرفًا) |
| property="og:*" | بطاقات المشاركة: og:title وog:image وog:description |
💡 نصائح عملية
- description مقنع = نقرات أكثر بنفس الترتيب — اكتبه كإعلان صغير
- افحص بطاقات og بمعاينة المشاركة قبل النشر
⚠️ أخطاء شائعة
- نسيان charset فتظهر العربية Ø£ØÙ… — أشهر مشهد رعب للمبتدئ العربي
- keywords meta — ماتت منذ 2009، لا تضِع وقتك فيها
وسوم ذات صلة
🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.
📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs