وسوم Meta للبحث والمشاركة، مع معاينات
يكتب مولد وسوم Meta هذا كود HTML الذي يحدد شكل الصفحة في نتائج Google وعند مشاركة رابطها على Facebook وLinkedIn وX وSlack وDiscord وWhatsApp. أدخل العنوان والوصف والرابط الأساسي (canonical) وصورة المشاركة، وستحصل على وسوم SEO الأساسية ووسوم Open Graph ووسوم Twitter Card، مُهرَّبة بشكل صحيح وجاهزة للصق في <code><head></code>، مع معاينة مباشرة لمقتطف البحث ولكل بطاقة تواصل اجتماعي. الصق قسم head من صفحة موجودة لتحميل وسومها وتحسينها. كل شيء يعمل في متصفحك.
كيف تنشئ وسوم Meta
- 1اكتب عنوانًا ووصفًا. تتحول العدّادات إلى الأحمر عندما يُرجَّح أن يقتطعها Google: نحو 600 بكسل (≈60 حرفًا) للعنوان ونحو 160 حرفًا للوصف.
- 2أدخل الرابط الأساسي للصفحة واسم موقعك ورابط صورة مطلقًا — ويُفضَّل أن تكون 1200 × 630 بكسل — مع نص بديل.
- 3اختر نوع Open Graph واللغة ونمط بطاقة Twitter، وأضف أسماء حساباتك على X. ألغِ تحديد السماح بالفهرسة للصفحات التي يجب أن تبقى خارج نتائج البحث.
- 4راجع معاينات Google وFacebook وLinkedIn وX، ثم انتقل إلى HTML واختر المجموعات التي تريد تضمينها، وانسخ الوسوم إلى
<head>في صفحتك. - 5لتعديل صفحة موجودة، انقر على استيراد والصق كود HTML الخاص بها أو مصدر الصفحة.
الوسوم المهمة لتحسين محركات البحث
- <title>
- أهم إشارة داخل الصفحة والعنوان القابل للنقر في النتائج. ضع الموضوع الرئيسي أولًا، واجعله فريدًا لكل صفحة، واختمه باسم العلامة التجارية. يعيد Google كتابة العناوين التي يراها غير مفيدة أو طويلة جدًا أو محشوة بالكلمات المفتاحية.
- meta description
- ليس عاملًا في الترتيب، لكنه يُستخدم غالبًا كمقتطف تحت العنوان، فيؤثر في النقرات. لخّص الصفحة في 120–160 حرفًا مع سبب لزيارتها.
- canonical
- يحدد <link rel="canonical"> الرابط المفضّل عندما يمكن الوصول إلى المحتوى نفسه عبر عدة عناوين (معاملات التتبع، أو http وhttps، أو الشرطة المائلة في النهاية).
- robots
- يُبقي noindex الصفحة خارج النتائج، ويطلب nofollow من الزواحف عدم تتبع روابطها. القيمة الافتراضية هي index, follow، لذا لا يُكتب الوسم إلا عندما تغيّرها.
- viewport & charset
- ليست وسوم SEO بحد ذاتها، لكن كل صفحة تحتاجها: ترميز UTF-8 وviewport متجاوب شرطان أساسيان للفهرسة التي تعطي الأولوية للجوال.
- keywords
- يتجاهله Google وBing في الترتيب منذ أكثر من عشر سنوات. أضفه فقط إذا كان بحث داخلي أو نظام آخر يقرؤه.
Open Graph: كيف تظهر الروابط عند مشاركتها
Open Graph هو البروتوكول الذي قدّمه Facebook وتقرؤه اليوم كل المنصات تقريبًا: LinkedIn وSlack وDiscord وWhatsApp وTelegram وiMessage وPinterest وغيرها الكثير. الوسوم الأساسية هي og:title وog:description وog:image وog:url وog:type؛ ويحسّن og:site_name وog:locale البطاقة.
الصورة هي ما يصنع البطاقة أو يفسدها. استخدم رابطًا مطلقًا يبدأ بـ https://، بمقاس 1200 × 630 بكسل (نسبة 1.91:1)، وبحجم أقل من 5 ميغابايت، بصيغة JPEG أو PNG أو WebP، وأبعد النصوص والشعارات عن الحواف لأن المنصات تقصّ الصور بطرق مختلفة. تخزّن المنصات البطاقات مؤقتًا: بعد تغيير الوسوم، حدّثها باستخدام Sharing Debugger من Facebook أو Post Inspector من LinkedIn أو بمشاركة الرابط مع سلسلة استعلام (query string).
بطاقات Twitter / X
يقرأ X وسمه الخاص twitter:card لاختيار التخطيط — summary_large_image لصورة بعرض كامل، وsummary لصورة مصغّرة مربعة صغيرة — كما يقرأ twitter:site وtwitter:creator لاسمَي حساب الموقع والكاتب. أما العنوان والوصف والصورة فيأخذها من وسوم Open Graph، ولذلك لا يكتب المولد twitter:title وtwitter:description وtwitter:image إلا عند إيقاف Open Graph، تجنبًا لتكرار الكود.
يعرض X حاليًا بطاقات الصورة الكبيرة على شكل صورة يعلوها العنوان وتحتها اسم النطاق؛ ولا تظهر الأوصاف إلا في بطاقات summary وفي بعض التطبيقات فقط.
طول العنوان: الأحرف مقابل البكسلات
يقتطع Google العناوين حسب العرض لا حسب عدد الأحرف: على الكمبيوتر يبلغ الحد نحو 600 بكسل بخط شبيه بـ Arial بحجم 20 بكسل، أي ما يقارب 50–60 حرفًا حسب الحروف — فـ "WWW" أعرض من "iii" بثلاث مرات. يقيس العدّاد العنوان بهذا الخط في متصفحك، فيعكس كلماتك الفعلية. وتُقطع الأوصاف عند نحو 920 بكسل، أي قرابة 155–160 حرفًا على الكمبيوتر وأقل على الجوال.
الاقتطاع ليس عقوبة — فهو يخفي نهاية النص فقط — لكن وضع الكلمات المهمة في البداية يضمن رؤيتها. احرص على أن يطابق العنوان والوصف المحتوى الظاهر في الصفحة، فذلك يزيد احتمال أن يُبقيهما Google دون تغيير.
أين تضع الوسوم
تُوضع كل هذه الوسوم داخل عنصر <head> في الصفحة، ويجب أن تكون موجودة في كود HTML الذي يرسله الخادم: فزواحف معاينة الروابط لا تشغّل JavaScript، لذا تكون الوسوم المضافة بكود في جهة العميل غير مرئية لـ Facebook وLinkedIn وX. في أطر العمل مثل Next.js وNuxt وAstro، استخدم واجهات البيانات الوصفية الخاصة بها لعرضها على الخادم. تُهرَّب كل قيمة سمة في HTML، فلا يمكن لعلامات الاقتباس أو رمز & في عناوينك أن تُفسد الكود.
اجمع ذلك مع ملف robots.txt يسمح للزواحف بالوصول إلى صفحاتك، وخريطة موقع XML تسرد روابطك الأساسية، وأيقونة favicon لتظهر أيقونتك في نتيجة البحث.
الأسئلة الشائعة
- ما الطول المثالي لعنوان Meta والوصف؟
- نحو 50–60 حرفًا (أقل من ~600 بكسل) للعنوان و120–160 حرفًا للوصف. تعرض العدّادات كليهما وتتحول إلى الأحمر عندما يُرجَّح أن يقتطع Google النص.
- ما المقاس المناسب لصورة Open Graph؟
- مقاس 1200 × 630 بكسل (1.91:1) يعمل على Facebook وLinkedIn وX وتطبيقات المراسلة. استخدم رابط https مطلقًا، وأبقِ الحجم أقل من 5 ميغابايت، وضع المحتوى المهم في المنتصف.
- لماذا تعرض معاينة رابطي صورة أو عنوانًا قديمًا؟
- تخزّن المنصات معاينات الروابط مؤقتًا. استخدم Sharing Debugger من Facebook أو Post Inspector من LinkedIn لإعادة قراءة الرابط؛ ويحدّث X ذاكرته المؤقتة بعد نحو أسبوع، أو فورًا لرابط بسلسلة استعلام جديدة.
- هل أحتاج إلى وسوم Open Graph ووسوم Twitter معًا؟
- تحتاج إلى Open Graph لمعظم المنصات، وإلى twitter:card على الأقل لـ X. يأخذ X القيم من og:title وog:description وog:image، لذا فبقية وسوم Twitter اختيارية عند وجود Open Graph.
- هل يفيد وسم meta keywords في تحسين محركات البحث؟
- لا. يتجاهله Google وBing في الترتيب منذ سنوات طويلة. وهو اختياري هنا ولا يفيد إلا إذا كان نظام داخلي ما يقرؤه.
- هل يمكنني تعديل وسوم Meta لصفحة موجودة؟
- نعم. انقر على استيراد، والصق كود HTML للصفحة (مصدر الصفحة يكفي)، وستُحمَّل قيم العنوان والوصف وcanonical وOpen Graph وTwitter وrobots في النموذج.
- لماذا لا تظهر صورة المشاركة في المعاينة؟
- يجب أن يكون الرابط مطلقًا (https://…) ومتاحًا للعامة. بعض الخوادم تمنع عرض صورها على مواقع أخرى؛ أما المنصات الحقيقية فتجلب الصور من جهة الخادم، لذا قد تعمل لديها رغم ذلك.
- هل يُرفع أي شيء؟
- لا. تُنشأ الوسوم في متصفحك. ولا يُحمَّل إلا صورة المشاركة من الرابط الذي تدخله، لعرضها في المعاينات.