← القائمة
LESSON 07 · SEO FOR HTML

SEO في HTML
كيف تجعل موقعك يتصدر نتائج البحث؟

تعلّم كيف تكتب HTML يفهمه المتصفح ومحركات البحث — كل tag صحيح يعني زوار أكثر مجاناً.

المفهوم الأساسي

🔍 ما هو SEO ولماذا يبدأ من HTML؟

SEO اختصار لـ Search Engine Optimization — تهيئة الموقع لمحركات البحث. الهدف: أن يظهر موقعك في أعلى نتائج Google عندما يبحث شخص عن ما تقدمه.

كيف يعمل Google تحديداً؟
1️⃣ Crawling: روبوتات Google تجول صفحات الإنترنت وتقرأ HTML
2️⃣ Indexing: تُخزّن فهرساً بكل ما وجدته
3️⃣ Ranking: تُرتّب الصفحات حسب الجودة والصلة بالبحث
كلما كان HTML صحيحاً ودلالياً، كلما فهم Google موقعك أفضل → ترتيب أعلى.

ماذا يبدو موقعك على Google؟

https://phinex-academy.com › courses › html
تعلّم HTML من الصفر | PhineX Academy — دورة مجانية شاملة
12 ديسمبر 2025 —
دورة HTML المجانية من PhineX Academy. تعلّم بناء صفحات الويب خطوة بخطوة مع شرح كل عنصر وكود. مناسبة للمبتدئين تماماً. ابدأ الآن مجاناً.

هذا المربع يُبنى من ثلاثة أشياء في HTML: الـ title، الـ meta description، والـ URL. ستتعلمها جميعاً هنا.

القسم الأول

🧠 Tags الـ head الأساسية للـ SEO

seo-head.html — كل سطر ومعناه
1
<head>
كل ما يلي خفي — للمتصفح ومحركات البحث
2
 
3
<!── 1. ترميز الأحرف ──>
الأول دائماً
4
<meta charset="UTF-8">
دعم كل اللغات — إلزامي ويجب أن يكون أول شيء
5
 
6
<!── 2. التوافق مع الموبايل ──>
Google يعاقب المواقع غير المتجاوبة
7
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width: عرض الصفحة = عرض الشاشة
8
 
9
<!── 3. عنوان الصفحة (أهم عنصر SEO) ──>
يظهر في نتائج البحث والتبويب
10
<title>تعلّم HTML | PhineX Academy — دورة مجانية</title>
50-60 حرف مثالي. كلمة مفتاحية + اسم الموقع
11
 
12
<!── 4. وصف الصفحة (Meta Description) ──>
النص تحت العنوان في نتائج البحث
13
<meta
14
name="description"
name="description" يعرّف هذا الـ meta لمحركات البحث
15
content="تعلّم بناء صفحات الويب باحترافية مع PhineX Academy. دورة HTML شاملة ومجانية تغطي كل المفاهيم من الصفر.">
120-160 حرف. جملة مغرية تشجع على النقر
16
 
17
<!── 5. الكلمات المفتاحية (أقل أهمية اليوم) ──>
Google لا يستخدمها كثيراً لكنها لا تضر
18
<meta name="keywords" content="تعلم HTML, دورة ويب, PhineX Academy">
مفصولة بفاصلة — Bing يستخدمها
19
 
20
<!── 6. اللغة للمتصفح ──>
يخبر Google بلغة المحتوى
21
<meta name="language" content="Arabic">
يعزز الظهور في بحث اللغة العربية
22
 
23
<!── 7. أيقونة الموقع (Favicon) ──>
الأيقونة الصغيرة في التبويب
24
<link rel="icon" type="image/png" href="favicon.png">
تظهر في التبويب والـ Bookmarks — مهمة للهوية
25
 
26
<!── 8. Canonical URL — منع تكرار المحتوى ──>
مهم جداً عند وجود صفحات متشابهة
27
<link rel="canonical" href="https://phinex.com/courses/html">
يخبر Google: هذه هي الصفحة الأصلية — لا تعاقبنا على التكرار
28
 
29
<!── 9. تعليمات الروبوتات ──>
للتحكم في الفهرسة
30
<meta name="robots" content="index, follow">
index=فهرس هذه الصفحة، follow=تتبع روابطها
31
<!-- noindex, nofollow = لا تفهرس ولا تتبع -->
لصفحات تسجيل الدخول والسياسات الخاصة
32
</head>
القسم الثاني

📱 Open Graph — بطاقات المشاركة الاجتماعية

عندما تشارك رابطاً على WhatsApp أو Twitter أو Facebook، تظهر بطاقة جميلة بصورة وعنوان ووصف. هذه البطاقة تُبنى من Open Graph tags في HTML.

open-graph.html
1
<!── Open Graph للمشاركة على وسائل التواصل ──>
توضع في head
2
<meta property="og:title" content="تعلّم HTML مع PhineX Academy">
property=og:title — عنوان البطاقة عند المشاركة
3
<meta property="og:description" content="دورة HTML شاملة ومجانية — ابدأ رحلتك في الويب اليوم">
وصف يظهر أسفل العنوان في البطاقة
4
<meta property="og:image" content="https://phinex.com/og-image.jpg">
الصورة الكبيرة في البطاقة — 1200×630 px مثالي
5
<meta property="og:url" content="https://phinex.com/courses/html">
الرابط الرسمي للصفحة
6
<meta property="og:type" content="website">
النوع: website / article / video / product
7
<meta property="og:site_name" content="PhineX Academy">
اسم الموقع — يظهر في بعض منصات التواصل
8
<meta property="og:locale" content="ar_AR">
لغة المحتوى: ar_AR للعربية
9
 
10
<!── Twitter Card ──>
خاص بـ Twitter/X
11
<meta name="twitter:card" content="summary_large_image">
summary_large_image = بطاقة كبيرة بصورة
12
<meta name="twitter:title" content="تعلّم HTML | PhineX Academy">
عنوان البطاقة على Twitter
13
<meta name="twitter:image" content="https://phinex.com/twitter-img.jpg">
الصورة الخاصة بـ Twitter — يمكن أن تختلف عن og:image
✅ اختبر بطاقة مشاركتك: بعد نشر موقعك، استخدم Facebook Sharing Debugger أو Twitter Card Validator للتحقق من شكل البطاقة قبل المشاركة.
القسم الثالث

🏛️ HTML الدلالي — أساس SEO الحقيقي

استخدام Tags الدلالية الصحيحة يساعد Google على فهم هيكل صفحتك ومحتواها — وهذا يعني ترتيباً أفضل.

semantic-seo.html — هيكل صحيح لـ SEO
1
<body>
2
 
3
<header>
رأس الصفحة — Google يفهم أنه التنقل والهوية
4
<!── h1 واحد فقط — الكلمة المفتاحية الرئيسية ──>
5
<h1>تعلّم HTML من الصفر حتى الاحتراف</h1>
h1 = الكلمة المفتاحية الرئيسية. مرة واحدة فقط!
6
<nav aria-label="القائمة الرئيسية">
aria-label يوضح الغرض لمحركات البحث
7
<ul>
قائمة التنقل كـ ul — الأفضل لـ SEO
8
<li><a href="/html">HTML</a></li>
روابط التنقل مهمة لـ SEO
9
<li><a href="/css">CSS</a></li>
10
</ul>
11
</nav>
12
</header>
13
 
14
<main>
main = المحتوى الأساسي — Google يعطيه أولوية
15
<article>
article = محتوى مستقل يمكن نشره وحده
16
<h2>ما هي HTML؟</h2>
h2 = عنوان قسم — الكلمة المفتاحية الثانوية
17
<p>HTML هي لغة بناء صفحات الويب...</p>
محتوى الفقرة — يجب أن يحتوي الكلمات المفتاحية
18
<h3>عناصر HTML الأساسية</h3>
h3 تفصيل أعمق — هيكل هرمي صحيح
19
</article>
20
 
21
<!── الصور مع alt تحتوي الكلمة المفتاحية ──>
Google يقرأ alt
22
<img src="html-tutorial.jpg" alt="دروس HTML للمبتدئين — PhineX Academy" loading="lazy">
alt تحتوي الكلمة المفتاحية + loading=lazy لسرعة التحميل
23
</main>
24
 
25
<footer>
footer يحتوي روابط وإشارات الحقوق
26
<p>© 2025 PhineX Academy. جميع الحقوق محفوظة.</p>
حقوق النشر — إشارة ثقة لمحركات البحث
27
</footer>
28
</body>
القسم الرابع

⚡ سرعة التحميل = SEO مباشر

Google يضع سرعة الصفحة ضمن عوامل الترتيب. كل ثانية تحميل إضافية تفقدك 7% من الزوار.

performance.html — تحسين السرعة في HTML
1
<!── تحميل CSS قبل الـ body (في head) ──>
CSS يجب أن يكون في head دائماً
2
<link rel="stylesheet" href="styles.css">
يمنع وميض المحتوى غير المنسق
3
 
4
<!── تحميل JS في آخر الـ body ──>
أو defer في head
5
<script src="app.js" defer></script>
defer = حمّل JS لكن نفّذه بعد تحميل HTML
6
<script src="analytics.js" async></script>
async = حمّل ونفّذ فوراً بدون انتظار HTML
7
 
8
<!── صور بـ lazy loading ──>
يؤجل تحميل الصور البعيدة
9
<img src="hero.jpg" alt="..." loading="eager">
eager = حمّل فوراً (للصور المرئية عند الفتح)
10
<img src="gallery.jpg" alt="..." loading="lazy">
lazy = لا تحمّل حتى يقترب المستخدم منها
11
 
12
<!── تلميح للمتصفح بتحميل الموارد مسبقاً ──>
Resource Hints
13
<link rel="preload" href="hero-font.woff2" as="font" crossorigin>
preload = حمّل هذا المورد بأولوية عالية
14
<link rel="preconnect" href="https://fonts.googleapis.com">
افتح اتصالاً مع هذا الدومين مسبقاً
defer مقابل async:
defer → ينفّذ الـ JS بعد انتهاء تحليل HTML، بترتيب الملفات — الأفضل للـ scripts التي تتفاعل مع DOM.
async → يحمّل بالتوازي وينفّذ فوراً — الأفضل للـ scripts المستقلة مثل Analytics وChat widgets.
القسم الخامس

✅ قائمة تدقيق SEO — افحص موقعك

قبل نشر أي صفحة، تحقق من هذه النقاط:

✅ أدوات مجانية للتحقق:
Google Search Console — مجاني ورسمي من Google
PageSpeed Insights — يقيس سرعة صفحتك ويعطيك توصيات
Ahrefs Free Tools — تحليل الروابط والكلمات المفتاحية

🧠 اختبار SEO

5 أسئلة تختبر فهمك لتهيئة محركات البحث

س1: ما الطول المثالي لعنوان الصفحة (<title>) في نتائج البحث؟

س2: ما وظيفة loading="lazy" على الصور؟

س3: ما الفرق بين defer و async في تحميل JS؟

س4: ما وظيفة Open Graph tags في HTML؟

س5: لماذا يجب أن يكون هناك <h1> واحد فقط في الصفحة؟