سطرًا بسطر: ما يولّده منشئ Meta Tags وما تضيفه بنفسك
تولّد الأداة أعلاه تسعة وسوم: خمسة لبروتوكول Open Graph الذي تقرؤه فيسبوك وواتساب ولينكدإن وغيرها، وأربعة لبطاقات إكس (تويتر سابقًا). هذه الوسوم تتحكم في شكل الرابط حين يُشارك، لا في ترتيبه في محركات البحث. نشرح هنا كل سطر، ثم الوسوم التي لا تولدها الأداة ويحتاجها أي قالب صفحة.
ما تنتجه الأداة
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:url" content="...">
<meta property="og:image" content="...">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="...">
<meta name="twitter:description" content="...">
<meta name="twitter:image" content="...">معنى كل سطر
- og:title وtwitter:title: عنوان البطاقة. يمكن أن يختلف عن عنوان الصفحة في نتائج البحث؛ فأنت هنا تخاطب شخصًا يتصفح محادثة أو خلاصة، لا باحثًا كتب سؤالًا.
- og:description: سطر أو سطران تحت العنوان. بعض التطبيقات تخفيه في المعاينات الصغيرة، فلا تضع فيه معلومة أساسية غائبة عن العنوان.
- og:url: الرابط الأساسي للصفحة دون معاملات تتبع؛ عليه تجمع المنصات المشاركات والتفاعلات.
- og:image: أهم سطر. المقاس الموصى به 1200×630 بكسل (نسبة 1.91:1) بصيغة JPG أو PNG، مع إبعاد النص والشعار عن الحواف لأن بعض المنصات تقص الصورة إلى مربع. الرابط كامل ويبدأ بـ https.
- og:type: القيمة website مناسبة للصفحات العامة، وللمقالات استخدم article.
- twitter:card بقيمة summary_large_image: تعرض الصورة عريضة فوق العنوان بدل صورة مصغرة جانبية.
تنبيهان خاصان بهذه الأداة
أولًا، الصورة الافتراضية في الحقل ملف SVG، ومعظم منصات المشاركة، ومنها فيسبوك، لا تعرض SVG في المعاينة. استبدلها برابط صورة JPG أو PNG قبل النسخ.
ثانيًا، تضع الأداة ما تكتبه بين علامتي تنصيص كما هو. إذا احتوى العنوان على علامة تنصيص مزدوجة، مثل: دورة "الأساسيات"، فسينكسر الوسم. استخدم علامتي التنصيص العربيتين « » بدلًا منها، أو اكتب " مكانها.
وسوم لا تولّدها الأداة ويحتاجها قالبك
<title>لاب توب Lenovo IdeaPad 3 بمعالج Ryzen 5 | متجر النيل</title>
<meta name="description" content="...">
<link rel="canonical" href="https://example.com/laptops/ideapad-3">
<meta name="robots" content="index, follow">
<meta property="og:site_name" content="متجر النيل">
<meta property="og:locale" content="ar_EG">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="...">وسم title هو ما تعرضه محركات البحث عادة عنوانًا للنتيجة، والمساحة المتاحة له تُقاس بالبكسل لا بعدد الحروف؛ يُقدَّر العرض الظاهر على سطح المكتب بنحو 600 بكسل، وما يزيد يُقص بعلامة «…». الحروف العريضة مثل W والحروف العربية المتصلة تستهلك عرضًا أكبر، فقد يُقص عنوان من 50 حرفًا ويظهر آخر من 60 كاملًا.
canonical يخبر محرك البحث بالنسخة الأصلية حين تصل الصفحة نفسها عبر أكثر من رابط، كالروابط التي تحمل معاملات UTM أو ترتيب المنتجات. وrobots بقيمة noindex يطلب عدم فهرسة الصفحة، ويناسب سلة الشراء ونتائج البحث الداخلي. ولكي يعمل noindex يجب ألا تمنع الصفحة نفسها في ملف robots.txt، وإلا فلن يرى محرك البحث الوسم أصلًا.
قبل الإصلاح وبعده: صفحة منتج في متجر إلكترونيات (مثال)
سؤالان يتكرران
غيّرت الصورة ولم تتغير المعاينة، لماذا؟
المنصات تخزن المعاينة بعد أول قراءة للرابط، وقد تعرض النسخة القديمة أيامًا. اطلب إعادة القراءة من Sharing Debugger لفيسبوك، وتأكد أن رابط الصورة الجديدة مختلف عن القديم لا ملفًا استُبدل بالاسم نفسه.
هل أكتب هذه الوسوم يدويًا في كل صفحة؟
لا. ضعها في قالب الرأس المشترك واجعل قيمها تُملأ من بيانات كل صفحة: عنوانها ووصفها وصورتها ورابطها. الأداة مفيدة لفهم الصيغة ولصفحات الهبوط المنفردة.