HTML Meta Element
عنصر meta في لغة HTML
سوف تتعلم في هذا الدرس كل ما يتعلق بعنصر [meta]، والذي يُكتب دائمًا داخل عنصر head في صفحة HTML، بالإضافة إلى الخصائص التي تضاف إليه مثل [charset] وغيرها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Meta Element
عنصر meta في لغة HTML
</>
HTML Meta Element
عنصر meta في لغة HTML
يُستخدم عنصر <meta> لإضافة بيانات وصفية [metadata] تساعد المتصفحات ومحركات البحث في فهم محتوى صفحة HTML.
عنصر <meta> وعلاقته بصفحة HTML:
- يُكتب عنصر <meta> داخل عنصر <head> في صفحة HTML.
- عنصر <meta> هو عنصر فارغ [empty element] وله علامة فتح <meta> فقط.
- لا يمكن كتابة أي عناصر HTML أخرى داخل عنصر <meta>.
- يمكن تكرار عنصر <meta> في صفحة الويب بحسب الحاجة.
- يتم تحديد نوع البيانات الوصفية باستخدام الخاصية [name]، بينما يتم تحديد قيمتها باستخدام الخاصية [content].
- يُنصح باستخدام عناصر <meta> لتوفير معلومات إضافية للمتصفحات ومحركات البحث، مما يساعد في تحسين ظهور الصفحة وفهرستها.
</>
HTML meta charset Attribute
خاصية charset مع عنصر meta في لغة HTML
تُستخدم خاصية [charset] مع عنصر [meta] لتحديد طريقة ترميز الحروف [character encoding] المستخدمة في ملف HTML. فبعض اللغات مثل اللغة العربية لا تظهر بشكل صحيح أو لا يتعرف عليها المتصفح إذا لم يتم تحديد الترميز المناسب، وقد تظهر الأحرف على شكل علامات استفهام أو رموز غريبة.
لذلك، نضيف خاصية [charset] إلى عنصر [meta] ونعطيها القيمة utf-8، التي تدعم معظم لغات العالم ومنها العربية، لكي يتمكن المتصفح من عرض النصوص بشكل صحيح.
Meta tags charset without UTF8
قد لا تظهر الأحرف باللغة العربية بشكل صحيح إذا لم تضف خاصية [meta charset] بالقيمة [UTF-8] في صفحة HTML.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>بسم الله الرحمن الرحيم</h1>
</body>
</html>
Meta tags charset with UTF8
تظهر الأحرف باللغة العربية بشكل صحيح عند إضافة خاصية [meta charset] بالقيمة [UTF-8] في صفحة HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>بسم الله الرحمن الرحيم</h1>
</body>
</html>
</>
Meta keywords in HTML
الكلمات المفتاحية مع عنصر meta في لغة HTML
يمكنك استخدام عنصر <meta> لتحديد الكلمات الرئيسية المتعلقة بمحتوى المستند باستخدام خاصية [keywords]. على الرغم من أن محركات البحث كانت تعتمد على هذه الكلمات في السابق أثناء فهرسة الصفحات، إلا أن معظم محركات البحث الحديثة لم تعد تعطيها أهمية كبيرة، وأصبحت تركز بشكل أكبر على محتوى الصفحة الفعلي.
الكلمات الدلالية أو المفتاحية keywords مع عنصر meta:
- يتم تحديد نوع البيانات الوصفية [metadata] داخل عنصر [meta] باستخدام الخاصية [name].
- توضع الكلمات المفتاحية في الخاصية [content].
- يتم الفصل بين كل كلمة مفتاحية وأخرى باستخدام علامة الفاصلة [,].
- من المهم اختيار الكلمات بعناية والتأكد من ارتباطها بمحتوى الصفحة.
- يُفضل أن تكون الكلمات المفتاحية مستخدمة فعليًا داخل نص صفحة الويب.
- من الأفضل تحديد كلمات دلالية مناسبة لكل صفحة ويب بشكل منفصل.
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> لإضافة وصف موجز لمحتوى المستند باستخدام خاصية [description]. يُستخدم هذا الوصف لتقديم فكرة مختصرة عن محتوى الصفحة ويظهر غالبًا أسفل رابط الموقع في نتائج محركات البحث. تهتم محركات البحث الحديثة بعرض هذا الوصف للمستخدمين، ويوصى بأن يكون الوصف دقيقًا وجذابًا ومرتبطًا بمحتوى الصفحة.
- يتم تحديد نوع [meta] عن طريق خاصية [name] مع القيمة [description].
- يتم كتابة الوصف داخل خاصية [content] لعنصر [meta].
- لا يمكن تكرار [meta description] في نفس صفحة الويب أكثر من مرة.
- لا يمكن تكرار المحتوى النصي داخل [meta description] في صفحة ويب أخرى.
Meta tags description
المحتوى النصي داخل خاصية content في عنصر meta description لا يظهر للمستخدم في الصفحة، بل يظهر أسفل رابط الموقع في نتائج محركات البحث.
<!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:
- يتم تحديد نوع البيانات الوصفية داخل عنصر [meta] عن طريق الخاصية [name].
- يُكتب اسم المؤلف في الخاصية [content] باستخدام القيمة [author].
- يمكن أن يكون اسم المؤلف شخصًا واحدًا أو جهة أو مؤسسة.
- يمكن كتابة اسم المؤلف بأي لغة، وليس بالضرورة الإنجليزية.
- يُفضل أن يكون لكل صفحة ويب اسم مؤلف خاص بها.
- لا يعتمد ظهور الصفحة في نتائج البحث عند البحث عن اسم المؤلف فقط على وجود عنصر [meta author]، بل هناك عوامل أخرى تؤثر في ذلك.
Meta tags author
اسم المؤلف المضاف داخل عنصر meta لا يظهر في صفحة المتصفح، لكن يمكن لمحركات البحث أو بعض الأدوات قراءته من خاصية 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 تلقائيًا بعد فترة زمنية محددة، وذلك عن طريق تعيين الخاصية [http-equiv] بالقيمة [refresh]، وتحديد عدد الثواني والعنوان المطلوب الانتقال إليه داخل الخاصية [content].
تحديد الوقت الزمني للتحديث مع عنصر meta:
- يتم تحديد التحديث التلقائي باستخدام الخاصية [http-equiv] في عنصر [meta]، وتكون قيمتها [refresh].
- لا يُستخدم اسم أو نوع البيانات الوصفية مع الخاصية [name] في هذا السياق.
- يتم تحديد الوقت الزمني للتحديث في داخل الخاصية [content]، ويمكن تحديد مسار صفحة HTML أخرى أو نفس الصفحة بعده.
- يتم الفصل بين عدد الثواني ومسار الصفحة في الخاصية content بواسطة علامة الفاصلة المنقوطة [;].
- يُنصح بعدم استخدام أكثر من عنصر [meta] من النوع [refresh] في نفس صفحة الويب لتجنب سلوك غير متوقع.
Meta tags refresh
يتم إعادة تحميل الصفحة تلقائيًا بعد مرور عدد الثواني المحدد في خاصية 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 بعد مرور عدد الثواني المضاف، حيث يقوم المتصفح باحتساب الوقت وتنفيذ إعادة التوجيه تلقائيًا.
<!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>
</>
Meta robots in HTML
تعليمات محركات البحث مع عنصر meta في لغة HTML
تحديد تعليمات robots مع عنصر meta:
- يتم تحديد اسم التعليمات باستخدام الخاصية [name] وتكون قيمتها [robots].
- تُكتب تعليمات الفهرسة أو تتبع الروابط داخل الخاصية [content] مثل: [index, follow] أو [noindex, nofollow].
- يمكن استخدام أكثر من قيمة مفصولة بفاصلة داخل الخاصية [content].
- قيم التعليمات الرئيسية هي: index [فهرسة الصفحة]، و noindex [عدم الفهرسة]، و follow [تتبع الروابط]، و nofollow [عدم تتبع الروابط].
- يُنصح بتخصيص تعليمات robots المناسبة لكل صفحة بحسب الهدف من ظهورها أو إخفائها في نتائج البحث.
Meta tags robots
المثال التالي يعطي تعليمات لمحركات البحث بفهرسة الصفحة ومتابعة جميع الروابط الموجودة فيها.
<!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]، حيث يُكتب إعداد ضبط المنطقة داخل الخاصية [content]، مثل: [width=device-width, initial-scale=1.0].
- الجزء [width=device-width] يجعل عرض الصفحة متوافقًا تلقائيًا مع عرض شاشة الجهاز الذي يستخدمه الزائر.
- بينما يقوم الجزء [initial-scale=1.0] بتحديد نسبة التكبير أو التصغير الافتراضية التي تظهر بها الصفحة عند تحميلها لأول مرة.
هناك خصائص أخرى يمكن إضافتها إلى meta viewport، مثل:
- [maximum-scale] و [minimum-scale]: لتحديد الحدّ الأقصى والأدنى للتكبير.
- [user-scalable]: للسماح أو منع المستخدم من تغيير مستوى التكبير.
عادةً ما يُنصح دائمًا باستخدام [<"meta name="viewport" content="width=device-width, initial-scale=1.0>] لضمان ظهور الموقع بشكل ملائم ومريح على مختلف الأجهزة والشاشات، ما يساعد على تحسين تجربة المستخدم ويجعل الموقع متجاوبًا بشكل فعّال.
Meta tags viewport
المثال التالي يحدد إعدادات منطقة العرض [viewport] لجعل الصفحة متجاوبة مع جميع الشاشات والأجهزة.
<!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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
