عنوان صفحة HTML
الإيموجي يعيش في تدفق نص الصفحة. عنوان الصفحة يؤدي وظيفة مختلفة: يسمّي المستند كاملًا لواجهة المتصفح ولأنظمة الاكتشاف. يراه المستخدمون في التبويب، وفي السجل، وعند إضافة إشارة مرجعية. ومحركات البحث غالبًا تستخدمه كدليل قوي لنص رابط النتيجة. مواقع التعلّم ووثائق المنتجات يجب أن تتقن هذا مبكرًا لأن عنوانًا ضعيفًا يضيّع الانتباه قبل أن يقرأ أحد الفقرة الأولى.
ما هو عنصر title
عنصر title في HTML ينتمي إلى head المستند. محتواه النصي بيانات وصفية للصفحة ككل. وهو ليس عنوانًا منسّقًا يظهر في body. ما زلت تحتاج h1 (وعناوين أخرى) للمخطط الظاهر الذي يمسحه القرّاء على الصفحة نفسها.
إجابة مباشرة
ضع <title>...</title> واحدًا بالضبط داخل <head>. اكتب نصًا قصيرًا ومحددًا وقابلًا للقراءة البشرية — مثل City Guide — Home أو HTML Page Title — وليس Untitled، ولا اسم ملف خامًا، ولا كومة كلمات مفتاحية لا يريدها أحد على تبويب. العنوان لا يستبدل h1 الظاهر. غالبًا يتشاركان موضوعًا؛ لكنهما يبقيان عنصرين مختلفين بوظيفتين مختلفتين.
أين يعيش في المستند
صفحة بسيطة تُظهر العلاقة بوضوح: DOCTYPE، وhtml، وhead مع title، ثم body بعنوان ظاهر ومحتوى.
العنوان في الـ head
html<!DOCTYPE html>
<html>
<head>
<title>City Guide — Home</title>
</head>
<body>
<h1>Welcome to the City Guide</h1>
<p>The h1 is visible on the page; the title labels the browser tab.</p>
</body>
</html>قراءة المثال
<title>City Guide — Home</title>يقع داخلhead- يجب أن يُظهر تبويب المتصفح ذلك التسمية (الواجهة الدقيقة تختلف قليلًا حسب المتصفح)
<h1>Welcome to the City Guide</h1>هو ما يراه القرّاء في جسم الصفحة- وسوم الإغلاق والتداخل تبقى HTML عادية — لا صيغة خاصة للعنوان سوى العنصر نفسه
title مقابل h1 بنظرة سريعة
📊 title مقابل h1
| الموضوع | title | h1 |
|---|---|---|
| مكانه في المستند | داخل head | داخل body |
| يراه المستخدم كـ | تبويب / إشارة مرجعية / كثير من عناوين النتائج | العنوان الرئيسي الظاهر في الصفحة |
| دور SEO | إشارة قوية لتسمية المستند | يساعد مخطط الصفحة والصلة بالموضوع |
| كم عددًا | واحد لكل مستند | عادةً h1 رئيسي واحد (عناوين أكثر كـ h2+) |
| هل يستبدل الآخر؟ | لا | لا |
لماذا يهم عنوان جيد
التبويبات تمتلئ بسرعة عندما يتعلّم الناس مع صفحات كثيرة مفتوحة. عنوان دقيق يساعدهم على العودة إلى الدرس الصحيح. الإشارات المرجعية ترث نفس النص. قوائم البحث غالبًا تعرض العنوان كعنوان قابل للنقر. عناوين غامضة مثل Document أو Page 2 تجبر المستخدم على فتح التبويب فقط ليتذكّر ما كان.
كتابة نص عنوان واضح
اهدف إلى عبارة يتعرّف عليها إنسان في شريط تبويبات مزدحم. أدرج الموضوع، وعند الحاجة سياق الموقع أو الدرس. اجعله قابلًا للقراءة بصوت عالٍ. تجنّب حشو كل مرادف في سلسلة واحدة. فضّل HTML Lists — Practice على lists ul ol html tutorial best seo lists lists.
عنوان واضح مقابل عنوان ضعيف
html<!-- Prefer -->
<title>HTML Lists — Practice</title>
<!-- Avoid -->
<title>Untitled</title>
<title>aaaaaaaa</title>
<title>lists lists lists seo seo seo</title>أنماط تنجح للمبتدئين
- الموضوع أولًا، ثم سياق قصير:
Forms — Contact page - اسم الدورة أو العلامة بعد شرطة طويلة عندما تتشابه المواضيع بين مواقع عدة
- طابق وعد الصفحة: إن كان الدرس عن العناوين، فقل ذلك
- حدّث العنوان عندما تنسخ ملفًا كدرس جديد — لا تُبقِ تسمية الأمس
عنصر title واحد لكل صفحة
مستندات HTML يُفترض أن تحتوي على title واحد في head. عناصر title متعددة تُربك الأدوات ولا تنشئ تبويبًا متعدد الأسطر مفيدًا. إذا أخرج قالبٌ بالخطأ عنوانين، أصلح القالب بدل «إضافة المزيد من التسميات.»
العنوان وSEO بلا أساطير
عنوان واضح يساعد محركات البحث على فهم الصفحة ويساعد البشر على النقر على النتيجة الصحيحة. وهو ليس رمز غش سحريًا للترتيب. حشو الكلمات المفتاحية الذي يفسد تجربة التبويب غالبًا يضر أكثر مما ينفع. اكتب أولًا للشخص الذي يمسح التبويبات والنتائج؛ فائدة البحث تتبع التسمية الصادقة.
تمرّن في المحرر
- أنشئ صفحة HTML بسيطة بـ
headوbody. - عيّن
<title>بعبارة واضحة عن صفحة التمرين. - أضف
h1يشارك الموضوع لكن بصياغة مختلفة. - افتح الملف واقرأ نص تبويب المتصفح.
- غيّر العنوان فقط، احفظ، حدّث — تأكد أن التبويب يتحدّث بينما يبقى
h1كما هو. - أعد كتابة عنوان ضعيف (
Untitled) إلى عنوان محدد وقارن شعور التبويب.
أخطاء سهلة
- وضع
titleفيbodyبدلhead - ترك
Untitled documentأو اسم ملف مؤقت إلى الأبد - توقّع أن يعرض
titleكعنوان كبير ظاهر في الصفحة (ذلك دورh1) - حشو العنوان بكلمات مفتاحية متكررة حتى يصبح غير مقروء كتسمية تبويب
- نسخ نفس العنوان عبر دروس مختلفة كثيرة حتى تبدو كل التبويبات متطابقة
- استخدام إيموجي فقط أو علامات ترقيم فقط كعنوان كامل
ملخص
titleينتمي إلىheadويسمّي المستند كاملًا- يلتقيه المستخدمون في التبويبات والإشارات وكثيرًا في نتائج البحث
h1هو العنوان الظاهر الرئيسي فيbody— موضوع مرتبط، وظيفة مختلفة- اكتب عنوانًا واحدًا واضحًا ومحددًا لكل صفحة
- فضّل التسميات القابلة للقراءة البشرية على
Untitledأو أكوام الكلمات المفتاحية
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى