معاينة Open Graph أونلاين – اختبار بطاقة مشاركة الرابط
عاين بطاقة مشاركة رابطك قبل النشر، وأنشئ وسوم Open Graph وTwitter Card من العنوان والوصف والرابط والصورة واسم الموقع. المعاينة تقريبية لأن كل منصة قد تعرض البطاقة بطريقة مختلفة.
أداة Open Graph Preview
اكتب بيانات المشاركة وستتحدث البطاقة والكود الناتج مباشرة.
بيانات المشاركة
معاينة بطاقة المشاركة
قلّل حجم ملفات PDF مباشرة من المتصفح مع مستويات ضغط مختلفة ومقارنة الحجم قبل وبعد.
طريقة استخدام Open Graph Preview
أدخل رابط الصفحة والعنوان والوصف واسم الموقع، ثم أضف رابط صورة المشاركة. ستظهر بطاقة تقريبية مباشرة، وفي الوقت نفسه تنشئ الأداة وسوم Open Graph وTwitter Card الجاهزة للنسخ.
- اكتب اسم الموقع ورابط الصفحة.
- أدخل عنوانًا ووصفًا واضحين للمشاركة.
- ضع رابط صورة عامة ومباشرة.
- راجع المعاينة والكود الناتج.
- انسخ الوسوم وأضفها مرة واحدة في إعدادات الصفحة أو القالب.
إذا كانت منصتك أو إضافة SEO تنشئ هذه الوسوم تلقائيًا، عدّل القيم من إعداداتها بدل إضافة نسخة ثانية يدويًا.
ما هو Open Graph؟
Open Graph هو مجموعة وسوم تصف الصفحة عند مشاركتها، مثل العنوان والوصف والرابط والصورة واسم الموقع. كثير من المنصات والخدمات تقرأ هذه البيانات عند تجهيز بطاقة الرابط.
- og:title: عنوان المشاركة.
- og:description: وصف مختصر.
- og:url: رابط الصفحة.
- og:image: صورة المشاركة.
- og:site_name: اسم الموقع.
- og:type: نوع المحتوى مثل website أو article.
كل منصة قد تختار طريقة مختلفة لعرض هذه المعلومات، لذلك لا تتعامل مع المعاينة كنسخة مطابقة 100% لما سيظهر فعليًا.
ما هي Twitter Card؟
تضيف الأداة أيضًا وسوم Twitter Card المتوافقة مع بطاقات المشاركة، وتستخدم summary_large_image عند وجود صورة، أو summary عند عدم إدخال صورة.
ما مقاس صورة Open Graph المناسب؟
الصورة الأفقية العريضة مناسبة غالبًا لبطاقات المشاركة، ونسبة قريبة من 1.91:1 شائعة الاستخدام. لكن القص النهائي وحجم العرض يختلفان بين المنصات والأجهزة.
اجعل النصوص المهمة بعيدة عن الحواف ولا تعتمد على تفاصيل صغيرة جدًا داخل الصورة، لأن بعض المنصات قد تقص أجزاء منها.
لماذا لا تظهر الصورة في المعاينة؟
يجب أن يكون رابط الصورة مباشرًا وعامًا ويمكن للمتصفح الوصول إليه. قد تمنع بعض الخوادم عرض الصورة من مواقع أخرى، أو يكون الرابط صفحة HTML بدل ملف صورة فعلي.
أين أضع وسوم Open Graph؟
توضع عادة داخل عنصر <head> في الصفحة. Blogger وWordPress وبعض إضافات SEO يمكنها توليدها تلقائيًا، لذلك تحقق من الشفرة الموجودة قبل إضافة وسوم جديدة لتجنب التكرار.
ما هو Open Graph؟
Open Graph هو مجموعة من وسوم الميتا تساعد بعض المنصات والخدمات على فهم العنوان والوصف والصورة والرابط المفضل عند مشاركة صفحة ويب.
من أشهر الوسوم المستخدمة: og:title وog:description وog:image وog:url.
ما وظيفة كل وسم Open Graph؟
| الوسم | وظيفته |
|---|---|
| og:title | عنوان بطاقة المشاركة |
| og:description | الوصف المختصر الظاهر مع الرابط |
| og:image | الصورة المفضلة لبطاقة المشاركة |
| og:url | عنوان الصفحة الأساسي الذي تصفه البطاقة |
| og:type | نوع المحتوى مثل website أو article حسب السياق |
ما هو og:image ولماذا هو مهم؟
og:image يحدد الصورة التي تفضّل استخدامها في معاينة الرابط. يجب أن تكون الصورة متاحة على رابط عام يمكن للخدمة الوصول إليه، ويفضل استخدام HTTPS.
لا تستخدم رابطًا محليًا من جهازك، لأن المنصة التي تنشئ المعاينة لن تتمكن من الوصول إليه.
ما المقاس المناسب لصورة Open Graph؟
من المقاسات الشائعة للصور الأفقية المستخدمة في معاينات المشاركة 1200×630 بكسل تقريبًا، لكن طريقة القص والعرض تختلف بين المنصات.
ضع العناصر المهمة والنصوص الأساسية بعيدًا عن الحواف، واختبر المعاينة قبل الاعتماد على التصميم النهائي.
هل يجب أن يكون og:title مطابقًا لـ Title؟
ليس من الضروري أن يكون النص مطابقًا حرفيًا. يمكن أن يكون Title موجهًا أكثر لنتيجة البحث، بينما يكون og:title مختصرًا أو مناسبًا لطريقة مشاركة الرابط.
مع ذلك، يجب أن يظل كلاهما يصف الصفحة نفسها دون تضليل أو تغيير موضوع المحتوى.
ما الفرق بين Open Graph وMeta Description؟
Meta Description يصف الصفحة لمحركات البحث والخدمات التي تقرأ هذا الوسم، بينما og:description يستخدم ضمن بيانات Open Graph لمعاينات المشاركة.
يمكنك استخدام نص متشابه في الاثنين، أو تخصيص وصف مختلف عندما تحتاج طريقة تقديم مختلفة للمشاركة.
ما الفرق بين Open Graph وTwitter Card؟
Open Graph وTwitter Card مجموعتان مختلفتان من الوسوم يمكن استخدامهما معًا. بعض الخدمات قد تعتمد Open Graph، بينما يمكن لـX/Twitter قراءة وسوم Twitter Card عند وجودها.
لإنشاء المجموعة الكاملة من الوسوم يمكنك استخدام مولد Meta Tags.
هل Open Graph يؤثر مباشرة في ترتيب Google؟
Open Graph مخصص أساسًا لمعاينات المشاركة الاجتماعية وليس بديلًا عن عناصر SEO الأساسية أو جودة المحتوى.
لتحسين معاينة نتيجة البحث نفسها استخدم أداة معاينة نتائج Google.
هل المعاينة هنا تطابق كل منصة تمامًا؟
لا. هذه معاينة تقريبية تساعدك على مراجعة المعلومات والتوازن البصري قبل النشر، لكن كل منصة قد تعرض الصورة أو النصوص بطريقة مختلفة.
كما قد تحتفظ بعض الخدمات بنسخة مؤقتة من بيانات الرابط، لذلك قد لا يظهر التغيير فورًا بعد تحديث الوسوم.
كيف أكتب عنوان ووصف مشاركة أفضل؟
- اجعل العنوان واضحًا ويصف الصفحة مباشرة.
- استخدم وصفًا مختصرًا يشرح الفائدة الأساسية.
- تجنب حشو الكلمات المفتاحية.
- استخدم صورة مرتبطة فعليًا بالمحتوى.
- لا تضع نصوصًا صغيرة جدًا داخل الصورة.
- تأكد من أن الرابط والصورة متاحان للعامة.
مثال على وسوم Open Graph
<meta property="og:title" content="عنوان الصفحة" />
<meta property="og:description" content="وصف مختصر للصفحة" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page.html" />
<meta property="og:type" content="website" />أين أضع وسوم Open Graph؟
توضع داخل قسم <head> من الصفحة أو من خلال إعدادات القالب أو نظام إدارة المحتوى.
إذا كان النظام ينشئ Open Graph تلقائيًا، راجع المصدر أولًا قبل إضافة نسخة ثانية حتى لا تنشئ وسومًا مكررة أو متعارضة.
أخطاء شائعة في Open Graph
- استخدام رابط صورة غير متاح للعامة.
- وضع صورة صغيرة جدًا أو بنسبة غير مناسبة.
- اختلاف العنوان والوصف عن محتوى الصفحة الحقيقي.
- استخدام رابط og:url غير صحيح.
- تكرار الوسوم أكثر من مرة بقيم متعارضة.
- توقع أن المعاينة ستكون متطابقة على كل المنصات.
الخصوصية
بيانات النص والكود تُعالج داخل المتصفح. عند إدخال رابط صورة، يحاول المتصفح تحميل الصورة من ذلك الرابط فقط لكي يعرض المعاينة.
أسئلة شائعة عن Open Graph
هل المعاينة مطابقة لفيسبوك أو X؟
لا. هي محاكاة عامة تساعد على التخطيط، بينما طريقة العرض الفعلية تختلف حسب المنصة والجهاز والبيانات المخزنة لديها.
هل يجب إضافة صورة مشاركة؟
ليست شرطًا تقنيًا لكل صفحة، لكنها مفيدة للحصول على بطاقة مرئية أقوى عندما تدعم المنصة عرض الصور.
هل يمكن استخدام نفس الصورة في og:image وTwitter Card؟
نعم. الأداة تستخدم رابط الصورة نفسه في الوسمين لتبسيط الإعداد.
لماذا تظهر بطاقة قديمة بعد تعديل الوسوم؟
بعض المنصات تخزن معاينة الرابط مؤقتًا، لذلك قد لا ينعكس التغيير مباشرة حتى تعيد المنصة جلب بيانات الصفحة.
هل يجب أن تكون صورة Open Graph على HTTPS؟
يفضل استخدام رابط HTTPS عام ومستقر حتى تستطيع خدمات المشاركة الوصول إلى الصورة.
هل يمكن استخدام نفس الصورة لكل صفحات الموقع؟
يمكن ذلك، لكن تخصيص صورة مرتبطة بكل صفحة أو مقال يجعل المشاركة أوضح وأكثر ارتباطًا بالمحتوى.
هل أحتاج Open Graph وTwitter Card معًا؟
ليس شرطًا في كل حالة، لكن استخدام المجموعتين قد يوفر تحكمًا أفضل في معاينات المشاركة عبر خدمات مختلفة.
لماذا قد تظهر صورة قديمة بعد تغيير og:image؟
بعض المنصات تحتفظ بنسخة مؤقتة من بيانات الرابط، لذلك قد لا تُحدّث الصورة فورًا.
هل الأداة تنشر الوسوم على موقعي تلقائيًا؟
لا، الأداة تساعدك على المعاينة وإنشاء الوسوم، ثم تنسخ الكود وتضيفه إلى موقعك بالطريقة المناسبة.