العنصر Meta

تعريف العنصر Meta

يُستخدم العنصر <meta> عادةً لتوفير بيانات تعريف منظمة مثل الكلمات الأساسية لصفحة الويب والوصف واسم المؤلف وترميز الأحرف والبيانات الوصفية الأخرى. يمكن وضع أي عدد من عناصر <meta> داخل العنصر <head> من صفحة HTML أو XHTML .
لن يتم عرض البيانات الوصفية على صفحة الويب ، ولكن سيتم تحليلها آليًا ، ويمكن استخدامها بواسطة المتصفحات أو محركات البحث مثل Google أو خدمات الويب الأخرى.

إعلان ترميز الأحرف لصفحة الويب

يُستخدم العنصر <meta> عادةً للإعلان عن ترميز الأحرف داخل صفحة HTML.

مثال
تشغيل
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Declaring Character Encoding</title>
  5. <meta charset="utf-8">
  6. </head>
  7. <body>
  8. <p>Hello World!</p>
  9. </body>
  10. </html>
ملاحظة:

UTF-8 هو ترميز أحرف متعدد الاستخدامات وموصى به وخاصة للغة العربية . ومع ذلك ، إذا لم يتم تحديد ذلك ، فسيتم استخدام الترميز الافتراضي لنظام التشغيل المستخدم.

إضافة معلومات مؤلف المستند (صفحة الويب)

يمكننا أيضًا استخدام العنصر <meta> لتحديد بوضوح من هو مؤلف أو منشئ صفحة الويب.
يمكن أن يكون المؤلف فردًا أو شركة وما إلى ذلك.

مثال
تشغيل
  1. <head>
  2. <title>Defining Document's Author</title>
  3. <meta name="author" content="Murad">
  4. </head>

الكلمات المفتاحية Keywords والوصف Description وفائدتها لمحركات البحث

تستخدم بعض محركات البحث عناصر <meta> الخاصة بالكلمات المفتاحية keywords والأوصاف descriptions لفهرسة صفحات الويب ؛ ولكن هذا قد لا ينطبق على جميع محركات البحث.
تعطي الكلمات المفتاحية اهمية إضافية لصفحة الويب إضافة إلى ان الكلمات المفتاحية والوصف الخاص بالمستند تكون عبارة عن ملخص قصير للصفحة. إليك مثال:

مثال
تشغيل
  1. <head>
  2. <title>Defining Keywords and Description</title>
  3. <meta name="keywords" content="HTML, CSS, javaScript">
  4. <meta name="description" content="موقع مختص بتعليم تقنيات تطوير الويب">
  5. </head>

تهيئة إطار العرض للأجهزة المحمولة

يمكنك استخدام العنصر <meta> الخاص بإطار العرض لعرض صفحات الويب بشكل صحيح على الأجهزة المحمولة.
بدون وجود العنصر <meta> الخاص بإطار العرض ، تعرض متصفحات الويب الخاصة بالهواتف المحمولة صفحات الويب عند عرض شاشة سطح المكتب النموذجي ، ثم تقلص حجمها لتناسب شاشة الجوال. ونتيجة لذلك ، يتطلب الأمر التكبير والتصغير لعرض صفحة الويب بشكل صحيح في الأجهزة المحمولة ، وهو أمر غير مريح للغاية.

مثال
تشغيل
  1. <head>
  2. <title>Configuring the Viewport</title>
  3. <meta name="viewport" content="width=device-width, initial-scale=1">
  4. </head>

تعمل القيمة width=device-width الموجودة داخل السمة content على تحديد عرض إطار العرض على نفس عرض الشاشة للجهاز ، في حين تقوم القيمة initial-scale=1 بتعيين المقياس الأولي أو مستوى التكبير إلى 100٪ عند تحميل الصفحةً بواسطة متصفح الويب.

نصيحة:

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

« التالي السابق »