28 – الميتا تاج (Meta Tags) المستوى الثاني متوسط
📌 10. الميتا تاج (Meta Tags)
الميتا تاجز Meta Tags عناصر بنكتبها داخل وسم <head> عشان نضيف معلومات وصفية (Metadata) عن الصفحة.
هي مش بتظهر مباشرة للزائر، لكن بيستخدمها:
-
المتصفح (لتحديد الترميز والعرض).
-
محركات البحث (SEO).
-
السوشيال ميديا (عرض معاينات).
🔹 1. ترميز اللغة (Character Encoding)
-
الهدف: تحديد ترميز الأحرف عشان يظهر النص بشكل صحيح.
-
أشهر ترميز هو UTF-8 لأنه بيدعم العربية والإنجليزية وكل اللغات.
✅ مثال:
🔎 النتيجة: يضمن إن النصوص العربية تظهر بدون مشاكل (بدل الرموز الغريبة �).
🔹 2. وصف الصفحة (Description) – مهم جدًا لـ SEO
-
الهدف: إعطاء محركات البحث وصف قصير للصفحة.
-
بيظهر غالبًا تحت عنوان الصفحة في نتائج Google.
-
الطول المفضل: حوالي 150–160 حرف.
✅ مثال:
🔎 النتيجة: جوجل يستخدم النص ده كملخص للصفحة.
🔹 3. الكلمات المفتاحية (Keywords)
-
زمان كانت مهمة جدًا في SEO.
-
دلوقتي محركات البحث (خاصة Google) ما بقتش تعتمد عليها بشكل كبير بسبب كثرة سوء استخدامها.
-
ممكن تستخدمها لكن مش أساسي.
✅ مثال:
🔹 4. التحكم في عرض الصفحة للجوال (Viewport)
-
الهدف: جعل الموقع متجاوب (Responsive) مع الهواتف والشاشات الصغيرة.
-
بدونها الصفحة ممكن تظهر مكبرة أو غير مناسبة على الموبايل.
✅ مثال:
🔎 شرح الخصائص:
-
width=device-width → عرض الصفحة يساوي عرض الجهاز.
-
initial-scale=1.0 → التكبير الافتراضي يكون 100%.
🔹 5. ميتا تاجز إضافية مفيدة
تحديد مؤلف الصفحة:
🔎 النتيجة: تحديث الصفحة كل 30 ثانية.
تحديد اللغة لمحركات البحث:
🔹 مثال عملي كامل
🔹 ملخص
-
<meta charset=”UTF-8″> → مهم للغات (العربية + غيرها).
-
<meta name=”description” …> → وصف الصفحة لمحركات البحث.
-
<meta name=”keywords” …> → كلمات مفتاحية (أقل أهمية حاليًا).
-
<meta name=”viewport” …> → ضروري للموبايل والصفحات المتجاوبة.
-
في العادة نكتب الميتا تاجز كلها داخل <head>.
Call now
Contact WhatsApp
