أكواد ميتا meta في HTML
أكواد الميتا تاغ meta tag هي من أهم الأشياء في النسبة لمحركات البحث فهي تُسهِّل الأمر لمحركات البحث على الزائر.
تخيَّل معي أنك الآن الزائر للموقع و ليس المبرمج, أول شيئ سوف تفعله هو الدخول على أي محرك بحث و تبحث عن الموضوع الذي تُريده على سبيل المثال Nusur Tech.
هل سألت نفسك في يوم من الأيام لماذا محرك البحث قام بجلب كل المواقع المتعلقه ببحثك فقط؟ و لماذا لم يأتي بجميع المواقع الموجوده في العالم الإفتراضي؟.
أكواد الميتا تاغ تُعرِّف محركات البحث أن موقعك يقوم بنشر شيئ مُعيَّن كما طلبت أنت من هذا المحرك. على سبيل المثال موقعك يتحدث عن البرمجة يجب أن يكون في أكواد الميتا تاغ بنفس إسلوب الموقع.
لا ينفَع أن يكون موقعي يتحدث عن البرمجة و أنا اكتب داخل أكواد الميتا تاغ أمن المعلومات هذا ليس مقبول.
مُحركات البحث تَعرِف أنك تتحدث عن البرمجة و هذا ما تم كتابته في أكواد الميتا تاغ.
تصدر نتائج البحث Search results, كيفية تهيئة موقع الويب من أجل التعرّف عليه في محركات البحث. "Improve your website's visibility in search engines" و عمل Search Engine Optimization كامل للموقع.
للحصول على أفضل النتائج و تصدر نتائج البحث , كل هذا الأمر يتم عبر قيم لوسم الميتا meta الموجود برأس صفحات الإنترنت. ضمن الوسم head الذي يُستخدم لتحديد خصائص الصفحة مثل تحديد الترميز لتعريف المتصفحات على لغة الموقع. و تظهَر بشكل جيد و إسم المؤلف و الكلمات المفتاحية و الوصف و غيرها, سوف نتحدث عن القيم التي يأخذها هذا الوسم.
اكواد الميتا تاغ تُعرِّف محركات البحث search engines أن موقعك يقوم بنشر شيئ معين كما طلبت أنت من هذا المُحرك. على سبيل المثال موقعك يتحدث عن البرمجة يجب أن يكون في اكواد الميتا تاغ بنفس إسلوب الموقع.
لا ينفع أن يكون موقعي يتحدث عن البرمجة و أنا اكتب داخل اكواد الميتا تاغ أمن المعلومات. هذا ليس مقبول في تصدر نتائج البحث. محركات البحث تعرف أنك تتحدث عن البرمجة و هذا ما تم كتابتة في اكواد الميتا تاغ.
كيف سوف تكتب مقال عن البرمجة و يظهر في محركات البحث؟
الإجابة هنا, في برمجة الويب أو بناء المواقع أكواد الميتا تاغ موجودة, و يكون موقعها داخل وسم <head> هنا يتم كتابة أكواد الميتا تاغ.
في بعض الأحيان نريد أن نكتُب موقع باللغة العربية, في الدرس السابق تحدثنا عن وسم العنوان title و نعرف كُلنا مكانه وهو أيضاً يُساعد محركات البحث من خلال هذا العنوان.
لا ينفَع أن يكون الموقع يتحدث عن البرمجة و نحن نكتب في عنوان الموقع سياسة أو دواجن أو محروقات و غيره. هذا غباء إن الموقع يتحدث عن البرمجة كيف أضع في العنوان سياسة أو غيره و هو لا يتحدث عن السياسة و كذلك العكس صحيح.
<html>
<head>
<title>Nusur Tech</title>
</head>
<body>
</body>
</html>
في المثال السابق تم وضع عنوان الصفحة يخُص البرمجة Nusur Tech و هكذا سوف يعرف محرك البحث أن هذا الموقع خاص بالبرمجه.
كما ذكرنا سابقاً أننا نريد كتابة موقع باللغة العربية و سوف تواجهك مشاكل في بعض الأحيان في كتابة اللغة العربية.
هناك متصفحات لا تعرف اللغة العربية مثل firefox و غيره و أنت كمبرمج مواقع, موقعك سوف يظهَر في جميع محركات البحث و لا يجب أن يظهَر موقعك في بعض المتصفحات فقط.
لأنك لا تعرف من أين سوف يبحث الزائر على موقعك.
تخيل إن بحث على محرك بحث لا يقبل اللغة العربية كيف سيكون الخطئ؟
<html>
<head>
<title>لغة html</title>
</head>
<body>
<p>احمد عبدالعزيز</p>
</body>
</html>
بعض الكلام باللغة العربية لا يظهر على متصفح internet Explorer, لكنها سيظهر بشكل صحيح على google chrom.
لم يختلف شيئ نفس الكود لكن متصفح internet Explorer لا يقبل اللغة العربية عكس google chrom يقبل اللغة العربية.
و أنت كمبرمج لا تعرف من أي محرك بحث سوف يدخل الزائر لموقعك, و لتفادي هذه المشكلة الحل هو عن طريق اكواد الميتا تاغ كما في المثال التالي :
<meta charset="utf-8">
بعد تعريف المتصفح أننا نريد كتابة اللغة العربية في السورس كود من خلال الوسم meta charset.
و مهمة meta charset أن نقول للمتصفح إستخدم اللغة العربية من خلال خاصية utf-8 و يتم التعرف على اللغة العربية في كل المتصفحات.
<html>
<head>
<meta charset="utf-8">
<title>لغة html </title>
</head>
<body>
<p>احمد عبدالعزيز</p>
</body>
</html>القيمة description في وسم meta
نأتي الآن إلى وصف الموقع وهذا يساعد ايضاً محركات البحث في التعرف على محتوى موقعك من خلال وصف الموقع.
دعونا نتعرف على وصف الموقع و هذه الأكواد لا تظهر من خلال page source.
سوف أجلب لكم صوره عن وصف موقع على سبيل المثال أنا أبحث على جوجل على مستشفى, سوف يأتي البحث . لي بمجموعة من المستشفيات وجميعها لها وصف أو نبذه تعريفية عن ما يقدمه الموقع.
دائماً قُم بوضع وصف لكل صفحة من صفحات موقعك من خلال الميزة description و يجب. أن يكون الوصف الذي تضعه متعلق بإسم موقعك او في وسم title يكتب بالشكل
<meta neme="description" content="هنا نكتب وصف موقعنا">
نقوم بكتابة الوصف بين الفاصلتين بعد content ليتم تعريف المحركات على الموقع و بماذا يهتم.
<meta neme="description" content="نسور التقنية هي منصة مجانية تقنية تطمح لمستقبل مشرق و تهتم لإثراء المحتوى العربي في شتى مجالات التقنية مثل الأمن السيبراني و البرمجة و الذكاء الإصطناعي و كل ما هو جديد.">
كما لاحظنا قُمنا بكتابة وصف شامل لإهتمامات الموقع الخاص بنا و بهذا ستتعرف محركات البحث عن ما نقدمه و ما هي الدروس التي ننشرها في الموقع.
القيمة author وصف مؤلف صفحات الويب
من خلال القيمة author يمكنك أن تعرف محرك البحث على مؤلف الصفحة التي يزورها.
و يجب تمرير إسم المؤلف كقيمة, و في بعض الأحيان يتم وضع المؤلف بجانب title.
هنا كلمة نسور التقنية هي تعتبر المؤلف وضعناها هنا بجانب title و طبعاً. صاحب الموقع هو حر إذ كان يريد التعريف بنفسه أم لا, و يكون ذلك بالشكل الآتي
<meta neme="author" content="احمد عبدالعزيز">
كما لاحظنا أنه بعد content قمت بتعريف نفسي كمؤلف لهذه الصفحة التي يزورها الزائر للموقع.
و هذا يعني أن الشخص الذي قام بتأليف هذه الصفحة هو احمد عبدالعزيز.
لست مُجبراً على وضع هذا العنصر لكن للحصول على نتائج جيدة لا تتجاهل أي أمر بخصوص SEO موقعك.
القيمة viewport تناسق الموقع مع جميع الأجهزة
يجب وضع هذه القيمة المهمة بكل صفحة من صفحات موقعك و هي مهمة جداً تُساعد. الموقع أن يَظهَر بشكل جيد في جميع الأجهزة و تحديد القياسات و تتم كتابتها بالشكل
<meta name="viewport" content="width=device-width, initial-scale=1.0">
و width=device-width تعني ضبط عرض الصفحة لمتابعة فتحها تبعاً للجهاز, و initial-scale=1.0 هذا الجزء. يضبط مستوى التكبير عند بداية تحميل الصفحة لأول مرة بواسطة المتصفح.
و بدون هذا العنصر لن يعمل الموقع مع جميع الأجهزة بشكل صحيح, وظيفته في حال قمت ببرمجة. موقع متجاوب مع جميع مقاسات الشاشات.
وفي حال لم تقُم بإضافة هذا العنصر لن يتمكن متصفح الهاتف المحمول من قياس حجم الشاشة الخاص به.
و بالتالي المتصفح لن يتمكن من دون هذا العنصر من معرفة مقاس الشاشة على الرُغُم من أنك أنشأت موقع متجاوب مع جميع الأجهزة.
لن يتم عرضُه على أنه متجاوب و سيظهَر بشكل صحيح فقط على أجهزة الكمبيوتر.
القيمة generator في وسم meta
تُستخدَم هذه القيمة من أجل وضع إسم الأداة التي إستخدمت في إنشاء الصفحة و يتم تمرير إسم الأداة التي تم إستخدامها كـ قيمة, و يتم ذلك بالشكل
<meta name="generator" content="Saja Page Generator 2.3">
و معنى Saja Page Generator 2.3 هو إسم الأداة التي تم إستخدامها في الصفحة.
القيمة keywords من أجل وضع كلمات مفتاحية
تُسخدَم هذه القيمة من أجل وضع كلمات مفتاحية keywords للموقع, بحيث أي شخص يبحث عن هذه الكلمات. في الأنترنت سوف يجد طلبه برابط الموقع أو الموضوع الذي يتحدث عن الموقع, و تكتب بالشكل
<meta neme="keywords" content="هنا نكتب كلماتنا المفتاحية">
كتبنا الوسم meta ثم name و إستخدمنا القيمة keywords ثم كتبنا الكلمات المفتاحية الخاصة بالموقع.
في حال لم تكُن تعرِف ما هي الكلمات الأكثر رواجاً لموقعك يمكنك إستخدام الموقع rapidtags, و بعد الدخول للموقع سنجده بالشكل
بعدما يفتح الموقع لديك تقوم بكتب ما هو هدف موقعك.
على سبيل المثال هنا كتبت تعلم. البرمجة من الصفر و بعدها نضغط على زر البحث أو Enter ليعطينا الكلمات بالشكل
نقوم بالضغط على COPY في الأسفل ليتم نسخ جميع الكلمات, ما عليك سوى لصقها في مكانها في سورس الموقع.
لا تقُم بوضع كلمات مفتاحية خارجة عن إطار و إسم موقعك من أجل عدم الحصول على تجاهل للموقع من قبل محركات البحث.