تزود علامات <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 تتحكم في كيفية ظهور الروابط عند مشاركتها.
معاً فهي طبقة البيانات الوصفية التي تجعل الصفحة تُعرض بشكل صحيح وتحتل ترتيباً جيداً وتشارك بشكل جيد.
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرع