شرح وسوم Meta وترميز الأحرف بالعربي — UTF-8 و SEO
حتى الآن، تعلمنا كيف نبني كل ما يراه الزائر على الصفحة. لكن هناك قسم كامل في كل صفحة HTML لا يراه أحد من الزوار — وهو داخل <head>. هذه المعلومات موجّهة للمتصفح ومحركات البحث، وتؤثر بشكل مباشر على كيفية ظهور موقعك في جوجل وعلى الهواتف.
هذا الدرس يشرح أهم هذه الإعدادات الخفية — وسوم <meta>.
ما هو وسم <meta>؟
وسم <meta> هو وسم خاص يستخدم داخل <head> فقط، ولا يُغلق (مثل <br> و <img>). مهمته الوحيدة: إخبار المتصفح ومحركات البحث بمعلومات عن الصفحة.
1. ترميز الأحرف — charset="UTF-8"
هذا أهم وسم meta على الإطلاق. يخبر المتصفح بـ "لغة" الملف — الطريقة التي حُفظت بها الحروف. إذا غاب هذا الوسم، قد تظهر الحروف العربية كـ "???□□□" أو رموز غريبة.
<!-- ✅ يجب أن يكون أول وسم داخل <head> -->
<meta charset="UTF-8">
UTF-8 هو ترميز عالمي يدعم كل لغات العالم في نفس الوقت: العربية، العبرية، الصينية، اليابانية، والإيموجي. لا تستخدم أي ترميز آخر — UTF-8 هو المعيار العالمي اليوم.
<meta charset="UTF-8"> دائماً كأول شيء داخل <head>، قبل حتى <title>. المتصفح يحتاج لمعرفة الترميز قبل أن يقرأ أي نص.
2. وسم Viewport — لجعل موقعك يعمل على الهواتف
قبل الهواتف الذكية، المواقع كانت تُصمَّم للشاشات الكبيرة فقط. عندما ظهرت الهواتف، كانت تعرض الصفحة مصغّرة جداً ليتسع كل شيء. وسم viewport يحل هذه المشكلة:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
هذا الوسم يقول للمتصفح:
width=device-width: اجعل عرض الصفحة مساوياً لعرض شاشة الجهاز (لا تصغّرها).initial-scale=1.0: لا تُكبّر ولا تُصغّر عند تحميل الصفحة أول مرة.
3. وسوم SEO — كيف تظهر في جوجل
عندما تبحث في جوجل، لكل نتيجة ثلاثة أجزاء:
- العنوان الأزرق — يأتي من وسم
<title> - الرابط الأخضر — عنوان URL
- النص الرمادي تحته — يأتي من
<meta name="description">
إليك الوسومان الأساسيان للـ SEO:
<!-- وصف الصفحة — يظهر تحت العنوان في جوجل -->
<meta name="description" content="تعلم HTML من الصفر بالعربي مع DevArabi — شرح مبسط وأمثلة عملية مجانية">
<!-- الكلمات المفتاحية (أهميتها قلّت لكنها لا تزال مستخدمة) -->
<meta name="keywords" content="تعلم HTML, كورس HTML بالعربي, HTML للمبتدئين">
وصف الصفحة مهم جداً — اجعله جذاباً لأن هو ما يُقرّر ما إذا كان الزائر سينقر على موقعك أم لا.
4. وسوم meta أخرى مفيدة
| الوسم | الاستخدام |
|---|---|
<meta name="author" content="اسمك"> |
تحديد اسم مؤلف/منشئ الصفحة |
<meta name="robots" content="index, follow"> |
يخبر جوجل بفهرسة الصفحة ومتابعة روابطها |
<meta name="robots" content="noindex"> |
يمنع جوجل من فهرسة الصفحة (للصفحات الخاصة) |
<meta http-equiv="refresh" content="30"> |
يُحدّث الصفحة تلقائياً كل 30 ثانية |
<meta property="og:title" content="..."> |
عنوان الصفحة عند مشاركتها في فيسبوك/واتساب |
صفحة HTML كاملة بكل وسوم meta الاحترافية
هكذا تبدو قسم <head> في موقع احترافي حقيقي:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<!-- 1. الترميز — أولاً دائماً -->
<meta charset="UTF-8">
<!-- 2. التوافق مع الهواتف -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 3. عنوان الصفحة (يظهر في تاب المتصفح وجوجل) -->
<title>تعلم HTML من الصفر — DevArabi</title>
<!-- 4. وصف الصفحة لجوجل -->
<meta name="description" content="تعلم HTML من الصفر بالعربي مع DevArabi. شرح مبسط وأمثلة عملية مجانية للمبتدئين.">
<!-- 5. الكلمات المفتاحية -->
<meta name="keywords" content="تعلم HTML, كورس HTML بالعربي, HTML للمبتدئين">
<!-- 6. المؤلف -->
<meta name="author" content="DevArabi">
<!-- 7. ملف CSS -->
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
...
</body>
</html>
الأسئلة الشائعة — FAQ
هل وسوم meta تؤثر فعلاً على ترتيبي في جوجل؟
charset وviewport وdescription تؤثر بشكل مباشر. أما keywords فجوجل أعلن رسمياً أنه لم يعد يأخذها بعين الاعتبار منذ سنوات — لكنها لا تضر. المحتوى الجيد وترتيب العناوين <h1>, <h2> أهم بكثير للـ SEO.
ما الفرق بين <title> و meta description؟
<title> هو العنوان الأزرار في نتائج جوجل والمكتوب في تاب المتصفح. meta description هو النص الوصفي تحته في جوجل. كلاهما مهم — <title> أهم للـ SEO، وdescription أهم لإقناع الزائر بالنقر.
كم يجب أن يكون طول description؟
جوجل يعرض عادةً ما بين 150 و160 حرفاً. اجعل وصفك في هذا النطاق — واضح، جذاب، ويحتوي على الكلمة المفتاحية الرئيسية في بدايته.