عنصر <meta> يُستخدم لإضافة بيانات وصفية إضافية للمتصفحات ومحركات البحث في صفحة HTML داخل عنصر head.
عنصر <meta> هو عنصر empty فارغ غير مُتداخل، له open tag علامة بداية فقط.
لا يسمح بكتابة عناصر HTML أخرى داخل عنصر <meta>.
عنصر <meta> يكتب بداخل عنصر <head>.
عنصر <meta> يمكن تكراره داخل صفحة الويب أكثر من مرة.
عنصر <meta> تكتب داخله metadata البيانات الوصفية عن طريق خاصية content.
يتم تحديد أسماء وتعريفات meta داخل عنصر <meta> عن طريق خاصية name.
من الضروري استخدام عنصر <meta> في جميع صفحات الويب، وذلك لكي يعطي البيانات الوصفية لمحركات البحث.

</> HTML meta charset attribute
خاصية charset مع عنصر meta في لغة HTML

تُستخدم خاصية charset مع عنصر meta لكي تحدد نوع encoding النصوص المستخدمة في ملف HTML، حيث توجد لغات مثل اللغة عربية لا يتعرف عليها المتصفح أو يقرأها كعلامات استفهام.

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

Meta tags charset without UTF8

لا يقرأ المتصفح المحتوى النصي المكتوب باللغة العربية دون استخدام خاصية charset داخل عنصر meta، مع القيمة UTF-8.

<!DOCTYPE html>
<html>
  <head>

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

جربها بنفسك

Meta tags charset with UTF8

يقرأ المتصفح المحتوى النصي المكتوب باللغة العربية عند استخدام خاصية charset داخل عنصر meta، مع القيمة UTF-8.

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

جربها بنفسك

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

يمكنك استخدام عنصر <meta> لتحديد الكلمات الرئيسية المهمة المتعلقة بالمستند، حيث يتم قراءة الكلمات الرئيسية بواسطة محركات البحث أثناء فهرسة أو أرشفة صفحة الويب الخاصة بك، لتظهر هذه الصفحة عندما يقوم المستخدمين بالبحث عن هذه الكلمات المفتاحية.

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

يتم تحديد اسم أو نوع metadata البيانات الوصفية داخل عنصر meta عن طريق خاصية name.
يتم تحديد الكلمات المفتاحية عن طريق خاصية content.
الفاصل بين كل keywords كلمة مفتاحية هي علامة الفاصلة.
يجب انتقاء الكلمات قبل إضافتها والتحقق من أكثر الكلمات بحثاً على محركات البحث.
يجب أن تكون الكلمات المفتاحية لها علاقة بمحتوى الصفحة، ويُفضل أن تكون الكلمات موجودة في المحتوى النصي لصفحة الويب.
كل صفحة ويب لها كلمات دلالية منفصلة.

Meta tags keywords

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

<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags kewords</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>
   <body>
      <h1>Meta Tags kewords</h1>
   </body>   
</html>

جربها بنفسك

ملاحظة

لا تظهر الكلمات الدلالية والمفتاحية على المتصفح عندما يتم تحديدها وكتابتها عن طريق عنصر meta ولكن يتم قراءتها بواسطة المتصفح ومحركات البحث، كما يستطيع مطوري الويب قراءتها عن طريق inspector.

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

تُستخدم meta tag لإضافة وصف أو ملخص نصي لصفحة الويب يكون مقروء لمحركات البحث.
يظهر جزء من هذا الملخص أسفل رابط الموقع في محركات البحث، وظهور النتائج في SERP يعني Search Engine Results Page.
يعطي هذا الملخص فكرة عامة لمستخدمي محركات البحث، عن محتوى صفحة الويب.
يهم الملخص في ترتيب موقعك في محركات البحث، وذلك لكي يتصدر موقعك، ويصبح في مقدمة صفحات SERP.
يتم تحديد نوع meta عن طريق خاصية name مع القيمة description.
يتم كتابة الوصف داخل خاصية content لعنصر meta.
لا يمكن تكرار meta description في نفس صفحة الويب أكثر من مرة.
لا يمكن تكرار المحتوى النصي داخل meta description في صفحة ويب أخرى.

Meta tags description

لا يظهر المحتوى النصي على المتصفح، لكن يظهر المحتوى المكتوب في meta tags description داخل خاصية content في محركات البحث.

<!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 اسم مؤلف المحتوى الخاص بصفحة الويب، حيث يتم قراءة هذا الاسم بواسطة محركات البحث أثناء فهرسة أو أرشفة صفحة الويب الخاصة بك، لتظهر هذه الصفحة عندما يتم البحث من قبل المستخدمين عن هذا الاسم.

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

يتم تحديد اسم أو نوع metadata البيانات الوصفية داخل عنصر meta عن طريق خاصية name.
تحديد author اسم مؤلف محتوى عن طريق خاصية content.
اسم المؤلف هو شخص واحد فقط، ويتألف من الاسم الأول والاسم الأخير.
يمكن أن يكون أسم المؤلف بأي لغة حتى لو كانت غير الإنجليزية.
كل صفحة ويب لها اسم المؤلف منفصل.

Meta tags author

لا يظهر اسم المؤلف على المتصفح، وإنما يظهر في محركات البحث التي تتناول meta author داخل خاصية content.

<!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 بعد وقت زمني معين يتم تحديده عن طريق خاصية content.

حيث يتم تحديد نوع meta داخل خاصية name بقيمة refresh، ويتم تحديد الصفحة التي سيتم التوجه إليها عند عمل التحديث.

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

يتم تحديد اسم أو نوع metadata البيانات الوصفية داخل عنصر meta عن طريق خاصية name.
تحديد refresh عن طريق خاصية http-equive وتكون القيمة refresh.
لا يمكن تحديد أكثر من meta من النوع refresh داخل صفحة الويب.
يتم تحديد الوقت الزمني داخل خاصية content متبوعاً بمسار صفحة html أخرى أو نفس الصفحة.
نفصل بين عدد الثواني و مسار الصفحة في خاصية content بـ semicolon فاصلة منقطة.

Meta refresh in HTML

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

<!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 بعد عدد الثواني المحدّد أيضاً داخل خاصية content بعد مرور وقت تلقائي بواسطة المتصفح.

<!DOCTYPE html>
<html>
   <head>
      <title>Meta refresh Tag</title>
      <meta http-equiv="refresh" content="3;/courses.html">
   </head>
   <body>
      <h1>Meta refresh Tag</h1>
   </body>   
</html>

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات HTML Meta Tags HTML