القائمة الرئيسية

الصفحات

آخر الأخبار

وسم الميتا تاج - Meta Tage و إستخداماته

ما هو وسم Meta الميتا أو ما يعرف بـالميتا تاج Meta Tage ؟ 

هو عبارة عن وسم من وسوم لغةHTML العالمية لتصميم صفحات الويب، حيث إن وسم وهو وسم الميتا تاج - Meta Tage يستخدم في وصف صفحة الويب WEB، و إعطاء معلومات عن صفحة الويب الخاصة بك أو أي صفحى على الشبكة العنكبوتية، ومعلومات الميتا تاج Meta Tage لا يتم عرضها في صفحة الويب.

يتألف وسم الميتا تاج - Meta Tage من الوسم </meta> وعادة ما يحتوي هذا الوسم على مجموعة من الخصائص مثل name و content، وهو من الاوسمة التي ليس لها وسم أغلاق ،و يكون موقع وسم الميتا تاج - Meta Tage دائماً داخل الهيد <head>.

meta html
meta html

Meta Tag - كيف أستخدم وسم الميتا ؟!

يمكن تقسيم وسم الميتا تاج - Meta Tage من حيث الإستخدامات إلى قسمين وهما: 
  1. إعطاء تعليمات للمتصفح عن لغة صفحة الويب و كيفية عرض الصفحة
  2. إعطاء معلومات عن موقعك لمواقع التواصل الأجتماعي مثل فيس بك و تويتر و يوتيوب ،و محركات البحث مثل Bing و Google، وفي هذا النوع يتم تحديد كيفية عرض موقعك في محركات البحث المشهورة أو مواقع السوشل ميديا.

Meta Tage - أهم إستخدامات الميتا تاج

  • Character Encoding - تحديد الترميز الإفتراضي لتعامل مع اللغة :

("UTF-8")  ويعتبر من أهم إستخدامات وسم الميتا تاج - Meta Tage حيث يتم من خلاله تحديد نوع تشفير اللغة و الارقام و الحروف  لموقع الانترنت ، أو بمعنى آخر تمكين مصمم صفحات الويب بعرض صفحته لكل العالم عبر التشفير                      </"meta charset="UTF-8 > حيث يعتبر الترميز("UTF-8") هو الترميز المعتمد عالمية لانه يدعم الحروف العربية و الاتينية و غيرها  و يعرض الصفحة بشكل صحيح لذالك لا بد من أستخدام </"meta charset="UTF-8 >

ويوجد نوعين لكتابة الأكواد الخاصة اللغة و الحروف و هي"
  1. تستخدم في لغة HTML 
  2.  تستخدم في لغة HTML5
<!-- HTMLتستخدم في لغة -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- HTML5تستخدم في لغة -->
<meta charset="UTF-8" />

  • ضبط مستوى حجم الصفحة و التناسب مع الهاتف و الأجهزة الوحية و الكمبيوتر..الخ

ويعد أيضا هذا الوسم من الوسوم الهامة لضبط حجم الصفحة على الشاشات المختلفة  (الهاتف الجوال و الأجهزة الوحية و الحاسوب و شاشات التلفاز و شاشات العرض الضخمة ..الخ)، ويعتبر أيضا من الأساسيات لإستخدام التصميم المتجاوب مع الأجهزة المختلفة (Responsive Design).
<!-- تنسيق حجم صفحة الويب -->
<meta name="viewport"content="width=device-width, initial-scale=1.0" />

  •  تغيير لون شريط العناوين (Address Bar) في متصفحات أجهزة الجوال المحمول

 لغة HTML تتيح لمستخدميها أستخدام وسم الميتا تاج - Meta Tage الخاص ب تغيير لون شريط العناوين ليظهر للمستخدم على انه يستخدم تطبيق أندرويد ذكي و تعمل هذه الخاصية أيضاً عند الأنتقال للوضع المظلم و يعتبر تغيير لون شريط العنوان في متصفح أجهزة الهاتف الجوال ليتناسق مع الألوان المستخدمة في صفحة الويب و الموقع  من الأشياء الجيدة من منظور تجربة المستخدم (User Experience) أو المعروفة بـ (UX)، مما يعود بنفع الكبير للمستخدم وللموقع، ويتم ذلك من خلال إضافة وسم meta التالي (مع مراعاة تغيير اللون المستخدم في الوصف content).
<!-- لون شريط العناوين -->
<meta name="theme-color"content="#014655" />

  • Reload - إعادة توجيه صفحة الويب (صفحة إعادة التوجيه)

صفحة إعادة التوجيه
صفحة إعادة التوجيه


يستخدم هذا الأمر لإعادة توجيه محتوى صفحات الأنترنت و يحدد صاحب الموقع الإلكتروني زمن إعادة التوجيه كما يريد مثلا من  10 ثوان الى 30 ثانية أو أي قيمة يتم إختيارها ، وهذا الأمر كان يتم إستخدامه في بعض البرامج و التطبيقات الذكية مثل مواقع المحادثة (Chat)، ولكن مع تطور تكنولوجيا الويب وظهور التقنيات الحديثة مثل تقنية الـ AJAX أصبحت إستخداماته قليلة جدا أو حتى تكاد تكون معدومة و لكن يستخدمها بعض المدونين لزيادة أرباحهم عبر محركات البحث الشهيرة.
<!-- إعادة توجيه صفحات الويب -->
<meta http-equiv="refresh"content="30" />

  • Redirect إعادة توجيه صفحة الويب إلى موقع آخر أو صفحة أخرى في خلال مدة زمنية محددة

  حيث يمكنك تحويل مستخدم موقعك من صفحة ويب ما، إلى صفحة أخرى خلال 10 ثوان، ولكي تقوم بذلك نستخدم نفس الكود الخاص بإعادة توجيه الروابط والصفحات مع إضافة الرابط الذي ترغب في تحويل المستخدم إليه، والفترة الزمنية التي يتوجب على المستخدم أن ينتظرها تكون بالثوان، والمثال التالي يوضح تحويل المستخدم إلى صفحة موقع أبوالفتح الرئيسية خلال 15 ثانية حيث يستخدمها بعض المدونين لزيادة أرباحهم عبر محركات البحث الشهيرة.
<!-- إعادة توجيه صفحات الويب لرابط خارجي -->
<meta http-equiv="refresh"content="20; url=https://alimne.com/" />

  • Description - وصف محتوى صفحة الويب

يستخدم وسم الـ meta لوصف موقعك و محتوى صفحة الويب، وهو من أهم إستخدامات وسم الميتا تاج - Meta Tage، فهو عنصر أساسي من أجل عملية تحسين محركات البحث( Google,Bing,Yahoo)، حيث يتم إستخدام هذا الوصف من قبل محركات البحث العالمية بحيث يتيح لك محرك البحث التحكم في النص الذي يظهر للمستخدم أثناء إظهار نتائج البحث التي يبحث عنها المستخدم، وعادة ما يتوجب عليك الإهتمام بالمحتوى الذي يتم كتابته لوصف محتوى صفحة الويب لأن مستخدم محركات البحث عادة ما يقرر زيارة موقعك من خلال قراءة هذا الوصف، ويفضل أن لا يتجاوز300 حرف، وأن يكون محتوى غير مضلل .
<!-- الميتا الخاصة في وصف صفحات الويب -->
<meta name="description"content="هنا نضع وصف محتوى صفحة الويب" />

  • Keywords - الكلمات الدلالية (المفتاحية)

تستخدم الميتا تاج- Meta Tage لإضافة بعض الكلمات الدلالية الخاصة بموقعك، ويتم إستخدام هذه الكلمات من قبل محركات البحث لتصنيف الموقع الخاصة بك، بحيث يظهر موقعك عندما يقوم المستخدم بالبحث عن هذه الكلمات (Keywords)، في الماضي كان هذا الوسم ("meta name="keywords>)مؤثر بشكل كبير على الظهور في نتائج البحث ولكن بسبب سوء إستخدامه من قبل بعض المطوريين أصبح الإعتماد على هذا الوسم ضعيف جدا جدا من قبل محركات البحث المعروفة، ولكن لا يزال يفضل إضافته إلى الموقع لأنه قد يؤثر بشكل أو بآخر على ترتيب موقعك في محركات البحث.
<!-- الكلمات المفتاحية -->
<meta name="keywords" content="alimne, html, تعلم html, meta تعلم كل ما يخص ال" />

  •  Open Graph - تحسين الظهور في مواقع التواصل الإجتماعي

يستخدم وسم الميتا "Open Graph) "OG) للتحكم في كيفية ظهور الروابط الخاصة بموقعك الإلكتروني في وسائل التواصل الإجتماعي"Social Media"، حيث يمكنك التحكم في عنوان الصفحة، أو الوصف الخاص بالصفحة أو الصورة التي تظهر للمستخدم، والعديد من الخصائص الأخرى و المميزه ، ويتم ذلك بإضافة وسم الـ ("OG") متبوعا بنقطتين (Colon) ثم العنصر أو الوصف الذي تريد تغييره.
<!-- الميتا الخاصة في تحسين الظهور على مواقع التواصل الإجتماعي -->
<meta name=" og:title " content="يظهر العنوان على الرابط المشترك لوسائل التواصل الاجتماعي" />
<meta name=" og:description " content="يظهر الوصف على رابط التواصل الاجتماعي المشترك" />
<meta name=" og:url " content="رابط الموقع" />
<meta name=" og:image " content="لوجو الموقع" />
ولوسم الميتا أستخدامات عديدة و خاصة أنه يؤثر على ("Search Engine Optimization") أو ما يطلق عليه ب SEO  السي يو
وسم الميتا تاج - Meta Tage مميز جداً حيث أنه يؤثر أيضاً على Google Analytics و نسبة القبول في قوقل أدسنس تزداد و أيضاً يستخدم وسم الميتا تاج - Meta Tage في أثبات ملكية الموقع Google Webmaster Tools.
و هكذا نكون قد تعلمنا كل ما يخص وسم الميتا تاج - Meta Tage في لغة HTML 
و كما ذكرت سابقاً لتحسين ظهورك على محركتات البحث Google ,Bing,Yahoo و أيضاً مواقع السوشل ميديا Facebook, ,Twitter, instagram و غيرها من المواقع فعليك أستخدام وسم الميتا تاج - Meta Tage في لغة HTML بطريقة صحيحة و منظمة لكي تتصدر نتائج البحث الأولى إن شاء الله
وفي النهاية إترك لنا تعليق لنستمر في المزيد إن شاء الله .
reaction:

تعليقات