إزاي تضيف عنوان الموقع (Title) في ملف HTML بطريقة صحيحة؟
أهلاً وسهلاً بيكم يا شباب، ويا رب دايمًا تكونوا بخير وبصحة وسلامة.
في درس النهاردة هنبدأ أول تخصيص من تخصيصات عقل الصفحة أو ما يُعرف في HTML بعنصر الـ Head، وهنركز بالتحديد على أول وأهم عنصر فيه، وهو:
عنصر الـ <title>
وده عنصر أساسي ومطلوب في أي صفحة ويب، وأي موقع بتشوفه على الإنترنت لازم تلاقي فيه التايتل ده موجود.
فين بيظهر التايتل ده؟
العنوان ده بيظهر فوق في التبويب (Tab) الخاص بالمتصفح، يعني لما تفتح موقع على جوجل كروم أو أي متصفح، هتلاقي فوق اسم الموقع أو الصفحة ظاهر في التاب.
ولو بتستخدم موبايل، هتلاقيه برضه ظاهر فوق في التاب أو الشريط اللي فيه أسماء المواقع المفتوحة.
وده بيساعد الزائر يعرف هو فاتح أنهي صفحة، وبيسهّل عليه التبديل ما بين الصفحات.
ليه عنصر الـ <title> مهم؟
-
لأنه عنصر مطلوب في HTML، ولو مش موجود ممكن المتصفح أو محرك البحث يعتبر إن الصفحة فيها نقص.
-
محركات البحث (زي جوجل) بتستخدمه لتحديد عنوان صفحتك، وده اللي بيظهر للناس في نتائج البحث.
-
لما تختار عنوان دقيق ومميز، بتزود فرصة إن الموقع بتاعك يظهر في ترتيب أعلى في جوجل.
عشان كده لازم تختار عنوان واضح، ليه معنى، ومرتبط بمحتوى صفحتك.
إزاي نضيف عنصر الـ <title> في ملف
HTML؟
الخطوات سهلة جدًا:
-
أول حاجة، داخل وسم
<head>، هنضيف وسم<title>. -
بين وسم الفتح والإغلاق، هنكتب العنوان اللي إحنا عايزينه.
تعالى نشوف الكود:
<head>
<title>Generzen</title>
</head>في المثال ده، كتبنا "Generzen" كعنوان للموقع.
إزاي نتأكد إن التايتل اشتغل؟
بعد ما نكتب الكود ده ونحفظ الملف، نروح نعمل Reload أو تحديث للصفحة على المتصفح.
هتلاحظ فورًا إن اسم الصفحة اللي فوق في التاب بقى Generzen.
ولو فتحت نفس الصفحة من الموبايل، هتلاقي العنوان ظهر فوق في التبويب برضه، زي ما هو ظاهر على الكمبيوتر بالظبط.
نصيحة مهمة
اختار عنوان للصفحة يكون:
-
ليه علاقة بمحتوى الصفحة.
-
بسيط وسهل يتفهم.
-
مفيهوش رموز غريبة أو اختصارات ملهاش معنى.
العنوان ده مش بس للزائر، ده كمان مهم جدًا لمحركات البحث زي ما قلنا.
خلاصة الدرس
-
<title>هو العنصر اللي بيحدد عنوان صفحتك في التبويب. -
لازم تحطه جوه وسم
<head>. -
مهم لمحركات البحث ولمظهر الموقع عند الزائر.
-
اختار عنوان بسيط، واضح، ومرتبط بالمحتوى.
لو عندك أي سؤال أو استفسار بخصوص الدرس ده، اكتبه في تعليق تحت الفيديو، وأنا هرد عليك إن شاء الله في أسرع وقت.
شاهد فيديو
وشكرا علي القراءة والي اللقاء