لا بد أنك قد سمعت عن أهمية وسم meta في تهيئة الصفحات لمحركات البحث، فما هي خصائص والأنواع لوسم ميتا meta.
اوسبيلدونغ شرطي في …اوسبيلدونغ شرطي في المانيا | كهف المعرفة
ما هو وسم meta؟
هو كود أو وسم تتم كتابته داخل head للصفحة، وتعني المصطلح metadata أي دليل المعلومات للصفحة المطلوبة، وهذا الجزء مهم جدًا حيث تكتب أكواد وسم meta في كل صفحة html من مشروعك، كما أن هناك بعض محررات الأكواد تعرض لك اختصار لتعبئة كل صفحة بأسطر من هذا الوسم كما هو الحال في المحرر VSCode.
خصائص وسم meta
- إن وسم meta لا يتضمن وسم للإغلاق وإنما وسم واحد فقط وهو <meta>
- يمكن كتابته أكثر من مرة بخصائص مختلفة بدون أي مشاكل.
- لا يؤثر على محتوى عناصر الصفحة بشكل مباشر.
- الصيغة العامة لوسم الميتا meta هو:
<“المحتوى أو البيانات الوصفية”=content “اسم الخاصية”=meta name>
“اقرأ أيضًا عن: تخصص أمن المعلومات، وضرورة دراسة وسائل الأمان للإنترنت“
أهمية كتابة وسم meta في html
إن وسم meta من أهم الوسوم في أي صفحة إلكترونية مكتوبة بلغة التصميم html، وذلك لأنها تعطي معلومات حول ملف html للخوادم مثل عناكب محركات البحث أو حتى عند مشاركة هذه الصفحة على وسائل التواصل مثل تويتر وغيره من منصات التواصل الاجتماعي، حيث توجد هناك طرق عرض افتراضية تختلف على حسب الموقع، لذا من خلال وسم ميتا يمكنك التعديل عليها كيفما تريد.
يحتوي وسم ميتا على خاصيتين الأولى هي name أو الاسم وتضع فيها نوع الوسم المستخدم، وتكون القيمة بين علامتي تنصيص وكذلك الخاصية content أي محتوى النوع المذكور، كما هو مذكور في الصيغة العامة السابقة.
ملاحظة: قد تذكر بعض الخواص مباشرًا بدل كلمة name.
أهم أنواع وسم meta
هناك مجموعة واسعة جدًا من أنواع وسم mete تختلف من حيث الأهمية والحاجة فمثلًا إذا كنت لا تستخدم تويتر في مشاركة روابط موقعك فلن تحتاج إلى نوع معين وهكذا، لكن إذا كنت تخطط لمشاركتها في المستقبل فيفضل كتابتها وذلك لعدم تأثيرها.
ملاحظة: تكتب جميع أكواد وسم meta في جزء head من الصفحة.
الملائمة على مختلف الهواتف
يمكن استخدام الخاصية viewport لكي تعمل صفحتك على أي جهاز هاتف حيث تطلب من أن العرض للصفحة يكون بمسافة العرض للجهاز نفسه، وذلك بالكود التالي:
<“meta name=”viewport” content=”width= device-width, initial-scale = 1.0>
وسوم الميتا للتهيئة لمحركات البحث
يوجد نوعان رئيسيان من وسم ميتا لتحديد العبارات المفتاحية ووصف الميتا الذي يظهر في نتائج البحث، إذا كنت تريد أن تكون من صفحاتك أن تتصدّر القائمة فيجب عندها مراعاة شروط السيو مثل كتابة عبارات مفتاحية تعبّر عن محتوى الصفحة أي يجب أن تكون موزّعة بالتساوي داخل المحتوى ومكررة بنسبة بين 1.5 -2 %تقريبًا، وكذا وجودها في وصف المقتطف بالإضافة إلى الصور والروابط الداخلية والخارجية وغيرها من الشروط.
تحديد مؤلف الصفحة
أيضا يمكن تحديد المؤلف للصفحة من خلال إضافة كتابة وسم meta التالي:
<“meta name=”author” content=”SalehLardhi>
تحديد الكلمة المفتاحية للصفحة
تعد هذه الطريقة مهمة للغاية لتصدّر صفحات موقعك في محركات البحث حيث تعطي معلومات حول الكلمات المفتاحية المستهدفة في محتوى الصفحة ووصف المقتطف الصغير الذي يظهر في نتائج البحث ويكتب هذا النوع كالتالي:
<“meta name=”keywords” content=”learn russian, russian learning>
حيث تقوم بكتابة جميع الكلمات المفتاحية المستهدفة للصفحة في content مع إمكانية كتابة أكثر من عبارة مفتاحية من خلال الفصل بين العبارات بالفاصلة فقط.
تحديد وصف الميتا أو ما يسمى المقتطف
يتم كتابة وصف المقتطف في content بالصورة التالية:
<“…meta name=”description” content=”the easiest ways to learn russian in 7 days>
هذا الوصف يظهر مباشرةً في نتائج البحث ويفضّل أن يكون طوله ما بين 135 – 160 حرف، ولا يزيد تكرار العبارة المفتاحية فيه عن مرتين.
ضبط التعريف لنوع المحارف
ربما فتحت صفحتك على متصفح فايرفوكس وظهرت الفقرات بطريقة غير مفهومة، قد تكون المشكلة في ذلك أن المتصفح لم يتعرف على طريقة الترميز، لذا يفضل تحديد نوع الترميز من خلال وسم meta بالكود التالي:
<“meta chatset=”UTF-8>
حيث استخدمنا نوع الترميز UTF-8 كونه الأكثر استخدامًا وكذا لأنه يدعم اللغة العربية ومعظم اللغات في العالم إن لم تكن جميعها.
تحديث الصفحة http-equiv
يمكن استخدام الخاصية http-equiv لأداء عدد من المهام وأهمها تحديث الصفحات بعد مدة محددة، حيث يمكن إعطاء أمر لتحديث الصفحة بعد مدة تقوم بعينها من خلال وسم ميتا، كما هو موضح في الكود التالي:
<“meta http-equiv=”refresh” content=”30>
في هذا الكود ستتحدث الصفحة كل 30 ثانية، ويمكنك تحديد عدد الثواني بنفسك.
كيفية مشاركة الصفحة على وسائل التواصل
يمكن التحكم بالصورة التي تظهر بها صفحتك الإلكترونية عند مشاركتها على الفيس بوك أو التويتر وغيرها، حيث توجد الكثير من هذه الأكواد لكل منصة، أهم عناصر التحكم فيها هي العنوان، والوصف والصورة المراد عرضها كصورة بارزة، مثل أكواد التويتر التالية:
<“meta name=”twitter:title” content=”faharas net>
<“meta name=”twitter:description” content=”main page description for this website>
<“meta name=”twitter:image” content=”The link>
كما توجد أكواد الفيسبوك لوسم meta تختلف تمامًا عن الأكواد السابقة حيث تبدأ بالعبارة property=og:title.
“اقرأ أيضًا: التصميم الجرافيكي، ما هي أنواعه؟“
مثال توضيحي لصفحة بها وسوم meta
في هذا المثال التوضيحي نكتب مجموعة أكواد وسم الميتا معًا في صفحة واحدة كما هو مبين في الصورة التالية:مجموعة وسوم ميتا
حيث تكون النتيجة عند البحث في محرك البحث قوقل أو ياندكس مشابهة للصورة التالية:نتيجة البحث في قوقل
قد توجد هناك أدوات كما في أنظمة إدارة المحتوى تضع هذه الأكواد تلقائيًا مع واجهة مستخدم أفضل، لكن فهمك للكود أفضل في حال كنت تريد التطور.
