مولّد وسوم Meta / Open Graph

أدخل عنوان صفحتك ووصفها ورابطها وصورة المشاركة، واحصل على مقتطف <head> كامل وجاهز للصق - وصف meta، والرابط الأساسي (canonical)، ووسوم Open Graph لفيسبوك ولينكدإن، ووسوم Twitter Card لمنصة X - بدلاً من تجميع كل واحد يدويًا أو البحث عن عدة أدوات أحادية الغرض.

1. أساسيات الصفحة

0 حرفًا

0 حرفًا

2. صورة المشاركة

3. خيارات إضافية

نوع المحتوى

الكود المُولَّد

<meta name="robots" content="index, follow" />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />

الأسئلة الشائعة

ما الذي يحتويه المقتطف المُولَّد فعليًا؟

وسم '<title>'، ووصف meta، ورابط canonical ذاتي الإشارة، ووسم robots، ومجموعة Open Graph الأساسية (og:type وog:title وog:description وog:url وog:site_name وog:image وog:image:alt وog:locale)، ومجموعة Twitter Card (twitter:card وtwitter:title وtwitter:description وtwitter:image وtwitter:site)، ووسم theme-color إذا وفّرت واحدًا. أي حقل تتركه فارغًا يُحذف ببساطة من الناتج بدلاً من إنشاء وسم فارغ أو معطوب.

ما الفرق بين وصف meta ووصف Open Graph؟

وصف meta هو ما قد تعرضه محركات البحث كمقتطف أسفل صفحتك في نتائج البحث؛ أما وصف Open Graph (og:description) فهو ما يظهر عند مشاركة الصفحة على فيسبوك أو لينكدإن أو ما شابه. عمليًا، نفس الجملة أو الجملتين المكتوبتين جيدًا تعملان عادةً للاثنين، ولهذا تعيد هذه الأداة استخدام حقل الوصف الواحد لكلا الوسمين - لكن لا شيء يمنعك من تعديل المقتطف الملصوق لاحقًا إذا أردت أن يقولا شيئًا مختلفًا قليلاً.

لماذا يظهر تحذير طول لعنواني؟

إرشاد الـ60 حرفًا تقريبًا يعكس تقريبًا مقدار النص الذي تعرضه محركات البحث عادةً قبل اقتطاع العنوان في نتائج البحث بعلامات حذف - وهو ليس حدًا تقنيًا صارمًا، وسيظل العنوان الأطول يعمل في كل مكان آخر. إذا كانت الصياغة الدقيقة التي تظهر في نتائج البحث مهمة لك، فإن إبقاء الجزء المهم من العنوان ضمن هذا الحد التقريبي يمنع اقتطاعه.

ما حجم الصورة الذي يجب أن أستخدمه لصورة Open Graph؟

1200×630 بكسل (بنسبة تقارب 1.91:1) هو الحجم الأكثر شيوعًا في التوصية، لأنه ما صُمِّمت من أجله تخطيطات البطاقات كبيرة الصورة في فيسبوك ولينكدإن وX. الصور الأصغر أو ذات الشكل المختلف تُعرض عمومًا رغم ذلك، لكن المنصة قد تقصّها بطرق لا تتحكم بها، لذا فإن الصورة القريبة من تلك النسبة تميل للظهور كما قصدت.

هل يغيّر هذا فعليًا أي شيء في موقعي المباشر؟

لا - هذه مجرد أداة لتوليد النص. تبني المقتطف داخل متصفحك ولا يُنشر أو يُغيَّر أي شيء تلقائيًا في أي مكان. لا يزال عليك لصق النتيجة بنفسك في وسم '<head>' الفعلي بلغة HTML لصفحتك، أو في حقول تحسين محركات البحث/meta التي يوفرها نظام إدارة المحتوى أو منشئ الموقع الخاص بك لتلك الصفحة.

لماذا يتغير نوع Twitter Card تلقائيًا؟

يُضبط twitter:card على summary_large_image كلما توفّر رابط صورة، وعلى summary في الحالة الأخرى - بما يتوافق مع الاستخدام المقصود لأنواع بطاقات Twitter/X الخاصة بها: يعرض summary_large_image صورة معاينة كبيرة وبارزة، بينما summary هو صورة مصغرة أصغر مخصصة للبطاقات التي لا تملك صورة قوية لعرضها.

هل يُرسل محتواي إلى أي مكان؟

لا. كل حقل تكتبه والمقتطف المُولَّد نفسه يبقيان بالكامل داخل متصفحك - لا شيء يُرفع إلى أي خادم في أي وقت.

ماذا لو ملأت بعض الحقول فقط؟

يخرج المقتطف نظيفًا وصالحًا رغم ذلك - أي حقل تتركه فارغًا (صورة، معرّف تويتر، لون سمة، وهكذا) يُحذف ببساطة من الناتج بدلاً من إنتاج وسم فارغ أو مشوَّه. املأ بقدر ما ينطبق على صفحتك، سواء كان كثيرًا أو قليلاً.

هل يمكنني استخدام هذا لشيء غير موقع ويب عادي، مثل مقال أو صفحة منتج؟

نعم - يغطي محدد نوع المحتوى website وarticle وproduct وprofile، والذي يضبط قيمة og:type التي تستخدمها المنصات كدليل تصنيف عند تحليل الصفحة (زواحف فيسبوك ولينكدإن تقرأها؛ وهي ليست جزءًا من مواصفات Twitter Card نفسها، التي تعتمد بدلاً من ذلك على وسم twitter:card الخاص بها). اختيار النوع الذي يطابق صفحتك فعليًا إشارة صغيرة لكنها حقيقية حول نوع المحتوى الذي تمثله.

هل ما زلت بحاجة لإضافة بيانات منظَّمة / تمييز schema بشكل منفصل؟

نعم، إذا أردت - تغطي هذه الأداة وسوم meta وOpen Graph وTwitter Card، لكن بيانات JSON-LD المنظَّمة آلية مختلفة يقرأها جوجل لأشياء مثل النتائج الغنية ولوحات المعرفة، وهو ما لا توفره وسوم Open Graph. تغطي أداتا مولّد تمييز Schema ومولّد Schema بالذكاء الاصطناعي في هذا الموقع ذلك بشكل منفصل؛ غالبًا ما تحمل الصفحة هذا المقتطف وسكربت JSON-LD جنبًا إلى جنب في وسم '<head>' الخاص بها، ويقوم كل منهما بعمل مختلف.

ما فائدة og:locale فعليًا؟

يخبر المنصات بلغة ومنطقة محتوى الصفحة - رمز مثل en_US أو ar_SA - يستخدمه فيسبوك خصوصًا لتحديد أي نصوص واجهة مُوطَّنة (مثل لغة زر "عرض المزيد") تُعرض حول الرابط المشارَك. تضبطه هذه الأداة افتراضيًا على en_US؛ غيّره إذا كانت صفحتك فعلاً بلغة أخرى، واتركه مطابقًا للغة محتواك الفعلية للحصول على أدق نتيجة.

هل يجب أن أعيد استخدام عنوان صفحتي ووصفها الحقيقيين، أم أكتب نصًا مختلفًا فقط للمشاركة الاجتماعية؟

بالنسبة لمعظم الصفحات، إعادة استخدام نفس العنوان والوصف المكتوبَين جيدًا للاثنين أبسط وأسهل في الحفاظ على الاتساق - مصدر حقيقة واحد بدلاً من نصين قد ينحرفان عن بعضهما مع الوقت. بعض المواقع تكتب عمدًا تعليقات أكثر جاذبية أو عفوية خصيصًا للمشاركة الاجتماعية، وهو خيار مشروع - تعتمد هذه الأداة افتراضيًا على النهج الأبسط للحقل المشترك، لكن لا شيء يمنعك من تعديل الأسطر الخاصة بـ Open Graph في الناتج المُولَّد لاحقًا إذا أردت أن يختلفا.

هل يمكنني العودة وإعادة توليد المقتطف لاحقًا إذا تغيّر عنواني أو صورتي؟

نعم - لا يُحفظ شيء من زيارة سابقة، لذا لا توجد حالة قديمة يجب إدارتها. فقط املأ النموذج مجددًا بالقيم المُحدَّثة وانسخ المقتطف الجديد كلما تغيّر عنوان صفحتك أو وصفها أو صورتها.

أدوات ذات صلة