انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 30
دورة لغة HTML

عنصر meta في لغة HTMLHTML Meta Element

سوف تتعلم في هذا الدرس كل ما يتعلق بعنصر [meta]، والذي يُكتب دائمًا داخل عنصر head في صفحة HTML، بالإضافة إلى الخصائص التي تضاف إليه مثل [charset] وغيرها.

ابدأ التعلّم استكشف الأمثلة
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
8
الأمثلة
9
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
11,538
محتوى الدرس
في هذا الدرس 8تصفّح المواضيع

HTML Meta Element عنصر meta في لغة HTML

يُستخدم عنصر <meta> لإضافة بيانات وصفية [metadata] تساعد المتصفحات ومحركات البحث في فهم محتوى صفحة HTML.

عنصر <meta> وعلاقته بصفحة HTML:

  • يُكتب عنصر <meta> داخل عنصر <head> في صفحة HTML.

  • عنصر <meta> هو عنصر فارغ [empty element] وله علامة فتح <meta> فقط.

  • لا يمكن كتابة أي عناصر HTML أخرى داخل عنصر <meta>.

  • يمكن تكرار عنصر <meta> في صفحة الويب بحسب الحاجة.

  • يتم تحديد نوع البيانات الوصفية باستخدام الخاصية [name]، بينما يتم تحديد قيمتها باستخدام الخاصية [content].

  • يُنصح باستخدام عناصر <meta> لتوفير معلومات إضافية للمتصفحات ومحركات البحث، مما يساعد في تحسين ظهور الصفحة وفهرستها.

name مع content يصفان نوعًا من البيانات؛ يستخدم meta أيضًا charset للترميز وhttp-equiv لتعليمات محددة، كما في الأقسام التالية.

HTML meta charset Attribute خاصية charset مع عنصر meta في لغة HTML

تُستخدم خاصية [charset] مع عنصر [meta] لتحديد طريقة ترميز الحروف [character encoding] المستخدمة في ملف HTML. فبعض اللغات مثل اللغة العربية لا تظهر بشكل صحيح أو لا يتعرف عليها المتصفح إذا لم يتم تحديد الترميز المناسب، وقد تظهر الأحرف على شكل علامات استفهام أو رموز غريبة.

لذلك، نضيف خاصية [charset] إلى عنصر [meta] ونعطيها القيمة utf-8، التي تدعم معظم لغات العالم ومنها العربية، لكي يتمكن المتصفح من عرض النصوص بشكل صحيح.

احفظ الملف نفسه بترميز UTF-8 وضع إعلان meta كاملًا ضمن أول1024بايت. قد يعرف المتصفح الترميز من ترويسة HTTP أوBOM، لذلك غياب meta لا يضمن تلف النص دائمًا. المثالان يوضحان فك الترميز من بايتات الملف في المحرر المحلي.

Meta tags charset without UTF8

قد لا تظهر الأحرف باللغة العربية بشكل صحيح إذا لم تضف خاصية [meta charset] بالقيمة [UTF-8] في صفحة HTML.

HTML 
<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <h1>بسم الله الرحمن الرحيم</h1>
  </body>
</html>
جرّب بنفسك

Meta tags charset with UTF8

تظهر الأحرف باللغة العربية بشكل صحيح عند إضافة خاصية [meta charset] بالقيمة [UTF-8] في صفحة HTML.

HTML 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>بسم الله الرحمن الرحيم</h1>
  </body>
</html>
جرّب بنفسك

Meta keywords in HTML الكلمات المفتاحية مع عنصر meta في لغة HTML

يمكنك استخدام عنصر <meta> لتحديد الكلمات الرئيسية المتعلقة بمحتوى المستند بوضع keywords قيمةً لسمة name. على الرغم من أن محركات البحث كانت تعتمد على هذه الكلمات في السابق أثناء فهرسة الصفحات، فإن Google Search لا يستخدم meta keywords للفهرسة أو الترتيب إطلاقًا؛ لا تُعد وسيلة لتحسين ترتيبه، ولا يُعمم ذلك على كل أداة قد تقرأ البيانات الوصفية.


الكلمات الدلالية أو المفتاحية keywords مع عنصر meta:

  • يتم تحديد نوع البيانات الوصفية [metadata]  داخل عنصر [meta] باستخدام الخاصية [name].

  • توضع الكلمات المفتاحية في الخاصية [content].

  • يتم الفصل بين كل كلمة مفتاحية وأخرى باستخدام علامة الفاصلة [,].

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

  • يُفضل أن تكون الكلمات المفتاحية مستخدمة فعليًا داخل نص صفحة الويب.

  • من الأفضل تحديد كلمات دلالية مناسبة لكل صفحة ويب بشكل منفصل.

Meta Tags keywords

الكلمات الدلالية والمفتاحية مع عنصر meta في لغة HTML.

HTML 
<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags keywords</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>
   <body>
      <h1>Meta Tags keywords</h1>
   </body>   
</html>
جرّب بنفسك

Meta description in HTML وصف صفحة الويب مع عنصر meta في لغة HTML

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

  • يتم تحديد نوع [meta] عن طريق خاصية [name] مع القيمة [description].

  • يتم كتابة الوصف داخل خاصية [content] لعنصر [meta].

  • لا يمكن تكرار [meta description] في نفس صفحة الويب أكثر من مرة.

  • يفضل وصف مميز ودقيق لكل صفحة؛ تكرار النص عبر صفحات مختلفة ليس حظرًا تقنيًا في HTML، لكنه لا يساعد على تمييز نتائجها.
وصف صفحة الويب مع عنصر meta في لغة HTML

Meta tags description

المحتوى النصي داخل خاصية content في عنصر meta description لا يظهر للمستخدم في الصفحة، وقد يختاره محرك البحث للمقتطف؛ ظهوره نفسه ليس مضمونًا.

HTML 
<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags description</title>
      <meta name="description" content="Meta Tags description Free HTML tutorials from closetag.com ">
   </head>
   <body>
      <h1>Meta Tags description</h1>
   </body>   
</html>
جرّب بنفسك

Meta author in HTML إضافة اسم المؤلف داخل عنصر meta في لغة HTML

يمكنك استخدام عنصر <meta> لتحديد اسم مؤلف المحتوى الخاص بصفحة الويب بوضع author قيمةً لسمة name. يُستخدم هذا الاسم كتوثيق لمؤلف الصفحة ويمكن قراءته عبر أدوات فحص الصفحات أو بعض محركات البحث، لكن ظهوره في نتائج البحث ليس مضمونًا ويعتمد على عدة عوامل أخرى.

تحديد author اسم مؤلف المحتوى مع عنصر meta:

  • يتم تحديد نوع البيانات الوصفية داخل عنصر [meta] عن طريق الخاصية [name].

  • تكون name="author"، وتحتوي content اسم المؤلف الحقيقي.

  • يمكن أن يكون اسم المؤلف شخصًا واحدًا أو جهة أو مؤسسة.

  • يمكن كتابة اسم المؤلف بأي لغة، وليس بالضرورة الإنجليزية.

  • انسب كل صفحة إلى مؤلفها الحقيقي؛ يمكن للمؤلف نفسه كتابة صفحات متعددة.

  • لا يعتمد ظهور الصفحة في نتائج البحث عند البحث عن اسم المؤلف فقط على وجود عنصر [meta author]، بل هناك عوامل أخرى تؤثر في ذلك.

Meta tags author

اسم المؤلف المضاف داخل عنصر meta لا يظهر في صفحة المتصفح، لكن يمكن لمحركات البحث أو بعض الأدوات قراءته من خاصية content.

HTML 
<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags author</title>
      <meta name = "author" content = "Ahmed Mohamed">
   </head>
   <body>
      <h1>Meta Tags author</h1>
   </body>   
</html>
جرّب بنفسك

Meta refresh in HTML إعادة تحميل أو تحديث صفحة HTML بعد وقت زمني محدد

يمكنك استخدام عنصر <meta> لتحديث صفحة HTML تلقائيًا بعد فترة زمنية محددة، وذلك عن طريق تعيين الخاصية [http-equiv] بالقيمة [refresh]، وتحديد عدد الثواني والعنوان المطلوب الانتقال إليه داخل الخاصية [content].

تحديد الوقت الزمني للتحديث مع عنصر meta:

  • يتم تحديد التحديث التلقائي باستخدام الخاصية [http-equiv] في عنصر [meta]، وتكون قيمتها [refresh].

  • لا يُستخدم اسم أو نوع البيانات الوصفية مع الخاصية [name] في هذا السياق.

  • يتم تحديد الوقت الزمني للتحديث في داخل الخاصية [content]، ويمكن تحديد مسار صفحة HTML أخرى أو نفس الصفحة بعده.

  • يتم الفصل بين عدد الثواني ومسار الصفحة في الخاصية content بواسطة علامة الفاصلة المنقوطة [;].

  • يُنصح بعدم استخدام أكثر من عنصر [meta] من النوع [refresh] في نفس صفحة الويب لتجنب سلوك غير متوقع.

Meta tags refresh

يتم إعادة تحميل الصفحة تلقائيًا بعد مرور عدد الثواني المحدد في خاصية content، كما يمكن تحديد عنوان صفحة أخرى للانتقال إليها بعد انتهاء الوقت.

HTML 
<!DOCTYPE html>
<html>
   <head>
      <title>Meta refresh Tag</title>
      <meta http-equiv="refresh" content="3">
   </head>
   <body>
      <h1>Meta refresh Tag</h1>
   </body>   
</html>
جرّب بنفسك

Meta refresh in HTML with another page

يتم الانتقال تلقائيًا إلى الصفحة المحددة في خاصية content بعد مرور عدد الثواني المضاف، حيث يقوم المتصفح باحتساب الوقت وتنفيذ إعادة التوجيه تلقائيًا.

HTML 
<!DOCTYPE html>
<html>
   <head>
      <title>Meta refresh Tag</title>
      <meta http-equiv="refresh" content="3; url=/courses.html">
   </head>
   <body>
      <h1>Meta refresh Tag</h1>
   </body>   
</html>
جرّب بنفسك

Meta robots in HTML تعليمات محركات البحث مع عنصر meta في لغة HTML

يمكنك استخدام عنصر <meta> لإعطاء تعليمات لمحركات البحث حول كيفية فهرسة الصفحة أو التعامل مع الروابط الموجودة فيها، وذلك عن طريق تعيين الخاصية [name] بالقيمة [robots]، وتحديد التعليمات المطلوبة داخل الخاصية [content].

تحديد تعليمات robots مع عنصر meta:


  • يتم تحديد اسم التعليمات باستخدام الخاصية [name] وتكون قيمتها [robots].

  • تُكتب تعليمات الفهرسة أو تتبع الروابط داخل الخاصية [content] مثل: [index, follow] أو [noindex, nofollow].

  • يمكن استخدام أكثر من قيمة مفصولة بفاصلة داخل الخاصية [content].

  • قيم التعليمات الرئيسية هي: index [فهرسة الصفحة]، و noindex [عدم الفهرسة]، و follow [تتبع الروابط]، و nofollow [عدم تتبع الروابط].

  • يُنصح بتخصيص تعليمات robots المناسبة لكل صفحة بحسب الهدف من ظهورها أو إخفائها في نتائج البحث.

index وfollow هما الوضع الافتراضي لدى Google ولا يلزم كتابتهما. السماح بالفهرسة لا يضمن إدراج الصفحة أو ترتيبها، وهذه التعليمات ليست وسيلة لحماية محتوى خاص.

Meta tags robots

المثال التالي يسمح لمحركات البحث بفهرسة الصفحة وتتبع روابطها؛ لا يفرض الفهرسة أو زيارة كل رابط.

HTML 
<!DOCTYPE html>
<html>
<head>
  <title>Meta Robots Tag</title>
  <meta name="robots" content="index, follow">
</head>
<body>
  <h1>Meta Robots Tag</h1>
</body>
</html>
جرّب بنفسك

Meta viewport in HTML إعدادات منطقة العرض مع عنصر meta في لغة HTML

منطقة العرض [viewport] هي الجزء المرئي للمستخدم من صفحة الويب، وتختلف بحسب نوع وحجم الجهاز؛ فهي أصغر على الهواتف المحمولة وأكبر على أجهزة الحاسوب. يمكنك استخدام عنصر <meta> للتحكم في أبعاد العرض لجعل تصميم موقعك متجاوبًا وملائمًا لشاشات الأجهزة المختلفة.


تكتب viewport قيمةً لسمة name، حيث يُكتب إعداد ضبط المنطقة داخل الخاصية [content]، مثل: [width=device-width, initial-scale=1.0].

  • الجزء [width=device-width] يضبط عرض منطقة التخطيط على عرض الجهاز بوحدات CSS pixels؛ لا يصلح وحده عناصر ذات عرض ثابت يتجاوز الشاشة.

  • بينما يقوم الجزء [initial-scale=1.0] بتحديد نسبة التكبير أو التصغير الافتراضية التي تظهر بها الصفحة عند تحميلها لأول مرة.


هناك خصائص أخرى يمكن إضافتها إلى meta viewport، مثل:

  • [maximum-scale] و [minimum-scale]: لتحديد الحدّ الأقصى والأدنى للتكبير.

  • [user-scalable]: للسماح أو منع المستخدم من تغيير مستوى التكبير.


عادةً ما يُنصح دائمًا باستخدام [<"meta name="viewport" content="width=device-width, initial-scale=1.0>] كخطوة لضبط العرض على الهاتف؛ يلزم أيضًا CSS متجاوب وصور وعناصر مرنة. تجنب تعطيل تكبير المستخدم لأنه يضر بإتاحة القراءة.


Meta tags viewport

المثال التالي يحدد إعدادات منطقة العرض [viewport] لضبط منطقة التخطيط؛ لا يثبت هذا المثال وحده أن أي تصميم صار متجاوبًا.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>Meta Viewport Tag</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Meta Viewport Tag</h1>
</body>
</html>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…