وثائق HTML قابلة للتشغيل: وسم title

Q: كيف أغيّر عنوان الصفحة بـ JavaScript؟

أسند قيمة إلى document.title، مثل document.title = '(3) Inbox'. يحدّث المتصفح التبويب فورًا، وهكذا تعرض تطبيقات الويب عدد الرسائل غير المقروءة.

Q: هل وسم title هو نفسه السمة title؟

لا. العنصر يسمّي الصفحة كلها. أما السمة title التي تعمل على كل العناصر تقريبًا فتضيف تلميحًا يظهر عند مرور المؤشر فوق ذلك العنصر.

أين يوضع وسم title

كل صفحة تحتاج إلى عنصر <title> واحد داخل <head>. نصه هو اسم الصفحة الذي تعرضه المتصفحات في التبويب والمفضلة، والذي تعرضه محركات البحث عادةً كعنوان للنتيجة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chocolate Chip Cookies Recipe | Bake Club</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Chocolate chip cookies</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title is: ' + document.title;
  </script>
</body>
</html>

العنوان نفسه لا يظهر داخل الصفحة أبدًا. وهذه المعاينة تعمل داخل صفحة توثيق Coddy، لذلك يظل تبويب متصفحك يعرض عنوان التوثيق، أما السكربت الصغير فيطبع ما كان التبويب سيعرضه لو فتحت المثال كملف مستقل. عدّل النص في <title> وسيتحدّث السطر.

كتابة عنوان جيد

العنوان غالبًا أول ما يقرؤه الشخص عن صفحتك، في نتيجة بحث أو في صف من التبويبات. بضع قواعد تغطي معظم الصفحات:

كن محددًا وفريدًا. لكل صفحة في الموقع عنوانها الخاص الذي يصفها: «Chocolate Chip Cookies Recipe» لا «Home» أو «Page 1».
ضع الكلمات المهمة أولًا. التبويبات ضيقة ونتائج البحث تقص العناوين الطويلة. أبقِ العبارة الأساسية ضمن أول 50 إلى 60 محرفًا تقريبًا.
أضف اسم الموقع في النهاية، مفصولًا بـ | أو :، كي يبقى موضوع الصفحة أولًا.
اكتبه للناس. العنوان المحشو بكلمات مفتاحية مكررة يبدو كرسائل مزعجة، وقد تعيد محركات البحث كتابته.

هذا التبويب التجريبي يقص العنوان عند عرض تبويب حقيقي تقريبًا. جرّب عنوانًا أقصر أو أطول:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Bake Soft Chocolate Chip Cookies at Home | Bake Club</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab {
      width: 200px; background: #fff; border-radius: 8px 8px 0 0;
      padding: 8px 12px; font-size: 13px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="bar"><div class="tab" id="tab"></div></div>
  <p>Full title: <code id="full"></code> (<span id="len"></span> characters)</p>
  <script>
    document.getElementById('tab').textContent = document.title;
    document.getElementById('full').textContent = document.title;
    document.getElementById('len').textContent = document.title.length;
  </script>
</body>
</html>

مع اسم الموقع في الآخر، يبقى التبويب المقصوص يُظهر موضوع الصفحة. اعكس الترتيب («Bake Club | How to...») وسيبدأ كل تبويب من موقعك بالكلمتين نفسيهما.

الفرق بين وسم title وh1 والسمة title

	أين	أين يظهر	وظيفته
`<title>`	في `<head>`، مرة واحدة	التبويب، المفضلة، نتائج البحث	يسمّي الصفحة
`<h1>`	في `<body>`	على الصفحة	العنوان الرئيسي الظاهر
السمة `title="..."`	على أي عنصر	تلميح عند مرور المؤشر	معلومة إضافية عن ذلك العنصر

العنوان و<h1> يتطابقان عادةً في المعنى، لكن العنوان يمكن أن يُصاغ للبحث ويحمل اسم الموقع، بينما يمكن أن يكون العنوان الرئيسي أقصر. أما السمة title فلا علاقة لها بهما رغم الاسم. مرّر المؤشر فوق الكلمة التي تحتها خط:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title vs title attribute</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Welcome to Bake Club</h1>
  <p>We test every recipe in a
    <span title="An oven with a fan that moves hot air" style="text-decoration: underline dotted;">convection oven</span>.
  </p>
</body>
</html>

التلميحات الناتجة عن السمة title لا تظهر على الشاشات اللمسية ولا تقرؤها قارئات الشاشة بشكل موثوق، فلا تضع معلومات مهمة فيها وحدها.

العنوان لا يحتوي إلا على نص

يقرأ المتصفح كل ما بين <title> و</title> كنص عادي. الوسوم لا تُحلَّل، لكن المراجع المحرفية مثل & تُفك، وتتابع المسافات البيضاء يُدمج في مسافة واحدة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Salt &amp; Pepper   <b>Bold?</b></title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>document.title:</p>
  <pre id="out" style="background: #f3f4f6; padding: 8px;"></pre>
  <script>
    document.getElementById('out').textContent = document.title;
  </script>
</body>
</html>

النتيجة Salt & Pepper <b>Bold?</b>: الكيان أصبح &، والمسافات الثلاث أصبحت واحدة، ووسوم <b> بقيت محارف حرفية. لا يمكن التأكيد أو التنسيق داخل العنوان.

تغيير العنوان بـ JavaScript

document.title قابلة للقراءة والكتابة. تستخدمها تطبيقات الويب لعرض عدد الرسائل غير المقروءة أو الحالة الحالية في التبويب:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .tab { display: inline-block; background: #e5e7eb; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    button { font: inherit; margin-top: 10px; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="tab" id="tab">Inbox</div><br>
  <button id="add">New message</button>
  <button id="read">Mark all read</button>
  <script>
    let unread = 0;
    const show = () => {
      document.title = unread ? '(' + unread + ') Inbox' : 'Inbox';
      document.getElementById('tab').textContent = document.title;
    };
    document.getElementById('add').onclick = () => { unread++; show(); };
    document.getElementById('read').onclick = () => { unread = 0; show(); };
  </script>
</body>
</html>

في صفحة حقيقية يتغير تبويب المتصفح في اللحظة نفسها التي يتغير فيها التبويب التجريبي هنا. محركات البحث التي تشغّل JavaScript تستطيع رؤية العنوان الذي يضبطه السكربت، لكن العنوان المكتوب في HTML هو الخيار الموثوق لأي شيء يجب أن يُفهرس.

أخطاء شائعة

غياب العنوان تمامًا. يعود المتصفح إلى العنوان أو اسم الملف، وتصبح الصفحة HTML غير صالح. أضفه إلى كل صفحة، بجانب وسم meta viewport في قالبك.
العنوان نفسه في كل صفحة. يصبح التمييز بين التبويبات والمفضلة ونتائج البحث مستحيلًا.
وضع <title> في <body>. ما زالت المتصفحات تستخدمه، لكن مكانه <head>، وبعض الأدوات لن تجده.
عنصرا <title>. الأول وحده يُحتسب. احذف البقية.
بدء كل عنوان باسم الموقع. ابدأ بموضوع الصفحة، واسم الموقع يأتي في الآخر.

الأسئلة الشائعة

ما هو وسم title في HTML؟

<title> يحدد اسم الصفحة. تعرضه المتصفحات في التبويب وفي المفضلة، وتعرضه محركات البحث عادةً كعنوان النتيجة القابل للنقر. يوضع داخل <head> ولا يحتوي إلا على نص.

كم يجب أن يكون طول وسم title؟

تقص محركات البحث العناوين الطويلة بحسب عرض العرض، لذلك أبقِ الكلمات المهمة ضمن أول 50 إلى 60 محرفًا تقريبًا. لا يوجد حد صارم في HTML، لكن ما بعد تلك النقطة قد يختفي خلف علامة حذف.

ما الفرق بين وسم title وh1؟

<title> بيانات وصفية: يسمّي الصفحة في التبويبات ونتائج البحث ولا يظهر داخل الصفحة نفسها. أما <h1> فهو العنوان الرئيسي الظاهر في body. غالبًا ما يقولان أشياء متشابهة، لكن title يمكن أن يضيف اسم الموقع ويُصاغ لأغراض البحث.

هل يمكنني وضع وسوم HTML داخل وسم title؟

لا. عنصر title لا يحتوي إلا على نص. الوسوم بداخله تظهر حرفيًا، فـ <title>A <b>B</b></title> يعطي تبويبًا نصه "A <b>B</b>". أما المراجع المحرفية مثل & فتعمل.

كيف أغيّر عنوان الصفحة بـ JavaScript؟

أسند قيمة إلى document.title، مثل document.title = '(3) Inbox'. يحدّث المتصفح التبويب فورًا، وهكذا تعرض تطبيقات الويب عدد الرسائل غير المقروءة.

هل وسم title هو نفسه السمة title؟

لا. العنصر <title> يسمّي الصفحة كلها. أما السمة title التي تعمل على كل العناصر تقريبًا فتضيف تلميحًا يظهر عند مرور المؤشر فوق ذلك العنصر.

مفاهيم ذات صلة