وسم meta لتحسين الموقع على محركات البحث لغة HTML - ProgrammerTech
Language:

Search

وسم meta لتحسين الموقع على محركات البحث لغة HTML

  • Share this:
وسم meta لتحسين الموقع على محركات البحث لغة HTML

أكواد الميتا تاغ في HTML

أكواد الميتا تاغ ( meta tag ) هي من أهم الأشياء بالنسبة لمحركات البحث فهي تُسهِّل الأمر لمحركات البحث على الزائر.

تخيَّل معي أنك الآن الزائر للموقع و ليس المبرمج, أول شيئ سوف تفعله هو الدخول على أي محرك بحث و تبحث عن الموضوع الذي تُريده على سبيل المثال Programmer Tech.

هل سألت نفسك في يوم من الأيام لماذا محرك البحث قام بجلب كل المواقع المتعلقه ببحثك فقط؟ و لماذا لم يأتي بجميع المواقع الموجوده في العالم الإفتراضي؟.

أكواد الميتا تاغ تُعرِّف محركات البحث أن موقعك يقوم بنشر شيئ مُعيَّن كما طلبت أنت من هذا المحرك.

على سبيل المثال موقعك يتحدث عن البرمجة يجب أن يكون في أكواد الميتا تاغ بنفس إسلوب الموقع.

لا ينفَع أن يكون موقعي يتحدث عن البرمجة و أنا اكتب داخل أكواد الميتا تاغ أمن المعلومات هذا ليس مقبول.

مُحركات البحث تَعرِف أنك تتحدث عن البرمجة و هذا ما تم كتابته في أكواد الميتا تاغ.

تصدر نتائج البحث Search results, كيفية تهيئة موقع الويب من أجل التعرّف عليه في محركات البحث. "Improve your website's visibility in search engines" و عمل Search Engine Optimization كامل للموقع.

للحصول على أفضل النتائج و تصدر نتائج البحث , كل هذا الأمر يتم عبر قيم لوسم الميتا meta الموجود برأس صفحات الإنترنت.

ضمن الوسم head الذي يُستخدم لتحديد خصائص الصفحة مثل تحديد الترميز لتعريف المتصفحات على لغة الموقع.

و تظهَر بشكل جيد و إسم المؤلف و الكلمات المفتاحية و الوصف و غيرها, سوف نتحدث عن القيم التي يأخذها هذا الوسم.

اكواد الميتا تاغ تُعرِّف محركات البحث search engines أن موقعك يقوم بنشر شيئ معين كما طلبت أنت من هذا المُحرك.

على سبيل المثال موقعك يتحدث عن البرمجة يجب أن يكون في اكواد الميتا تاغ بنفس إسلوب الموقع.

لا ينفع أن يكون موقعي يتحدث عن البرمجة و أنا اكتب داخل اكواد الميتا تاغ طب و دواجن. هذا ليس مقبول في تصدر نتائج البحث.

محركات البحث تعرف أنك تتحدث عن البرمجة و هذا ما تم كتابتة في اكواد الميتا تاغ.

 

كيف سوف تكتب مقال عن البرمجة و يظهر في محركات البحث؟

الإجابة هنا, في برمجة الويب أو بناء المواقع أكواد الميتا تاغ موجودة, و يكون موقعها داخل وسم <head> هنا يتم كتابة أكواد الميتا تاغ.

في بعض الأحيان نريد أن نكتُب موقع باللغة العربية, في الدرس السابق تحدثنا عن وسم العنوان title و نعرف كُلنا مكانه وهو أيضاً يُساعد محركات البحث من خلال هذا العنوان.

لا ينفَع أن يكون الموقع يتحدث عن البرمجة و نحن نكتب في عنوان الموقع سياسة أو دواجن أو محروقات و غيره. هذا غباء إن الموقع يتحدث عن البرمجة كيف أضع في العنوان سياسة أو غيره و هو لا يتحدث عن السياسة و كذلك العكس صحيح.

<html>
	<head>
		<title>Programmer Tech</title>
	</head>
<body>
</body>
</html>

في المثال السابق تم وضع عنوان الصفحة يخُص البرمجة Programmer Tech و هكذا سوف يعرف محرك البحث أن هذا الموقع خاص بالبرمجه.

كما ذكرنا سابقاً أننا نريد كتابة موقع باللغة العربية و سوف تواجهك مشاكل في بعض الأحيان في كتابة اللغة العربية.

هناك متصفحات لا تعرف اللغة العربية مثل firefox و غيره و أنت كمبرمج مواقع, موقعك سوف يظهَر في جميع محركات البحث و لا يجب أن يظهَر موقعك في بعض المتصفحات فقط.

لأنك لا تعرف من أين سوف يبحث الزائر على موقعك.

تخيل إن بحث على محرك بحث لا يقبل اللغة العربية كيف سيكون الخطئ؟

خطأ الكتابه بالعربية في المتصفحات اكواد ميتا تاغ

 

لاحظ كلمة احمد قيصر لم تظهر باللغة العربية على متصفح internet Explorer, لكنها ستظهر بشكل صحيح على google chrom.

ظهور النتيجة جيدة على متصفح كروم meta tag

 

لم يختلف شيئ نفس الكود لكن متصفح internet Explorer لا يقبل اللغة العربية عكس google chrom يقبل اللغة العربية.

و أنت كمبرمج لا تعرف من أي محرك بحث سوف يدخل الزائر لموقعك, و لتفادي هذه المشكلة الحل هو عن طريق اكواد الميتا تاغ كما في المثال التالي :

<meta charset="utf-8">

بعد تعريف المتصفح أننا نريد كتابة اللغة العربية في السورس كود من خلال الوسم meta charset.

و مهمة meta charset أن نقول للمتصفح إستخدم اللغة العربية من خلال خاصية utf-8 و يتم التعرف على اللغة العربية في كل المتصفحات.

دعم اللغة العربية للمتصفحات meta charset لغة html

 

القيمة description

تستخدم القيمة description في وصف الموقع وهذا يساعد ايضاً محركات البحث في التعرف على محتوى موقعك من خلال وصف الموقع.

دعونا نتعرف على وصف الموقع و هذه الأكواد لا تظهر من خلال page source.

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

استخدام القيمة description لوصف الموقع

 

دائماً قُم بوضع وصف لكل صفحة من صفحات موقعك من خلال الميزة description و يجب. أن يكون الوصف الذي تضعه متعلق بإسم موقعك او في وسم title يكتب بالشكل

<meta neme="description" content="هنا نكتب وصف موقعنا">

نقوم بكتابة الوصف بين الفاصلتين بعد content ليتم تعريف المحركات على الموقع و بماذا يهتم

استخدام القيمة description لوصف الموقع

 

كما لاحظنا قُمنا بكتابة وصف شامل لإهتمامات الموقع الخاص بنا و بهذا ستتعرف محركات البحث عن ما نقدمه و ما هي الدروس التي ننشرها في الموقع.

 

القيمة author

من خلال القيمة author يمكنك أن تعرف محرك البحث على مؤلف الصفحة التي يزورها.

و يجب تمرير إسم المؤلف كقيمة, و في بعض الأحيان يتم وضع المؤلف بجانب title كما يلي

استخدام القيمة description لوصف الموقع

 

كما نلاحظ بأن كلمة مبرمج التكنلوجيا هي تعتبر المؤلف وضعناها هنا بجانب title و طبعاً. صاحب الموقع هو حر إذ كان يريد التعريف بنفسه أم لا, و يكون ذلك بالشكل الآتي

<meta neme="author" content="محمد تركي العلوش">

كما لاحظنا أنه بعد content قمت بتعريف نفسي كمؤلف لهذه الصفحة التي يزورها الزائر للموقع.

و هذا يعني أن الشخص الذي قام بتأليف هذه الصفحة هو محمد تركي العلوش.

لست مُجبراً على وضع هذا العنصر لكن للحصول على نتائج جيدة لا تتجاهل أي أمر بخصوص SEO موقعك.

 

القيمة viewport

القيمة viewport يجب وضعها وهي المهمة بكل صفحة من صفحات موقعك و هي مهمة جداً تُساعد. الموقع أن يَظهَر بشكل جيد في جميع الأجهزة و تحديد القياسات و تتم كتابتها بالشكل

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

و بدون هذا العنصر لن يعمل الموقع مع جميع الأجهزة بشكل صحيح, وظيفته في حال قمت ببرمجة. موقع متجاوب مع جميع مقاسات الشاشات.

وفي حال لم تقُم بإضافة هذا العنصر لن يتمكن متصفح الهاتف المحمول من قياس حجم الشاشة الخاص به.

و بالتالي المتصفح لن يتمكن من دون هذا العنصر من معرفة مقاس الشاشة على الرُغُم من أنك أنشأت موقع متجاوب مع جميع الأجهزة.

لن يتم عرضُه على أنه متجاوب و سيظهَر بشكل صحيح فقط على أجهزة الكمبيوتر.

و width=device-width تعني ضبط عرض الصفحة لمتابعة فتحها تبعاً للجهاز, و initial-scale=1.0 هذا الجزء. يضبط مستوى التكبير عند بداية تحميل الصفحة لأول مرة بواسطة المتصفح.

 

القيمة generator

تُستخدَم generator من أجل وضع إسم الأداة التي إستخدمت في إنشاء الصفحة لتصدر نتائج البحث و يتم تمرير إسم الأداة التي تم إستخدامها كـ قيمة, و يتم ذلك بالشكل

<meta name="generator" content="Saja Page Generator 2.3">

و معنى Saja Page Generator 2.3 هو إسم الأداة التي تم إستخدامها في الصفحة.

 

القيمة keywords

تُسخدَم keywords من أجل وضع كلمات مفتاحية key words للموقع, بحيث أي شخص يبحث عن هذه الكلمات. في الأنترنت سوف يجد طلبه برابط الموقع أو الموضوع الذي يتحدث عن الموقع, و تكتب بالشكل

<meta neme="keywords" content="هنا نكتب كلماتنا المفتاحية">

كتبنا الوسم meta ثم name و إستخدمنا القيمة keywords ثم كتبنا الكلمات المفتاحية الخاصة بالموقع.

في حال لم تكُن تعرِف ما هي الكلمات الأكثر رواجاً لموقعك يمكنك إستخدام الموقع rapidtags, و بعد الدخول للموقع سنجده بالشكل

استخدام موقع rapidtags للكلمات المفتاحية

 

بعدما يفتح الموقع لديك تقوم بكتب ما هو هدف موقعك.

على سبيل المثال هنا كتبت تعلم. البرمجة من الصفر و بعدها نضغط على زر البحث أو Enter ليعطينا الكلمات بالشكل

نتيجة موقع rapidtags و اظهار كلمات مفتاحية

 

نقوم بالضغط على COPY في الأسفل ليتم نسخ جميع الكلمات, ما عليك سوى لصقها في مكانها في سورس الموقع.

لا تقُم بوضع كلمات مفتاحية خارجة عن إطار و إسم موقعك من أجل عدم الحصول على تجاهل للموقع من قبل محركات البحث.


Tags:
Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com