دليلك الكامل و المثالي لكتابة أكواد عناصر وسم head بطريقة إحترافية

لا أحد يعيرها اهتماماً شديداً، فهي غير مهمة و تقريبا مبتذلة يكفي البحث عن بعض الأكواد في الويب و نسخ ثم لصق، اتحدث عن أكواد الـ Head، تلك الأكواد التي يتم إضافتها في ترويسة اي صفحة ويب وسط وسم head، او احيانا لا تضيفها إطلاقاً فهي لن تظهر في صفحة الويب و لا تملك أي قيمة، لكن و فور الإنتهاء من تصميم موقعه الخاص يشتكي من عدم ظهوره في محركات البحث تارة، او عدم دعم التجاوب تارة أخرى، او حين يقوم بنشر رابط على فيسبوك او تويتر فتظهر له فقط بعض العناصر و يتسائل ما سبب عدم ظهوره في مواقع التواصل الإجتماعي بسلاسة و إحترافية ... لقد نسيت التعامل بإحترافية مع أكواد الـ head أيها الحذق ! 

- عناصر وسم Head و لما هي بهذه الأهمية ؟ 

تنقسم اي صفحة ويب تقريبا في هيكلتها الى قسمين أساسيين و هما قسم الـ head و قسم الـ body، قسم الـ head يحمل تعريفات صفحة الويب من أكواد مختلفة ( و هي التي سنرى اليوم ) تلك الأكواد لا تظهر إطلاقا للمستخدم او في الصفحة، بينما يتضمن وسم الـ body هيكلة الصفحة كاملة من أكواد مختلفة، يمكنك قراءة مقالنا بعنوان ليس دائما الـ div ... وسوم في الـ HTML ضرورية لا تستخدمها إلا نادراً لتطلع بشكل أقرب على محتوى الـ body. 

و لأن محتوى الـ head لا يظهر في الصفحة، فإن معظم المطورين لا يولون إهتماماً جيداً لها بحيث يقومون فقط بجعل الـ Auto Generator الخاص بمحرر الاكواد يقوم بكتابة الأكواد الأساسية، لكن بعد نشر الموقع، نواجه صعوبات كبيرة في التعامل الخارجي مع الموقع، و السبب بنسبة كبيرة يكون في تهيئة الـ head. 

إذن لما كل هذه الأهمية للـ head؟ يوجد العديد من الأكواد التي سنراها اليوم للـ head، و صدقني انها مهمة جدا، فمنها ما يعرف موقعك لربوتات الزحف لمحركات البحث ( وهي مهمة لظهور موقعك بشكل محسن و كما تريده في جوجل عند البحث عن إسمه ) ثم أكواد تهيئة المواقع الإجتماعية و أكواد أخرى سنراها اليوم، فهيا بنا نبدأ. 

-  head بسيط ( و ليس سبونج بوب ) : 

يوجد بعض الأكواد و العناصر الأساسية التي لا يمكن الإستغناء عنها إطلاقا في الـ head، و هي تقريبا 3 عناصر : ترميز الصفحة من أجل دعم كل أنواع التشفيرات و اللغات و يفضل إستخدام تشفير UTF-8، تهيئة مساحة تبويب الصفحة من أجل الإنتقال بين النوافذ لاحقا عبر التجاوب (او الميديا في الـ CSS)، ثم عنوان الصفحة، يمكن تطبيقها بالشكل التالي :

- تضمين أكواد الـ Metatag التعريفية :

إن لم تكن لديك فكرة عن ماهية أكواد الميتا تاج او MetaTag فلا تقلق، تعتبر أكواد الـ MetaTag تعريفية لموقعك بالنسبة لمحركات البحث، بحيث كل كود ميتا يبتدأ بـ meta>، و يحمل مجموعة من الـ Attributes اهمها الـ name و الـ content، بحيث في الـ name نقوم بإضافة نوع الميتا ( مثلا ميتا خاص بالوصف اي إسم Description ) ثم في الـ Content نضع محتوى ذلك الإسم ( أي الوصف في المثال السابق )، عندما يزور احد روبوتات الزحف الخاصة بمحركات البحث، يذهب مباشرة الى كود الميتا و يتحقق منه و يأخذ هيكلته و يقوم بتسجيلها لأرشفة موقعك في محركات البحث.
يوجد العديد من أكواد الميتا، لذلك سنحاول تضمين أكبر عدد منها و الأكثر إفادة مع الشرح الخاص بها، تابع :

قمنا بشرح مهمة كل وسم من وسوم الـ Meta أعلاه، و يمكننا تقسيمها لـ 3 أقسام رئيسية : الأولى الخاصة بتعريف الموقع لمحركات البحث، الثانية خاصة بتأكيد ملكية الموقع بالنسبة لمنصات أخرى ( يمكن إستخدام خدمة Google Tag Manager سيكون أفضل تابع شرحها من هنا )، اما القسم الثالث فهو بعض الوسوم الثانوية التي يمكن إستخدامها مثل الفئة العمرية لمستخدمي الموقع، كل هذه الوسوم فقط لتعريف الموقع بشكل جيد لمحركات البحث.

- إدراج الروابط الخارجية و التعامل مع الـ Fav icon :

من العناصر و الوسوم التي يتم إضافتها في وسم الـ head، هي الروابط الخارجية الخاصة بالمكتبات او الملفات الخارجية التي تقوم صفحتك بتحميلها من بينهما ملفات الـ CSS و ملفات الـ Javascript و كذلك الخطوط، و يتم تحميلها من مصادر خارجية  على شكل CDN، نستخدم وسم link> من أجل تضمين أي رابط للـ CSS، بينما نستخدم وسم script لتضمين أكواد الجافاسكربت، سنتعامل مع بعض الوسوم الأخرى كذلك التي يتم إدراجها بواسطة link مثل الـ Canonical الذي يقوم بتعريف رابط الصفحة و نطاقها الأصلي حتى بعد الذهاب الى نطاق فرعي.
الـ Fav Icon من جهة أخرى هي الأيقونة الخاصة بالموقع، إن قمت برفع عينيك قليلا لأعلى هذه الصفحة ستجد ان التبويب يحمل أيقونة الى جانب عنوان و شعار الموقع، تلك الأيقونة تسمى Fav Icon و هي الأخرى يتم إضافتها في وسم الـ head .
حسناً، دعونا نقوم بإضافتهما إذن لنحصل على الكود التالي :

سنستوقفك هنا للحظة لنخبرك بشرح أكثر تفصيلا، بالنسبة لوسم base فهو مخصص لتحديد النطاق الأصلي للموقع و الفرق بينه و بين الـ Canonical هو ان هذا الأخير يحمل رابط الصفحة ( مثلا رابط صفحة هذا الموقع ) لكن في base يحمل النطاق فقط، إن كان موقعك يعتمد على نسخة amp بالنسبة لمحركات البحث، فيمكنك إدراج الستايل الخاص بها عبر الـ amphtml، يوجد وسوم أخرى مثل الـ pingback مثلا لكنها مخصصة لمواقع تابعة لمنصات محددة مثل الـ Wordpress. 

يجدر الإشارة هنا ان إضافة أكواد الجافاسكربت عبر وسم script يجب أن يكون في الأساس أسفل الـ body و ليس في الـ head، لكن قمنا بإدراجها لإظهار الوسوم التي يمكن إستخدامها في الـ head. 

- مفهوم الـ Schema و تهيئتها في صفحة الويب : 

يوجد الكثير من المواقع في العالم، منها المدونات ( مثل موقع أكوا ويب ) و منها مواقع البيع و الشراء، و المواقع الإجتماعية، و مواقع المراجعات و التقييمات و المواقع الخاصة بالشركات ...إلخ، لكن كيف يمكننا تعريف نوع موقعنا لمحركات البحث؟ قد تلاحظ أحيانا انه عند البحث في جوجل عن رابط منتج تظهر لك بعض الصفحات التي تضع تقييم المنتج في نتيجة البحث مباشرة، او عند البحث عن إسم شركة تظهر لك في الجانب تعريف للشركة في محركات البحث، الأمر سيان بالنسبة لمواقع الأفلام مثلا، و غيرها، فكيف يمكن تحقيق هذه النتيجة؟ 

توفر لنا جوجل ما يسمى  بالـ Schema، و هي عبارة عن مجموعة ضخمة جدا من الأكواد التعريفية التي تقوم بتهيئة موقعك، لنضيفها في صفحتنا على الويب نقوم بالآتي : 

لاحظ اننا أضفنا بعض الـ Attributes كذلك في وسم الـ html الرئيسي لتعريف ان هذا الكود قد يتضمن أكواد Schema، يوجد العديد و العديد من الاكواد الخاصة بالـ Schema حسب نوع الموقع، الأكواد المضافة أعلاه فقط رئيسية او اساسية، فلكل نوع من المواقع أكواد الـ Schema الخاصة به، يكفي الولوج للموقع التالي Schema.org من أجل التعرف على كل الـ Shemas الموجودة و إدراج الملائمة لموقعك.

- تهيئة الموقع للظهور بشكل جيد في المواقع الإجتماعية :

الكيفية التي يظهر بها موقعك في محركات البحث ليست بنفس الطريقة التي يظهر بها عند نشر روابط منها في منصات التواصل الإجتماعي، لكل موقع تهيئته الخاصة، فمثلا فيسبوك يستعرض الصورة بشكل كبير ثم أسفلها العنوان ثم أسفلها الوصف، و في الأخير يضيف الرابط الرسمي للموقع و يمكنك إضافة إسم الكاتب كذلك، لكن كيف نحصل على التهيئة المثالية؟ الكود الآتي سيساعدنا على تحقيق ذلك :

قمنا بإدراج المعلومات الخاصة بكل من منصة فيسبوك و تويتر لأنهما الأكثر فاعلية و الأكثر إنتشارا، منصات أخرى مثل LinkedIn مثلا لديها قواعدها كذلك، لك حرية البحث في إدراج الأكواد الملائمة لكل منصة لاحقا.

- بعض الأكواد الأخرى في الـ head ثانوية قد تود التفرد بها :
يوجد أحيانا بعض الأكواد الوحيدة ( سطر واحد فقط ) يمكنه ان يساعدك بشكل عملي، ليست بالضرورية ( لأننا قمنا بتغطية الضرورية أعلاه ) و إنما ثانوية تساعد أكثر و أكثر في تركيز موقعك و جعله مقبولا من طرف شتى المنصات الأخرى، هذه بعضها مع الشرح الخاص بكل واحدة :

لست مضطراً إطلاقا لإدراجها، او في الحقيقة أي من الأكواد المدرجة في هذا المقال مادامت لا تتوافق مع موقعك، لكن فقط تذكر دائما أن إضافة أكبر عدد من الاكواد التعريفية يجعل منصات عديدة ( جوجل، فيسبوك، بينغ، تويتر، يانديكس ...) تثق أكثر في موقعك و لا تحظره إطلاقا، و يظهر كذلك بطريقة منظمة و أكثر إحترافية.

- كل الأكواد المدرجة في هذا المقال :

	<!DOCTYPE HTML >
	<html>
	<head>
	<!-- HEAD Elements -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Page Title</title>
	<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
	<meta name="application-name" content="Application Name">
	<meta name="theme-color" content="#000">
	<meta name="description" content="description">
	<meta name="robots" content="index,follow">
	<meta name="googlebot" content="index,follow">
	<meta name="google" content="notranslate">
	<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
	<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->
	<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
	<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
	<meta name="rating" content="General">
	<meta name="format-detection" content="telephone=no">
	<base href="https://www.aqweeb.com"> <!-- تأكيد الرابط الرئيسي للموقع -->
	<link rel="stylesheet" href="https://cdn.com/mystyle.css"> <!-- تضمين ستايل خارجي -->
	<link rel="canonical" href="https://www.aqweeb.com"> <!-- تحديد الرابط الأصلي للصفحة -->
	<link rel="amphtml" href="https://www.aqweeb.com/amp.html"> <!-- تحديد نسخة amp للموقع -->
	<link rel="icon" sizes="192x192" href="https://www.aqweeb.com/icon.png">
	<!-- معلومات الكاتب و الصفحة -->
	<link rel="author" href="">
	<link rel="publisher" href="">
	<meta itemprop="name" content="Content Title">
	<meta itemprop="description" content="Content description">
	<meta itemprop="image" content="https://www.aqweeb.com/image.jpg">
	<!-- تهيئة الموقع بشكل جيد لمنصة فيسبوك -->
	<meta property="fb:app_id" content="123456789"> <!-- إن كان لديك تطبيق فيسبوك للصفحة قم بإضافته هنا -->
	<meta property="og:url" content="https://example.com/page.html"> <!-- رابط الصفحة : إجعله ديناميكي -->
	<meta property="og:type" content="website"> <!--تأكيد ان المعلومات خاصة بصفحة ويب -->
	<meta property="og:title" content="Content Title"> <!-- عنوان الصفحة -->
	<meta property="og:image" content="https://example.com/image.jpg"> <!-- الصورة -->
	<meta property="og:image:alt" content=" description"> <!-- وسم الصورة -->
	<meta property="og:description" content="Description Here"> <!-- وصف الصفحة-->
	<meta property="og:site_name" content="Site Name"> <!-- إسم الموقع الرئيسي -->
	<meta property="og:locale" content="en_US"> <!-- دولة الموقع / إختيارية -->
	<meta property="article:author" content=""> <!-- رابط بروفايل فيسبوك لكاتب المقال -->
	<!-- تهيئة الموقع بشكل جيد لمنصة تويتر -->
	<meta name="twitter:card" content="summary"> <!-- تعريف بطاقة تويتر -->
	<meta name="twitter:site" content="@site_account"> <!-- الرابط الرسمي للموقع على تويتر -->
	<meta name="twitter:creator" content="@individual_account"> <!-- رابط بروفايل تويتر لصاحب الصفحة -->
	<meta name="twitter:url" content="https://example.com/page.html"> <!-- رابط الصفحة / أجعلها ديناميكية -->
	<meta name="twitter:title" content=" Title"> <!-- عنوان الصفحة -->
	<meta name="twitter:description" content="Content description"> <!-- وصف الرابط -->
	<meta name="twitter:image" content="https://example.com/image.jpg"> <!-- رابط الصورة المراد عرضها -->
	<meta name="twitter:image:alt" content="alt text"> <!-- الوسم التعريفي للصورة -->
	<!-- منع منصة بينترست من أخذ او مشاركة الصور -->
	<meta name="pinterest" content="nopin" description="Not allowed">
	<!--منع منصة تويتر من إستخدام معلومات موقعك لأغراض شخصية -->
	<meta name="twitter:dnt" content="on">
	<!-- تحديد تطبيق خاص بموقعك إن كان متوافرا على نظام الأي او اس -->
	<meta property="al:ios:url" content="applink">
	<meta property="al:ios:app_store_id" content="12345">
	<meta property="al:ios:app_name" content="App Links">
	<!-- تحديد تطبيق خاص بموقعك إن كان متوافرا على نظام الأندرويد -->
	<meta property="al:android:url" content="applinks">
	<meta property="al:android:app_name" content="App Links">
	<meta property="al:android:package" content="org.applinks">
	<!-- تحديد النظام او التقنية المستخدمة في تطوير الموقع مثلا ووردبريس-->
	<meta name="generator" content="Wordpress">
	<!-- تحديد المكان الجغرافي الخاص بمكان الموقع او الشركة -->
	<meta name="geo.position" content="latitude;longitude">
	<meta name="geo.region" content="Morocco">
	<meta name="geo.placename" content="Casablanca">
	<script src="script.js"></script>
	<!-- ./HEAD Elements -->
	</head>
	<body>
	<!-- www.Aqweeb.com -->
	</body>
	</html>

view raw head.html hosted with ❤ by GitHub

---

المحرر: Rida Dahhane

مدير في موقع أكوا ويب، ملم بكل عوالم التقنية و تخصصاتها، مكتسب لخبرات بسيطة و أسعى لمشاركتها مع الجميع ، و يشاركوني كذلك خبراتهم، هدفنا الأول و الأخير في أكوا ويب إرضاء الكل و توفير منصة يستطيع أي رائد لعالم الويب فهمها و التعامل معها

تبرع لصاحب المقال: