وسوم Meta الأساسية (charset, viewport, description)

meta charset htmlviewport htmlmeta description htmlseo meta tagshtml meta elements

الشرح

أهم ثلاث meta:

1. charset (ترميز الأحرف): <meta charset="UTF-8"> • أول شيء في head دائماً • UTF-8 يدعم كل اللغات (العربية، الصينية، الرموز...) • بدونه قد تظهر النصوص مشوّهة

2. viewport (للموبايل): <meta name="viewport" content="width=device-width, initial-scale=1.0"> • إلزامي لأي موقع متجاوب • يخبر المتصفح بعرض الصفحة الصحيح على الشاشات الصغيرة • بدونه الموقع يظهر مصغّراً على الموبايل

3. description (وصف الصفحة): <meta name="description" content="..."> • يظهر كـ snippet في نتائج البحث • الطول الأمثل: 120-160 حرف • يحفّز المستخدمين على الضغط (CTR) • فريد لكل صفحة',

الصياغة (Syntax)

syntax

1	<head>
2	<!-- 1. ترميز الأحرف - أول عنصر دائماً -->
3	<meta charset="UTF-8">
4
5	<!-- 2. Viewport - للموبايل -->
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8	<!-- 3. وصف الصفحة للـ SEO -->
9	<meta name="description" content="تعلم HTML5 بالعربي من الصفر — شرح كامل لكل الوسوم والخصائص مع أمثلة عملية. كورس مجاني يناسب المبتدئين والمحترفين.">
10
11	<!-- معلومات إضافية -->
12	<meta name="author" content="نوفيل">
13	<meta name="robots" content="index, follow">
14
15	<!-- للمتصفحات القديمة (IE) -->
16	<meta http-equiv="X-UA-Compatible" content="IE=edge">
17
18	<!-- تحديث تلقائي (تجنّبه) -->
19	<!-- <meta http-equiv="refresh" content="30"> -->
20	</head>

أمثلة عملية

مثال 1: head أساسي لكل صفحة

head أساسي لكل صفحة

1	<head>
2	<!-- الترميز: أول شيء دائماً -->
3	<meta charset="UTF-8">
4
5	<!-- Viewport: ضروري للموبايل -->
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8	<!-- مهم للـ SEO -->
9	<meta name="description" content="
10	منصة نوفيل لتعلم البرمجة بالعربي — كورسات HTML وCSS
11	وJavaScript وPython مع شهادات معتمدة. ابدأ مجاناً اليوم!
12	">
13
14	<!-- معلومات الصفحة -->
15	<meta name="author" content="فريق نوفيل">
16
17	<!-- التحكم في الروبوتات -->
18	<meta name="robots" content="index, follow, max-image-preview:large">
19
20	<!-- العنوان -->
21	<title>تعلم HTML بالعربي — نوفيل</title>
22	</head>

نصائح احترافية

—description لا يؤثر مباشرةً على ترتيب الصفحة لكن يؤثر على CTR (نسبة النقر). جوجل يختار أحياناً نصاً من الصفحة بدلاً من description — اجعل المحتوى نفسه وصفياً وغنياً بالكلمات المفتاحية.

الدرس السابق

التنسيق المضمّن (style)

الدرس التالي

وسوم Meta المتقدمة — Open Graph وTwitter Cards

وسوم Meta الأساسية (charset, viewport, description)

meta charset htmlviewport htmlmeta description htmlseo meta tagshtml meta elements

الشرح

أهم ثلاث meta:

الصياغة (Syntax)

syntax

1	<head>
2	<!-- 1. ترميز الأحرف - أول عنصر دائماً -->
3	<meta charset="UTF-8">
4
5	<!-- 2. Viewport - للموبايل -->
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8	<!-- 3. وصف الصفحة للـ SEO -->
9	<meta name="description" content="تعلم HTML5 بالعربي من الصفر — شرح كامل لكل الوسوم والخصائص مع أمثلة عملية. كورس مجاني يناسب المبتدئين والمحترفين.">
10
11	<!-- معلومات إضافية -->
12	<meta name="author" content="نوفيل">
13	<meta name="robots" content="index, follow">
14
15	<!-- للمتصفحات القديمة (IE) -->
16	<meta http-equiv="X-UA-Compatible" content="IE=edge">
17
18	<!-- تحديث تلقائي (تجنّبه) -->
19	<!-- <meta http-equiv="refresh" content="30"> -->
20	</head>

أمثلة عملية

مثال 1: head أساسي لكل صفحة

head أساسي لكل صفحة

1	<head>
2	<!-- الترميز: أول شيء دائماً -->
3	<meta charset="UTF-8">
4
5	<!-- Viewport: ضروري للموبايل -->
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8	<!-- مهم للـ SEO -->
9	<meta name="description" content="
10	منصة نوفيل لتعلم البرمجة بالعربي — كورسات HTML وCSS
11	وJavaScript وPython مع شهادات معتمدة. ابدأ مجاناً اليوم!
12	">
13
14	<!-- معلومات الصفحة -->
15	<meta name="author" content="فريق نوفيل">
16
17	<!-- التحكم في الروبوتات -->
18	<meta name="robots" content="index, follow, max-image-preview:large">
19
20	<!-- العنوان -->
21	<title>تعلم HTML بالعربي — نوفيل</title>
22	</head>

نصائح احترافية

—description لا يؤثر مباشرةً على ترتيب الصفحة لكن يؤثر على CTR (نسبة النقر). جوجل يختار أحياناً نصاً من الصفحة بدلاً من description — اجعل المحتوى نفسه وصفياً وغنياً بالكلمات المفتاحية.

الدرس السابق

التنسيق المضمّن (style)

الدرس التالي

وسوم Meta المتقدمة — Open Graph وTwitter Cards