تزود علامات <meta> في <head> بيانات وصفية عن الصفحة — ترميز الأحرف، سلوك viewport، أوصاف SEO، ومعاينات المشاركة الاجتماعية. لا يتم عرضها ولكن يتم قراءتها من قِبل المتصفحات وماكنات البحث والمنصات الاجتماعية.
العنصران الأساسيان
html
تزود علامات <meta> في <head> بيانات وصفية عن الصفحة — ترميز الأحرف، سلوك viewport، أوصاف SEO، ومعاينات المشاركة الاجتماعية. لا يتم عرضها ولكن يتم قراءتها من قِبل المتصفحات وماكنات البحث والمنصات الاجتماعية.
charset يضمن فك تشفير النص (خاصة non-ASCII) بشكل صحيح. ضعه أولاً.viewport هو ما يجعل الموقع responsive على الهاتف المحمول — بدونه، تعرض الهواتف بعرض وهمي 980px وتُصغّر، مما يكسر CSS responsive الخاص بك.<title>Page Title — 50–60 chars</title>
<meta name="description" content="Summary shown in search results, ~150 chars" />
<link rel="canonical" href="https://site.com/page" /> <!-- avoid duplicate-content penalties -->
<title> وdescription هما ما يظهران في نتائج Google، لذلك يحركان نسبة النقر. canonical يخبر محركات البحث الرابط المرجعي.
<meta property="og:title" content="Shareable title" />
<meta property="og:description" content="Shown when shared" />
<meta property="og:image" content="https://site.com/preview.jpg" />
<meta property="og:url" content="https://site.com/page" />
<meta name="twitter:card" content="summary_large_image" />
تتحكم هذه في البطاقة التي تظهر عند مشاركة الرابط على Facebook أو LinkedIn أو Slack أو X، وغيرها — بدونها تحصل على معاينة قبيحة أو فارغة.
charset وviewport غير قابلة للتفاوض بشأن العرض والاستجابة الصحيحة للهاتف المحمول؛ title/description/canonical تحرك SEO؛ علامات Open Graph تتحكم في كيفية ظهور الروابط عند مشاركتها.
معاً فهي طبقة البيانات الوصفية التي تجعل الصفحة تُعرض بشكل صحيح وتحتل ترتيباً جيداً وتشارك بشكل جيد.