العنصر title ودوره في SEO
كتابة عناوين فعالة للصفحات تحظى بترتيب جيد في محركات البحث
العنصر title ودوره في SEO درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
عنصر title
يحدد العنصر <title> عنوان المستند، وهو أحد أهم أجزاء HTML:
- يظهر في علامة تبويب المتصفح
- يظهر في نتائج محركات البحث (SERP)
- يُستخدم اسمًا افتراضيًا للإشارة المرجعية
- تقرأه قارئات الشاشة بصوت عالٍ عند تحميل الصفحة
موضع title
ينتمي عنصر title إلى <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn HTML5 — CoddyKit</title>
</head>
<body>...</body>
</html>أفضل ممارسات SEO لعنصر title
كتابة عناوين فعالة لتحسين SEO:
- أبقِ العنوان أقل من 60 حرفًا (يقتطع Google العناوين الأطول)
- ضمّن الكلمة المفتاحية الأساسية بالقرب من البداية
- ضمّن اسم الموقع (عادةً في النهاية)
- اجعل العنوان فريدًا لكل صفحة في الموقع
- اجعله وصفيًا وجذابًا — فهو أول ما يقرؤه الباحثون
نمط العنوان: الصفحة — الموقع
أنماط العناوين الشائعة:
<!-- Page name first, site name last -->
<title>HTML Forms — CoddyKit</title>
<title>Contact Us — My Company</title>
<title>Search Results for "html" — CoddyKit</title>
<!-- For the homepage: site name first -->
<title>CoddyKit — Learn to Code</title>
<!-- Avoid: -->
<title>Untitled Document</title> <!-- terrible -->
<title>Page 1</title> <!-- not descriptive -->العناوين الديناميكية في SPA
يجب على تطبيقات الصفحة الواحدة تحديث العنوان عند التنقل:
// React / Next.js:
// <title> is set in document.head or via framework
// Vanilla JavaScript:
function navigateTo(page) {
const titles = {
home: 'Home — MyApp',
about: 'About Us — MyApp',
blog: 'Blog — MyApp',
};
document.title = titles[page] || 'MyApp';
history.pushState({}, '', '/' + page);
}title وOpen Graph
يُستكمل عنصر title باستخدام Open Graph للمشاركة على وسائل التواصل الاجتماعي:
<head>
<title>HTML5 Semantic Elements Guide — CoddyKit</title>
<!-- Override title for social sharing: -->
<meta property="og:title" content="Master HTML5 Semantic Elements">
</head>
<!-- If og:title is absent, social networks may fall back to <title> -->اختبار طول title
كيفية التحقق من طول title في DevTools:
- افتح Chrome DevTools ← لوحة Elements
- ابحث عن
<head>←<title> - احسب الأحرف، بما في ذلك المسافات
- أو استخدم: تدقيق Lighthouse ← SEO ← Document has a title
اسم Schema.org مقابل title
عنوان الصفحة مقابل اسم Schema.org:
<!-- HTML title: shown in tabs and search results -->
<title>Widget Pro Review — Best Widgets 2025</title>
<!-- Schema.org: machine-readable name for structured data -->
<script type="application/ld+json">
{
"@type": "Product",
"name": "Widget Pro"
}
</script>إتاحة الوصول إلى title
العنوان هو أول ما يسمعه مستخدمو قارئات الشاشة عند فتح صفحة جديدة:
- احرص دائمًا على وجود عنوان ذي معنى
- بالنسبة إلى صفحات النوافذ أو مربعات الحوار أو SPA: حدّث العنوان لوصف الحالة الحالية
- تقرأ قارئات الشاشة العنوان عند تحميل الصفحة وعند كل تغيير للمسار
- اكتب عناوين منطقية عند قراءتها من دون سياق الصفحة
العناوين متعددة اللغات
في المواقع متعددة اللغات، اضبط العناوين وفق لغة الصفحة:
<!-- French page: -->
<html lang="fr">
<head>
<title>Apprendre HTML5 — CoddyKit</title>
</head>
<!-- Hreflang tells Google about language variants: -->
<link rel="alternate" hreflang="en" href="https://example.com/en">
<link rel="alternate" hreflang="fr" href="https://example.com/fr">title في Iframes
عند تحميل صفحة داخل iframe، يكون عنوان iframe مهمًا:
<!-- The iframe should have a descriptive title attribute: -->
<iframe src="/map" title="Interactive store locator map"></iframe>
<!-- The page inside the iframe also has its own <title> element -->
<!-- Screen readers read the iframe's title attribute, not the inner title -->قياس تأثير title في SEO
أدوات التحقق من تحسين title:
- Lighthouse ← تدقيق SEO
- Google Search Console ← Performance (لعرض عناوين البحث الفعلية)
- SEMrush / Ahrefs ← التحقق من معاينة مقتطف SERP
- إضافة Chrome: MozBar، SEO Meta in 1 Click
تحقق سريع
ما الحد الأقصى الموصى به لعدد أحرف عنوان صفحة HTML؟
مراجعة: title وSEO
أساسيات title:
- داخل
<head>؛ فريد لكل صفحة؛ ومطلوب - أقل من 60 حرفًا؛ الكلمة المفتاحية بالقرب من البداية؛ واسم الموقع في النهاية
- يُحدّث في SPA عند كل عملية تنقل
- يُستكمل بـ og:title للمشاركة على وسائل التواصل الاجتماعي
- تعلن قارئات الشاشة العنوان عند تحميل الصفحة
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 40
- الدروس
- 159
الأسئلة الشائعة
هل درس «العنصر title ودوره في SEO» مجاني؟
نعم — نص درس «العنصر title ودوره في SEO» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «العنصر title ودوره في SEO»؟
كتابة عناوين فعالة للصفحات تحظى بترتيب جيد في محركات البحث تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «العنصر title ودوره في SEO»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- العنصر title ودوره في SEO
- meta charset وviewport وauthor وdescription
- عناوين URL الأساسية وmeta robots
- Favicon وApple Touch Icon