وسم الميتا تاج (Meta Tag) في لغة الترميز HTML
ما هو وسم الميتا تاج - Meta Tag في لغة الترميز HTML؟ وما هي أنواعه؟ وأهم إستخدامات لوسم الميتا تاج (Meta Tag)، أمثلة على إستخدام وسم meta tag، تحديد التشفير الإفتراضي charset، التحكم في طريقة العرض viewport، تغيير لون شريط العنوان address bar، إعادة تحميل الصفحة refresh، والتحويل لصفحة أخرى redirect، إستخدام وسم الميتا لتحسين ترتيب الموقع في محركات البحث ومواقع التواصل الإجتماعي،وسم الميتا لـ Open Graph.
ما هو وسم الميتا - Meta Tag؟
وسم الميتا أو المعروف بـ الميتا تاج والكلمة تعتبر نطق للكلمة الإنجليزية Meta Tag.
هو عبارة عن وسم من وسوم لغة الترميز HTML، وهو وسم يستخدم لوصف صفحة الويب، أو بمعتى آخر إعطاء معلومات عن صفحة الويب، وهذه المعلومات لا يتم عرضها في صفحة الويب.
يتكون وسم الميتا من العنصر أو الوسم <meta /> وعادة ما يحتوي هذا الوسم على مجموعة من الخصائص مثل name و content، ولا يوجد له وسم للإغلاق، ويتم دائما وضعه بداخل وسم <head>.
ما هي إستخدامات وسم الميتا - Meta Tag؟
يمكن تقسيم الـ meta tag من حيث الإستخدامات إلى قسمين رئيسيين وهما:
- إعطاء تعليمات للمتصفح عن كيفية عرض صفحة الويب، وفي هذا النوع يتم التأثير على صفحة الويب كما سنتعلم في الأمثلة التالية في المقال.
- إعطاء معلومات عن صفحة الويب، سواء لمواقع التواصل الإجتماعي، أو محركات البحث، وفي هذا النوع يتم تحديد كيفية عرض صفحات الموقع في محركات البحث أو مواقع التواصل الإجتماعي.
أمثلة على وسم الميتا تاج - Meta Tag
سوف نستعرض سويا أهم إستخدامات لـ وسم الميتا تاج
1. تحديد الترميز الإفتراضي - Character Encoding
ويعتبر من أهم إستخدامات الوسم meta حيث يتم من خلاله تحديد نوع تشفير الأحرف لصفحة الويب، أو بمعنى أبسط لكي تتمكن من وضع أي محتوى باللغة العربية (لغة غير إنجليزية) ويتم عرض محتويات الصفحة بشكل صحيح، لا بد من إستخدام الوسم meta لتحديد نوع التشفير.
ويوجد طريقتين لكتابة الأكواد الخاصة بتشفير الأحرف، الأولى تستخدم في لغة HTML والثانية تستخدم فقط في النسخة الأحدث من لغة الترميز HTML5
<!-- For HTML Version 4.01 --><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><!-- For HTML Version 5 --><meta charset="UTF-8" />
2. ضبط مستوى تضخيم / تصغير (Zoom Level) عرض صفحة الويب
ويعد أيضا هذا الوسم من الوسوم الهامة لضبط كيفية عرض صفحة الويب على الأجهزة المختلفة (حاسوب، تابلت، جوال ....)، ويعتبر أيضا من الأساسيات لإستخدام التصميم المتجاوب (Responsive Design)
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
3. تغيير لون شريط العنوان (Address Bar) في متصفح أجهزة الجوال
يعتبر تغيير لون شريط العنوان في متصفح أجهزة الموبايل ليتماشى مع الألوان المستخدمة في الموقع من الأشياء الجيدة من منظور تجربة المستخدم (User Experience) أو المعروفة بـ UX، حيث يعطي المستخدم إنطباع بأنه يستخدم تطبيق خاص بالموقع، وليس مجرد صفحة ويب، مما يعود بالإيجاب على الموقع، ويتم ذلك من خلال إضافة وسم meta التالي (مع مراعاة تغيير اللون المستخدم في الوصف content)
<meta name="theme-color" content="#014656" />
4. إعادة تحميل صفحة الويب - Reload
يستخدم هذا الأمر لإعادة تحميل محتوى صفحة الويب كل فترة زمنية كـ 10 ثوان أو 30 ثانية أو أي قيمة يتم تحديدها، وهذا الأمر كان يتم إستخدامه في بعض تطبيقات الويب مثل مواقع المحادثة Chat، ولكن مع تطور تكنولوجيا الويب وظهور التقنيات الحديثة مثل تقنية الـ AJAX أصبحت إستخداماته قليلة جدا أو حتى تكاد تكون معدومة
<meta http-equiv="refresh" content="10" />
5. إعادة توجيه صفحة الويب إلى صفحة أخرى في خلال مدة زمنية محددة - Redirect
حيث يمكنك تحويل مستخدم موقعك من صفحة ويب ما، إلى صفحة أخرى خلال 10 ثوان، ولكي تقوم بذلك نستخدم نفس الكود الخاص بإعادة تحميل صفحة الويب مع إضافة الرابط الذي ترغب في تحويل المستخدم إليه، والفترة الزمنية التي يتوجب على المستخدم أن ينتظرها تكون بالثوان، والمثال التالي يوضح تحويل المستخدم إلى صفحة موقع أبوالفتح الرئيسية خلال 15 ثانية
<meta http-equiv="refresh" content="15; url=https://abuelfateh.com/" />
6. وصف محتوى صفحة الويب - Description
يستخدم وسم الـ meta لوصف محتوى صفحة الويب، ويعد هذا الوصف من أهم إستخدامات وسم الميتا تاج، فهو عنصر أساسي من أجل عملية تحسين محركات البحث، حيث يتم إستخدام هذا الوصف من قبل محركات البحث بحيث يتيح لك محرك البحث التحكم في النص الذي يظهر للمستخدم أثناء إظهار نتائج البحث، وعادة ما يتوجب عليك الإهتمام بالمحتوى الذي يتم كتابته لوصف محتوى صفحة الويب لأن مستخدم محركات البحث عادة ما يقرر زيارة موقعك من خلال قراءة هذا الوصف، ويفضل أن لا يتجاوز 200 حرف، وأن يكون محتوى غير مضلل أي أنه يحتوي فعليا على وصف دقيق لمحتويات صفحة الويب
<meta name="description" content="this is the description of page content" />
7. الكلمات الدلالية (المفتاحية) - Keywords
تستخدم الميتا تاج لإضافة بعض الكلمات الدلالية الخاصة بصفحة الويب، ويتم إستخدام هذه الكلمات من قبل محركات البحث لتصنيف صفحة الويب الخاصة بك، بحيث يظهر موقعك عندما يقوم المستخدم بالبحث عن هذه الكلمات، في السابق كان هذا الوسم مؤثر بشكل كبير على الظهور في نتائج البحث ولكن لسوء إستخدامه من قبل بعض المطوريين أصبح الإعتماد على هذا الوسم ضعيف جدا من قبل محركات البحث، ولكن ما زال يفضل إضافته إلى الموقع لأنه قد يؤثر بشكل أو بآخر على ترتيب موقعك في محركات البحث، والمثال التالي يوضح كيفية تحديد الكلمات المفتاحية من خلال وسم الميتا تاج
<meta name="keywords" content="abuelfateh, abu elfateh, aboelfateh, abo elfateh" />
8. تحسين الظهور في مواقع التواصل الإجتماعي - Open Graph
يستخدم وسم الميتا OG للتحكم في كيفية ظهور الروابط الخاصة بموقعك في وسائل التواصل الإجتماعي، حيث يمكنك التحكم في عنوان الصفحة، أو الوصف الخاص بالصفحة أو الصورة التي تظهر للمستخدم، والعديد من الخصائص الأخرى، ويتم ذلك بإضافة وسم الـ OG متبوعا بنقطتين (Colon) ثم العنصر أو الوصف الذي تريد تغييره، ويتم ذلك كالتالي
<meta name="og:title" content="Title appears on Social Media shared link" /><meta name="og:description" content="Discription appears on Social Media shared link" /><meta name="og:url" content="https://abuelfateh.com/blog/" /><meta name="og:image" content="https://static.abuelfateh.com/imgs/logo.jpg" />
ويستخدم وسم الميتا تاج في العديد من الأشياء الأخرى، حيث يمكن أن يستخدم لإثبات ملكية الموقع وربط الموقع بالأدوات الخاصة بإدارة الموقع مثل Google Webmaster Tools، أو Google Analytics أو غيرها من الأدوات، ويستخدم أيضا في العديد من الإستخدامات المتعلقة بـ Search Engine Optimization أو ما يطلق عليها SEO، والكثير من الإستخدامات الأخرى، ولكن الإستخدامات التي ذكرتها تعتبر أهم إستخدامات لوسم الـ meta tag (من وجهة نظري).
وفي النهاية إترك تعليق إن كان هناك أي إستخدام هام لم أقم بذكره في هذا المقال.
