شرح ترويسة head

ترويسة "head" هي عبارة عن عنصر HTML يتم استخدامه في بداية صفحة ويتضمن عددًا من العناصر المهمة التي تحدد محتوى الصفحة وترتبط بالعديد من الأمور الأساسية المتعلقة بالتنسيق والتصميم وتحسين محركات البحث.
إليك بعض العناصر التي يمكن تضمينها في ترويسة "head" مع الأمثلة:

1) العنوان: تُستخدم عناصر العنوان title لتحديد عنوان الصفحة وظهوره في شريط عنوان المستعرض. يجب أن يحتوي على وصف مختصر ودقيق لمحتوى الصفحة وأن يحتوي على الكلمات الرئيسية المهمة لتحسين محركات البحث.
مثال:

HTML


<head>
    <title>عنوان الصفحة</title>
</head>

2) رابط الأيقونة: تُستخدم روابط الأيقونات favicon لتحديد الصورة الصغيرة التي تظهر عادةً في علامة التبويب الخاصة بالصفحة وفي شريط عنوان المستعرض.
مثال:

HTML


<head>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

3) الوصف : يستخدم وصف الصفحة meta description لتحديد وصف قصير لمحتوى الصفحة ويتم استخدامه في نتائج محركات البحث. يجب أن يكون وصف الصفحة واضحًا ومختصرًا ويحتوي على الكلمات الرئيسية المهمة.
مثال:

HTML


<head>
    <meta name="description" content="وصف مختصر لمحتوى الصفحة">
</head>

4) التنسيقات والأنماط: يمكن تضمين أكواد CSS و JS في ترويسة "head" لتنسيق وتصميم الموقع وإضافة المزيد من الوظائف الديناميكية.
مثال:

HTML


<head>
    <link rel="stylesheet" href="styles.css">
    <script src="main.js"></script>
</head>

5) كلمات البحث: تستخدم عناصر الكلمات الرئيسية meta keywords لتحديد الكلمات الرئيسية المتعلقة بمحتوى الصفحة والتي يمكن استخدامها لتحسين محركات البحث. ومع ذلك، فإن هذه الميزة قد تكون أقل أهمية الآن لأن محركات البحث تستخدم الآن أساليب أكثر تعقيداً لتحديد المحتوى المهم على الصفحة.
مثال:

HTML


<head>
    <meta name="keywords" content="الكلمة الرئيسية 1, الكلمة الرئيسية 2, الكلمة الرئيسية 3">
</head>

6) تحديد اللغة meta language: يستخدم هذا العنصر لتحديد لغة الصفحة وهو مهم لمحركات البحث ومستخدمي الإنترنت من أجل عرض الصفحة باللغة المناسبة.
مثال:

HTML


<head>
    <meta http-equiv="Content-Language" content="ar">
</head>

7) تحديد الترميز meta charset: يستخدم هذا العنصر لتحديد ترميز الحروف المستخدم في الصفحة.
مثال:

HTML


<head>
    <meta charset="UTF-8">
</head>

8) تحديد المؤلف meta author: يستخدم هذا العنصر لتحديد اسم المؤلف للصفحة.
مثال:

HTML


<head>
    <meta name="author" content="اسم المؤلف هنا">
</head>

9) تحديد الروابط الأساسية base: يستخدم هذا العنصر لتحديد الرابط الأساسي لصفحة الويب والذي يستخدم عند تحديد الروابط النسبية.
مثال:

HTML


<head>
    <base href="https://test.com/">
</head>

10) تحديد تحديث الصفحة meta refresh: يستخدم هذا العنصر لتحديث الصفحة تلقائيًا بعد فترة معينة.
مثال:

HTML


<head>
    <meta http-equiv="refresh" content="5; url=https://test.com/">
</head>

في هذا المثال، ستتم إعادة تحميل الصفحة بعد 5 ثوانٍ وستتم إعادة التوجيه إلى الرابط المحدد https://test.com/.

11) تحديد التعريفات meta viewport: يستخدم هذا العنصر لتحديد تخطيط العرض الأولي للصفحة، مثل حجم الشاشة والمقياس والتدوير.
مثال:

HTML


<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

في هذا المثال، يتم تحديد تخطيط العرض الأولي للصفحة ليتم عرضه على شاشات الأجهزة المحمولة بالحجم الصحيح وبمقياس النسبة المناسب.
12) تحديد الكاتب meta publisher: يستخدم هذا العنصر لتحديد اسم الناشر للصفحة.
مثال:

HTML


<head>
    <meta name="publisher" content="اسم الناشر هنا">
</head>

13) تحديد صلاحية الحقوق meta copyright: يستخدم هذا العنصر لتحديد صلاحية حقوق النشر للصفحة.
مثال:

HTML


<head>
    <meta name="copyright" content="Copyright ©">
</head>

تحديد وضع الصفحة color-scheme:
"color-scheme" هو خاصية تستخدم في تحديد نظام الألوان المفضل لمستخدم النهار أو الليل. هذه لتوفير تجربة محسنة للمستخدمين على جميع الأجهزة ، سواء كانوا يستخدمون الحواسيب الشخصية أو الهواتف المحمولة أو الأجهزة اللوحية.
يتم تعيين قيمة "color-scheme" على الجسم (body) أو أي عنصر آخر للصفحة. يمكن أن تكون القيمة إما "light" أو "dark" أو "no-preference". تقوم هذه الخاصية بتغيير ألوان الخلفية والنص والأطراف وأيضًا أي لون يتم استخدامه في صفحة الويب لتتناسب مع نظام الألوان المفضل للمستخدم.
في حالة استخدام "no-preference" كقيمة لـ "color-scheme" ، سيظل النظام الافتراضي للألوان مفعلاً وسيتم تطبيق الألوان المعتادة.
مثال:

HTML


<!DOCTYPE html>
<html>
<head>
    <meta name="color-scheme" content="light dark">
    <style>
        body {
            background-color: white;
            color: black;
        }
        @media (prefers-color-scheme: dark) {
            body {
            background-color: black;
            color: white;
            }
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
    <p>This is p</p>
</body>
</html>

في هذا المثال ، يتم تعيين "color-scheme" إلى "light dark" للسماح للمستخدمين بالتبديل بين نظام الألوان الفاتح والداكن. يتم تطبيق الألوان المناسبة باستخدام قاعدة CSS العادية والميديا استعلامات (media queries) بتفضيل المستخدم للألوان الفاتحة أو الداكنة.

"theme-color" هي خاصية تستخدم في تحديد لون خاص لشريط العنوان والأيقونة في الهاتف المحمول والجهاز اللوحي الذي يتم استخدامه لإضافة صفحة الويب إلى الشاشة الرئيسية. يتم تعيين قيمة "theme-color" في عنصر "meta" في "head" من صفحة HTML.
تحديد "theme-color" للمستخدمين يمكنهم من الحصول على تجربة محسنة للواجهة الرسومية لصفحة الويب على الهواتف المحمولة والأجهزة اللوحية. على سبيل المثال ، إذا كان لون شريط العنوان هو الأزرق ، فيمكن تعيين "theme-color" للأزرق لتحسين توافق الألوان لصفحة الويب على الهواتف المحمولة والأجهزة اللوحية.
مثال:

HTML


<!DOCTYPE html>
<html>
<head>
    <meta name="theme-color" content="#f45">
</head>
<body>
    <h1>Hello World</h1>
    <p>This is p</p>
</body>
</html>

في هذا المثال ، يتم تعيين "theme-color" إلى اللون الأحمر الفاتح (#f45) لتغيير لون شريط العنوان والأيقونة الموجودة في الهاتف المحمول. يجب على المستخدمين الذين يستخدمون الهواتف المحمولة والأجهزة اللوحية التي تستخدم نظام Android أن يكون لديهم نسخة من Chrome مثبتة على جهازهم لتحديد "theme-color" بشكل صحيح. ومن الجدير بالذكر أنه يجب أن تستخدم قيمة اللون في تنسيق HEX الخاص بها (#RRGGBB).

يمكنك التحكم في كيفية عرض موقعك على منصات الشبكات الاجتماعية مثل Facebook و Twitter باستخدام بعض الأوامر والعناصر الخاصة. هذه العناصر تسمى "ميتا تاج" (Meta Tags) وتمكن المطورين من تحديد العناوين والوصف والصور والألوان الرئيسية التي تظهر عند مشاركة رابط الموقع على منصات الشبكات الاجتماعية.
فيما يلي بعض الميتا تاج الشائعة التي يمكن استخدامها للتحكم في عرض موقعك على Facebook و Twitter:
1) عنوان الصفحة Title: يتم استخدام هذا الميتا تاج لتحديد العنوان الذي سيظهر في عنوان الصفحة على Facebook و Twitter عند مشاركة الرابط. مثال:

HTML


<-- facbook -->
<head>
    <meta property="og:title" content="عنوان صفحتك">
</head>

HTML


<-- twitter -->
<head>
<meta name="twitter:title" content="عنوان صفحتك">
</head>

2) وصف الصفحة Description: يتم استخدام هذا الميتا تاج لتحديد الوصف الذي سيظهر تحت العنوان على Facebook و Twitter عند مشاركة الرابط. مثال:

HTML


<-- facebook -->
<head>
    <meta property="og:description" content="وصف صفحتك">
</head>

HTML


<-- twitter -->
<head>
<meta name="twitter:description" content="وصف صفحتك">
</head>

3) صورة معينة Image: يتم استخدام هذا الميتا تاج لتحديد الصورة التي سيتم عرضها عند مشاركة الرابط على Facebook و Twitter. مثال:

HTML


<-- facebook -->
<head>
    <meta property="og:image" content="رابط الصورة">
</head>

HTML


<-- twitter -->
<head>
<meta name="twitter:image" content="رابط الصورة">
</head>

4) عرض الموقع بالكامل Card: يتم استخدام هذا الميتا تاج لتحديد طريقة عرض الموقع على Twitter. يمكن تعيين هذا الميتا تاج إلى "summary" لعرض العنوان والوصف والصورة أو "summary_large_image" لعرض الصورة بحجم كبير. مثال:

HTML


<-- twitter -->
<head>
    <meta name="twitter:card" content="summary">
</head>

HTML


<-- twitter -->
<head>
<meta name="twitter:card" content="summary_large_image">
</head>

تحديد هذه الميتا تاج بشكل صحيح ودقيق يتطلب القليل من الوقت والجهد ولكنه يستحق العناء حيث يمكن أن يزيد من جاذبية موقعك وجعله أكثر احترافية عند مشاركته على منصات الشبكات الاجتماعية.
ويجب أيضاً مراجعة وتحديث هذه الميتا تاج بشكل دوري للتأكد من أنها محدثة وتتوافق مع تغييرات موقعك ومحتواه. ويمكن استخدام أدوات مثل "Facebook Debugger" و "Twitter Card Validator" لفحص وتحليل ميتا تاج موقعك والتأكد من أنها تعمل بشكل صحيح وتعرض بشكل جيد على منصات الشبكات الاجتماعية.

وهكذا إنتهينا من درسنا أو مقالتنا المتواضعة أتمنى أنك فهمت و وفقك الله أتمنى دعمنا بمشاركة الدرس لكي تعم الفائدة.