خصائص name لعلامة <meta> HTML
التعريف والاستخدام
name الخصائص تحدد اسم البيانات المتعددة.
name الخصائص التي تحدد خصائص content اسم القيمة.
من خلال استخدام name و خصائص content الخصائص، يمكن استخدامها لتحديد بيانات المعلومات المتعددة للوثيقة. من بينها،name الخصائص تمثل نوع البيانات المتعددة، بينما خصائص content الخصائص تستخدم لتقديم القيم.
يظهر الجدول أدناه أنواعًا معينة من بيانات المعلومات المتعددة.
ملاحظة:إذا تم تعيين خصائص http-equiv، لا يجب تعيين name الخصائص.
نصيحة:أدخل HTML5 طريقة للسماح لمصممي الصفحات عن طريق علامة <meta> بتحكم في واجهة العرض (منطقة المستخدم المرئية للصفحة) (انظر مثال "إعداد واجهة العرض" أدناه).
مثال
استخدام خاصية name لتعريف وصف المستند HTML، الكلمات المفتاحية والمؤلف. يجب أيضًا تعريف واجهة العرض، لتحكم في حجم الصفحة وتدرج التكبير والتصغير للعديد من الأجهزة المختلفة:
<head> <meta name="description" content="免费的 Web 教程"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="YK Investment"> <meta\s+name="viewport"\s+content="width=device-width,\s+initial-scale=1.0"> </head>
النحو
<meta name="قيمة">
قيمة الخاصية
| قيمة | وصف |
|---|---|
| application-name | تحديد اسم التطبيق على الويب الذي يمثل الصفحة. |
| author |
تحديد اسم مؤلف المستند. مثالًا: <meta name="author" content="YK Investment"> |
| description |
تحديد وصف الصفحة. يمكن لمحركات البحث اختيار هذا الوصف لعرض نتائج البحث. مثالًا: <meta name="description" content="免费的 Web 教程"> |
| generator |
تحديد أحد حزم البرامج المستخدمة لإنشاء المستندات (لا تستخدم للصفحات المكتوبة يدويًا). مثالًا: <meta name="generator" content="FrontPage 4.0"> |
| keywords |
تحديد قائمة الكلمات المفتاحية المتعلقة بالصفحة، منفصلة بالكومي، لتعليم محركات البحث عن محتوى الصفحة. نصيحة:تأكد\s+ دائمًا\s+ من\s+ تحديد\s+ الكلمات\s+ المفتاحية\s+ (يحتاج\s+ محرك\s+ البحث\s+ إلى\s+ تصنيف\s+ الصفحة).\s+ على\s+ سبيل\s+ المثال:\s+ <meta\s+name="keywords"\s+content="HTML,\s+ meta\s+ tag,\s+ tag\s+ reference"> |
| viewport | تحكم\s+ في\s+ النافذة\s+ المرئية\s+ (منطقة\s+ المستخدم\s+ المرئية\s+ في\s+ الصفحة\s+ الويبية). |
شرح
بالإضافة\s+ إلى\s+ السبعة\s+ أنواع\s+ مسبقًا\s+ المحددة\s+ من\s+ بيانات\s+ Meta،\s+ يمكن\s+ استخدام\s+ توسعات\s+ بيانات\s+ Meta.\s+ يمكنك\s+ زيارة\s+ هذه\s+ الصفحة\s+ للحصول\s+ على\s+ قائمة\s+ تحديثية\s+ من\s+ التوسعات:\s+
http://wiki.whatwg.org/wiki/MetaExtensions
بعض\s+ التوسعات\s+ تستخدم\s+ بشكل\s+ شائع،\s+ بينما\s+ أخرى\s+ لها\s+ استخدام\s+ ضيق،\s+ تقريباً\s+ لا\s+ يستخدمها\s+ أحد.\s+ بيانات\s+ Meta\s+ robots\s+ تعتبر\s+ من\s+ الأخيرة.\s+ يمكن\s+ للمؤلفين\s+ لـ\s+ وثائق\s+ HTML\s+ استخدامها\s+ لتخبر\s+ محركات\s+ البحث\s+ كيفية\s+ التعامل\s+ مع\s+ الوثيقة.\s+ على\s+ سبيل\s+ المثال:\s+
<meta\s+name="robots"\s+content="noindex">
هذا\s+ نوع\s+ من\s+ بيانات\s+ Meta\s+ له\s+ ثلاثة\s+ قيم\s+ معروفة\s+ من\s+ معظم\s+ المتصفحات:\s+
- noindex\s+ -\s+ يعني\s+ عدم\s+ تضمين\s+ هذه\s+ الصفحة\s+ في\s+ المؤشر
- noarchive\s+ -\s+ يعني\s+ عدم\s+ أرشفة\s+ أو\s+ تخزين\s+ هذه\s+ الصفحة\s+ في\s+ المخزن\s+ المؤقت
- nofollow\s+ -\s+ يعني\s+ عدم\s+ مواصلة\s+ البحث\s+ عبر\s+ الروابط\s+ في\s+ هذه\s+ الصفحة
عدد\s+ التوسعات\s+ المتاحة\s+ من\s+ بيانات\s+ Meta\s+ قليل،\s+ من\s+ الأفضل\s+ للمطورين\s+ قراءة\s+ القائمة\s+ المتاحة\s+ على\s+ الإنترنت\s+ لمعرفة\s+ ما\s+ يمكن\s+ استخدامه\s+ في\s+ مشاريعهم.
إشارة\s+ إلى
لإخبار\s+ محركات\s+ البحث\s+ بكيفية\s+ تصنيف\s+ وتصنيف\s+ المحتوى،\s+ كان\s+ الوسيلة\s+ الرئيسية\s+ في\s+ الماضي\s+ هي\s+ استخدام\s+ بيانات\s+ Meta\s+ keywords.\s+ ومع ذلك،\s+ أصبحت\s+ أهمية\s+ بيانات\s+ Meta\s+ keywords\s+ أقل\s+ بكثير\s+ الآن،\s+ لأنها\s+ يمكن\s+ أن\s+ تُستخدم\s+ لصنع\s+ وهم\s+ من\s+ تلازم\s+ المحتوى\s+ مع\s+ الصفحة\s+ ذاتها.\s+ أفضل\s+ طريقة\s+ للسعي\s+ لتحسين\s+ المحتوى\s+ في\s+ عيني\s+ محركات\s+ البحث\s+ هي\s+ استخدام\s+ النصائح\s+ التي\s+ توفرها\s+ محركات\s+ البحث\s+ نفسها.\s+ معظم\s+ محركات\s+ البحث\s+ توفر\s+ إرشادات\s+ لتحسين\s+ الصفحات\s+ أو\s+ المواقع\s+ الكاملة.
غوغل:\s+ دليل\s+ البحث\s+ في\s+ محرك\s+ البحث\s+ SEO\s+ للمبتدئين
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
بaidu:\s+ دليل\s+ تحسين\s+ البحث\s+ في\s+ محرك\s+ البحث\s+ بaidu\s+ SEO
إعداد\s+ النافذة\s+ المرئية
النافذة\s+ المرئية\s+ هي\s+ منطقة\s+ المستخدم\s+ المرئية\s+ في\s+ الصفحة\s+ الويبية.\s+ إنها\s+ تختلف\s+ من\s+ جهاز\s+ إلى\s+ آخر\s+ -\s+ إنها\s+ ستكون\s+ أصغر\s+ في\s+ الهاتف\s+ الذكي\s+ مقارنة\s+ بشاشة\s+ الحاسوب.
أنت\s+ يجب\s+ أن\s+ تتضمن\s+ العناصر\s+ التالية\s+ <meta>\s+ في\s+ جميع\s+ الصفحات\s+:\s+
<meta\s+name="viewport"\s+content="width=device-width,\s+initial-scale=1.0">
يقدم تعليمات للمتصفح حول كيفية التحكم في حجم الصفحة وتدرج التكبير.
width=device-width جزء من إعداد عرض الصفحة، ليعكس عرض شاشة الجهاز (يختلف بين الأجهزة).
initial-scale=1.0 جزء من إعداد مستوى التكبير الأولي للصفحة عند تحميلها للمتصفح.
هذا مثال على صفحة الويب بدون وحدة الرؤية المعدنية، والصفحة نفسها مع وحدة الرؤية المعدنية:
نصيحة:إذا كنت تستخدم هاتفًا أو جهاز لوحيًا للتصفح في هذه الصفحة، يمكنك النقر على الروابط التالية لرؤية الفروق.
يمكنك زيارةدروس تصميم صفحات الويب التفاعلية - وحدة الرؤيةتعلم المزيد عن وحدة الرؤية.
دعم المتصفحات
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| الدعم | الدعم | الدعم | الدعم | الدعم |
