# العنصر meta

> يمثِّل العنصر البيانات الوصفية التي لا يمكن تمثيلها باستخدام عناصر HTML المتعلقة بالبيانات الوصفية مثل أو أو أو أو .

- Canonical URL: https://coreiten.com/article/العنصر-meta
- Language: ar
- Section: HTML
- Author: Sami
- Published: 2025-02-20T00:00:00+03:00
- Modified: 2026-01-31T02:20:35+03:00
- Publisher: CoreITen (https://coreiten.com)
- Keywords: ما هو العنصر meta, شرح العنصر meta في html, html, خاصيات العنصر meta, تعلم html من الصفر

---

**البيانات الوصفية <meta>**

يمثِّل العنصر `<meta>` البيانات الوصفية التي لا يمكن تمثيلها باستخدام عناصر HTML المتعلقة بالبيانات الوصفية مثل `<base>` أو `<link>` أو `<script>` أو `<style>` أو `<title>`.

مثال عن استخدام العنصر `<meta>` لضبط ترميز المحارف إلى UTF-8:

```html
<meta charset="utf-8">
```

| تصنيفات المحتوى | البيانات الوصفية |
| --- | --- |
| المحتوى المسموح | لا يوجد، فهذا العنصر فارغ. |
| الوسم المختصر | لمّا كان هذا العنصر فارغًا، فيجب توفير وسم البداية وحذف وسم النهاية. |
| العناصر الأب | العنصر <head>. |
| واجهة DOM | HTMLMetaElement |

## دعم المتصفحات

| Chrome | Firefox | Edge | Safari | Opera |
| --- | --- | --- | --- | --- |
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |

## الخاصيات

يمكن استخدام [الخاصيات العامة](https://coreiten.com/article/%D8%A7%D9%84%D8%AE%D8%A7%D8%B5%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D8%A7%D9%85%D8%A9) في هذا العنصر.

 **ملاحظة: للخاصية العامة `name` معنى خاص في العنصر `<meta>`.**

### charset

تُعرِّف هذه الخاصية ما هو ترميز المحارف (character encoding) المستخدم في الصفحة. يجب أن تحتوي هذه الخاصية على [اسم ترميز محارف معياري](https://www.iana.org/assignments/character-sets). وصحيحٌ أنَّ المواصفة لا تتطلب استخدام ترميز معيّن، لكنها تنصح بما يلي:

- من المفضل أن يستعمل المطورون ترميز UTF-8.
- يجب على المطورين عدم استخدام الترميزات غير المتوافقة مع معيار ASCII لتفادي المخاطر الأمنية الناجمة عن تفسير النص على أنه شيفرة HTML.
- يجب ألا يستعمل المطورون ترميزات `CESU-8` و `UTF-7` و `BOCU-1` و `SCSU` لإمكانية حدوث هجمات cross-site scripting مع هذه الترميزات.
- يجب عدم استخدام ترميز UTF-32 لعدم قدرة جميع خوارزميات ترميز HTML5 على التفريق بينه وبين UTF-16.

مثال عن استخدام العنصر `<meta>` لضبط ترميز المحارف إلى UTF-8:

```html
<meta charset="utf-8">
```

**ملاحظات:**

- يجب أن يطابق ترميز المحارف الترميز الذي خُدِّمَت معه الصفحة، لتفادي حدوث تشويه في المحارف أو ثغرات أمنية.
- يجب أن يكون العنصر `<meta>` الذي يُعرِّف ترميز المحارف ضمن العنصر `<head>` وضمن **أوّل 1024 بايت** من مستند HTML، لأن بعض المتصفحات تبحث في مجال معيّن من البايتات قبل أن تختار ترميزًا للمستند تلقائيًا.
- العنصر `<meta>` هو جزء من خوارزمية تحديد ترميز المحارف في الصفحة، فترويسة HTTP المسماة `Content-Type` لها أولوية على هذا العنصر.
- من المستحسن بشدة تعريف ترميز المحارف، فلو لم يُعرَّف ترميز المحارف للصفحة فقد يشكِّل ذلك [مخاطر أمنية](https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7).
- العنصر `<meta>` مع الخاصية charset يكافئ العنصر الآتي الذي كان يستعمل قبل HTML5: ‏‎`<meta http-equiv="Content-Type" content="text/html; charset="IANAcharset">`‎، حيث `IANAcharset` هو اسم ترميز المحارف الذي تقبله الخاصية charset. الشكل القديم ما يزال مدعومًا لكن ينصح بعدم استخدامه.

### content

تحتوي هذه الخاصية القيمة الموافقة لخاصية `http-equiv` أو `name`، اعتمادًا على سياق استخدامها.

### http-equiv

تحتوي هذه الخاصية على اسم إحدى ترويسات HTTP، لاحظ أنَّ اسم هذه الخاصية هو اختصارٌ للتعبير **http-equiv**alent، وهذه الخاصية تعرّف تعليمة يمكنها تعديل سلوك الخادوم أو المتصفح؛ وتكون قيمة هذه الخاصية موجودة ضمن الخاصية `content`.

هذه بعض القيم التي تأخذها هذه الخاصية:

#### "content-type"

تعرِّف هذه التعليمة نوع MIME للمستند، متبوعًا بترميز المحارف، ولهذه القيمة نفس شكل ترويسة HTTP الشهيرة `content-type`، لكنها معرفة داخل صفحة HTML.

لاحظ أنَّ من المستحيل استخدام قيم بخلاف `text/html` في مستندات HTML، وبالتالي فإن الشكل الصحيح للخاصية `content` هو وضع السلسلة النصية `text/html` متبوعةً بترميز المحارف الذي يُصرَّح عنه بالصيغة `‎; charset=IANAcharset` حيث `IANAcharset` هو اسم ترميز المحارف الذي تقبله الخاصية `charset`.

يجدر بالذكر أنَّ من المستحسن عدم استخدام هذه القيمة وإنما استخدام الخاصية `charset` مع العنصر `<meta>`.

#### "refresh"

هذه التعليمة تحدِّد:

- عدد الثواني التي يجب انتظارها حتى تتم إعادة تحمل الصفحة، وذلك إذا كانت قيمة الخاصية `content` تحتوي على عدد صحيح موجب فقط.
- عدد الثواني التي يجب انتظارها حتى يتم إعادة التوجيه إلى صفحة أخرى، وذلك إذا احتوت الخاصية `content` على عدد صحيح موجب متبوع بالسلسلة النصية‎ `;url=` ‎ ثم رابط URL صحيح.

مثال عن إعادة توجيه الصفحة إلى موقع `coreiten.com` بعد ثلاث ثواني:

```html
<meta http-equiv="refresh" content="3;url=https://coreiten.com">
```

### name

هذه الخاصية تُعرِّف اسم المعلومات الوصفية في المستند، ولا يجوز أن تُضبَط إذا كان العنصر `<meta>` يحتوي على خاصية `itemprop` أو `http-equiv` أو `charset`.

البيانات الوصفية المرتبطة بالخاصية `name` لها قيمة مُعرَّفة ضمن الخاصية `content`؛ وهذه بعض القيم التي يمكن استخدامها مع الخاصية `name`:

- `application-name` تُعرِّف اسم التطبيق الذي يعمل في صفحة الويب. قد تستخدم المتصفحات هذه القيمة لتعريف التطبيق، وهذه القيمة مختلفة عن العنصر `<title>` الذي قد يحتوي على اسم التطبيق، لكن قد يتضمن معلومات أخرى مثل اسم المستند أو حالة التطبيق.
- `author` تعرِّف اسم مؤلف هذا المستند.
- `description` تحتوي على شرح مختصر وخلاصة دقيقة للمحتوى الموجود في الصفحة؛ عددٌ من المتصفحات -مثل Firefox و Opera- تستعمل هذه القيمة كوصف افتراضي للصفحات الموجودة في المفضلة.
- `generator` تحتوي على مُعرِّف البرمجية التي ولّدت الصفحة.
- `keywords` تحتوي على قائمة بالكلمات المفتاحية المتعلقة بمحتوى الصفحة، مفصولٌ بينهما بفاصلة `,`.

مثال عن استخدام العنصر `<meta>` لإضافة كلمات مفتاحية وشرح مختصر عن المستند واسم كاتب الصفحة:

```html
<meta name = "keywords" content = "HTML, meta tag, metadata"> 
<meta name = "description" content = "Brief description of the document">
<meta name = "author" content="Abdullatif Eymash">
```

هنالك قائمة بقيم الخاصية `name` الأخرى شائعة الاستخدام، لكنها ليست معيارية:

- `creator` تُعرِّف اسم مُنشِئ المستند، مثل المنظمة أو المعهد المسؤول عن الصفحة؛ وإذا كان هنالك أكثر من قيمة فيمكن استخدام أكثر من وسم `<meta>`.
- `publisher` تُعرِّف اسم ناشر المستند.
- `robots` تُعرِّف سلوك عناكب محركات البحث (robots) الذي يجب أن تتبعه تلك العناكب عند تعاملها مع الصفحة، والقيم المرتبطة بها يُفصل بينها بفاصلة:

| القيمة | الوصف | مستعملة من |
| --- | --- | --- |
| index | السماح للعناكب بفهرسة الصفحة (القيمة الافتراضية). | جميع العناكب |
| noindex | الطلب من العناكب ألّا تفهرس الصفحة. | جميع العناكب |
| follow | السماح للعناكب باتباع الروابط الموجودة في الصفحة (القيمة الافتراضية). | جميع العناكب |
| none | هذه القيمة تكافئ استخدام noindex, nofollow. | Google |
| noodp | منع استخدام وصف Open Directory Project إن وجد كوصفٍ للصفحة في نتائج محركات البحث. | Google, Yahoo, Bing |
| noarchive | الطلب من محركات البحث عدم تخزين محتوى الصفحة مؤقتًا. | Google, Yahoo, Bing |
| nosnippet | منع محركات البحث من عرض أيّ وصف في صفحة نتائج البحث. | Google, Bing |
| noimageindex | طلب عدم إظهار هذه الصفحة على أنها الصفحة المحيلة (referring page) لصفحة مفهرسة. | Google |
| nocache | قيمة مكافئة للقيمة noarchive. | Bing |

**ملاحظات:**

- القواعد السابقة ليست إجبارية، وإنما تتبعها بعض العناكب المتعاونة، لذا لا تتوقع منع العناكب الخبيثة التي تجمع عناوين البريد الإلكتروني باستخدامها.
- ستحتاج العناكب إلى وصولٍ إلى الصفحة لقراءة القواعد السابقة، لذا لتوفير استهلاك التراسل الشبكي فمن المستحسن استخدام ملف `robots.txt`.
- إذا أردتَ حذف صفحة ما، فاستعمل القيمة `noindex`، لكنها ستحذف بعد أن يزورها العنكبوت مجددًا، لذا احرص على أنَّ الملف `robots.txt` لا يمنع إعادة زيارة عناكب البحث. يجدر بالذكر أنَّ بعض محركات البحث فيها أدوات للمطورين تسمح بحذف الصفحة بسرعة وسهولة.
- بعض القيم مرتبطة بالتبادل مثل `index` و `noindex` أو `follow` و `nofollow`، ففي حال استخدام كلا القيمتين معًا سيكون سلوك العناكب غير محدَّد ويتفاوت بينها.
- يدعم بعض العناكب مثل عناكب Google و Yahoo و Bing بعض القيم في ترويسة HTTP المسماة `X-Robot-Tags`؛ مما يسمح باستخدام القواعد السابقة مع أنواع الملفات الأخرى مثل الصور.

- `googlebot` وهي قيمة مكافئة للقيمة `robots` لكن لن يتبع تعليماتها إلا Googlebot، الذي هو عنكبوت البحث التابع لمحرك Google.
- `slurp` وهي قيمة مكافئة للقيمة `robots` لكن لن يتبع تعليماتها إلا Slurp، الذي هو عنكبوت البحث التابع لمحرك Yahoo .
- `viewport` التي تعطي فكرةً عن حجم إطار العرض المبدئي، وهي تستعمل من الهواتف المحمولة فقط. القيم القابلة للاستعمال في عنصر `<meta name="viewport"‎>`

| القيمة | القيم الفرعية | الوصف |
| --- | --- | --- |
| width | عدد صحيح موجب، أو السلسلة النصية device-width | تحديد عرض إطار العرض بالبكسل، أو السماح لإطار العرض بملائمة عرض شاشة الجهاز. |
| height | عدد صحيح موجب، أو السلسلة النصية device-height | تحديد ارتفاع إطار العرض، وهذه القيمة غير مستعملة من أيّ متصفح. |
| initial-scale | عدد موجب بين 0.0 و 10.0 | تعريف النسبة بين عرض الجهاز (أي device-width في الوضع العمودي للجهاز أو device-height في الوضع الأفقي للجهاز) وبين أبعاد إطار العرض. |
| maximum-scale | عدد موجب بين 0.0 و 10.0 | تعريف أكبر قدر للتقريب، ويجب أن تكون هذه القيمة أكبر أو تساوي minimum-scale وإلا فسيكون تأثيرها غير معرف. يمكن تجاهل هذه القيمة من ضبط المتصفح، ويتجاهلها نظام iOS10+‎ افتراضيًا. |
| user-scalable | yes أو no | إذا ضُبِطَت إلى no، فلن يتمكن المستخدم من تقريب أو تكبير (zoom) الصفحة. القيمة الافتراضية هي yes، ويمكن تجاهل هذه القيمة من ضبط المتصفح، ويتجاهلها نظام iOS10+‎ افتراضيًا. |

**ملاحظات:**

- صحيحٌ أنَّ القيم السابقة لا تتبع لمعيار معيّن، لكن أغلبية متصفحات الهواتف تحترمها.
- القيم الافتراضية تختلف بين الأجهزة والمتصفحات.

مثال عن ضبط أبعاد إطار العرض في الهواتف المحمولة:

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

## ملاحظات

اعتمادًا على الخاصيات المستعملة في العنصر `<meta>`، فيمكن أن تنضوي البيانات الوصفية تحت أحد التصنيفات الآتية:

- إذا ضُبِطَت الخاصية `name`، فالبيانات الوصفية ستُطبَّق على كامل الصفحة.
- إذا ضُبِطَت الخاصية `http-equiv` فستوفَّر معلومات تعطى عادةً من الخادوم.
- إذا ضُبِطَت الخاصية `charset` فسيُحدَّد ما هو ترميز المحارف المستعمل في الصفحة.
- إذا ضُبِطَت الخاصية `itemprop` فستُعرَّف بيانات وصفية خاصة بالمستخدم.

## مواضيع ذات صلة

- [تعلم html من الصفر](https://coreiten.com/topic/%D8%AA%D8%B9%D9%84%D9%85-html-%D9%85%D9%86-%D8%A7%D9%84%D8%B5%D9%81%D8%B1)
