أتقن ترويسة head في صفحتك: العنوان والوصف والأيقونة والروابط الخارجية الآمنة.
افتح هذا الدرس في Kodokonحتى قبل زيارة صفحتك، يراها الناس في مكان آخر: في علامة تبويب المتصفح، في نتائج البحث، في رابط مشارَك. كل ذلك يحدث في head. الـ head المتقن هو الفرق بين موقع هاوٍ وموقع احترافي.
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Quick Recipes | Lea's Kitchen</title>
<meta
name="description"
content="30 recipes ready in 20 minutes flat,
tested by our readers."
>
</head>يظهر title في علامة التبويب، وفي الإشارات المرجعية، وفي نتائج البحث: اجعله فريدًا لكل صفحة، وصفيًا، مع وضع الموضوع أولاً وبحدود 60 حرفًا. أما meta description فهو النص المعروض تحت العنوان في محركات البحث: استهدف 150 حرفًا تغري الناس بالنقر.
الأيقونة (favicon) هي الأيقونة الصغيرة المعروضة في علامة التبويب وفي الإشارات المرجعية. الممارسة الحديثة: ملف احتياطي favicon.ico في جذر الموقع، ونسخة SVG تبقى حادة بكل الأحجام، وأيقونة مخصصة لشاشات Apple الرئيسية.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-icon.png">منعكس احترافي أخير: الروابط الخارجية. فتح رابط في علامة تبويب جديدة بـ target="_blank" يمنح الصفحة المفتوحة وصولاً محتملاً إلى window.opener، ومن ثمّ إلى صفحتك. أضف rel="noopener noreferrer" لقطع هذا الرابط وتجنّب تمرير عنوان الإحالة.
<a
href="https://developer.mozilla.org"
target="_blank"
rel="noopener noreferrer"
>
MDN documentation (new tab)
</a>