الترميز (Charset)
تحدد علامة <meta> بترميز الأحرف charset ترميز الأحرف الذي يجب استخدامه للوثيقة. على سبيل المثال، لتحديد ترميز UTF-8، يمكنك استخدام الكود التالي:
<meta charset="UTF-8">الوصف (description)
تستخدم علامة <meta> بالاسم description لتقديم وصف مختصر لمحتوى الصفحة. يمكنك تضمين هذا الوصف في الكود التالي:
<meta name="description" content="وصف مختصر لمحتوى الصفحة.">الكلمات المفتاحية (keywords)
لتحديد الكلمات المفتاحية ذات الصلة بالصفحة، استخدم العلامة التالية:
<meta name="keywords" content="HTML, CSS, JavaScript">المؤلف (author)
لتحديد مؤلف الصفحة، يمكنك استخدام:
<meta name="author" content="نورس علي">حجم العرض (viewport)
تستخدم علامة <meta> بالاسم viewport لضبط إعدادات العرض لتصميم متجاوب. يمكنك استخدام الكود التالي لضبط العرض ليتناسب مع مختلف أحجام الشاشات:
<meta name="viewport" content="width=device-width, initial-scale=1.0">روبوتات الزخف (robots)
يمكنك أيضاً استخدام علامة robots لتحديد كيفية تعامل محركات البحث مع الصفحة، مثل الفهرسة واتباع الروابط:
<meta name="robots" content="index, follow">Content-Security-Policy
فيما يتعلق بإعدادات HTTP، تستخدم علامات <meta> بالمعامل http-equiv لضبط إعدادات مشابهة للرؤوس HTTP. على سبيل المثال، للتحكم في الموارد التي يمكن تحميلها من الصفحة باستخدام سياسة أمان المحتوى، يمكنك استخدام:
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">X-Content-Type-Options
لمنع اكتشاف MIME، استخدم:
<meta http-equiv="X-Content-Type-Options" content="nosniff">X-UA-Compatible
لتحديد وضع الوثيقة في متصفح Internet Explorer، يمكنك استخدام:
<meta http-equiv="X-UA-Compatible" content="IE=edge">refresh
لإعادة توجيه الصفحة إلى عنوان URL آخر بعد فترة زمنية معينة، استخدم:
<meta http-equiv="refresh" content="30;url=https://example.com">Expires
ولتحديد تاريخ انتهاء صلاحية التخزين المؤقت باستخدام Expires:
<meta http-equiv="Expires" content="0">Pragma
لضبط إعدادات التخزين المؤقت للصفحة، يمكنك استخدام العلامات التالية. لضبط التخزين المؤقت باستخدام Pragma:
<meta http-equiv="Pragma" content="no-cache">Open Graph Title
لمشاركة المحتوى على الشبكات الاجتماعية مثل فيسبوك، توفر علامات Open Graph معلومات ميتاداتا. لتحديد عنوان الصفحة، استخدم:
<meta property="og:title" content="عنوان الصفحة">Open Graph Description
لتوفير وصف للصفحة، استخدم:
<meta property="og:description" content="وصف الصفحة.">Open Graph Image
لتحديد صورة للمشاركة، استخدم:
<meta property="og:image" content="https://example.com/image.jpg">Open Graph URL
لتحديد الرابط الأساسي للصفحة، استخدم:
<meta property="og:url" content="https://example.com/page">Property Type
لتحديد نوع المحتوى، استخدم:
<meta property="og:type" content="website">Twitter Card
لإعداد بطاقات تويتر، استخدم العلامات التالية. لتحديد نوع البطاقة، يمكنك استخدام:
<meta name="twitter:card" content="summary_large_image">Twitter Title
لتحديد عنوان بطاقة تويتر، استخدم:
<meta name="twitter:title" content="عنوان الصفحة">Twitter Description
لتوفير وصف لبطاقة تويتر، استخدم:
<meta name="twitter:description" content="وصف الصفحة.">Twitter Image
لتحديد صورة لبطاقة تويتر، استخدم:
<meta name="twitter:image" content="https://example.com/image.jpg">Generator
يمكنك أيضاً استخدام علامة <meta> بالاسم generator لتحديد البرنامج الذي تم استخدامه لإنشاء الوثيقة:
<meta name="generator" content="WordPress 5.8">Copyright حقوق الملكية
لتوفير معلومات حقوق النشر، استخدم:
<meta name="copyright" content="حقوق النشر 2024، اسم الشركة">لون القالب theme-color
لتحديد لون شريط أدوات المتصفح، استخدم:
<meta name="theme-color" content="#ff6600">