مولّد Open Graph
أربعة وسوم تقرر بطاقتك
يكتب مولّد Open Graph هذا كتلة og: التي تتحكم في شكل رابطك في محادثة أو خلاصة أو رسالة. كما يعلّم الخصائص الأربع الإلزامية ويعرض البطاقة أثناء الكتابة.
- مجانيالسعر
- 4الوسوم الإلزامية
- لا يوجدالتسجيل
- لا يوجدالرفع
مولّد Open Graph
وسوم og: التي تقرر شكل الرابط المشارَك
جاهز. تُعلَّم الوسوم الأربعة الإلزامية أثناء ملئها.
ما الذي يتحكم فيه Open Graph فعلًا
الصق رابطًا في محادثة وسيحدث شيء. تظهر صورة، وعنوان، وسطر نص، واسم الموقع.
تأتي تلك البطاقة من وسوم في عنصر head. ومن دونها يخمّن التطبيق، وغالبًا ما يكون تخمينه شعارك وقائمة التنقل.
نشرت Facebook البروتوكول في 2010، ثم انتشر. واليوم تقرأ LinkedIn وWhatsApp وSlack وDiscord وSignal وTelegram كلها الخصائص الأربع نفسها.
يسمّيها البروتوكول نفسه: og:title وog:type وog:image وog:url. وكل ما عدا ذلك في هذه الصفحة تحسين اختياري.
الصورة هي البطاقة كلها
البطاقة التي فيها صورة تشغل أضعاف مساحة البطاقة التي بلا صورة. لذلك فالصورة هي الوسم الذي يستحق الإتقان أولًا.
لذلك استخدم 1200 في 630 بكسل، وهو شكل 1.91 إلى 1 الذي تقص إليه كل شبكة. ثم أبقِ الملف تحت خمسة ميغابايت تقريبًا، واستخدم دائمًا عنوان https مطلقًا.
يُقص النص داخل الصورة في البطاقات الصغيرة. بدلًا من ذلك ضع الكلمات في og:title، حيث تبقى مقروءة بأي حجم.
property لا name
تستخدم وسوم Open Graph السمة property، بينما تستخدم وسوم Twitter السمة name. لذلك إذا نسخت وسمًا من المثال الخاطئ، تتجاهله الشبكة بصمت.
يأتي الفرق من RDFa، الذي بُني عليه Open Graph. يبدو تفصيلًا صغيرًا، لكنه يفسر نصف البطاقات المعطلة، كما يوضح مرجع عنصر meta.
يكتب مولّد وسوم Open Graph هذا كل وسم بالسمة الصحيحة، لذلك لا يصبح هذا الفرق مشكلتك أبدًا.
أنواع غير website
معظم الصفحات من نوع website. المقال يضيف كاتبًا ووقت نشر، والمنتج قد يحمل سعرًا، والملف الشخصي يسمّي شخصًا. اختر النوع المناسب ثم تجاهل الباقي.
لماذا لا تتحدّث بطاقتك
تخزّن الشبكات ما تقرؤه مؤقتًا، غالبًا لأيام. تصلح وسمًا، وتشارك الرابط مجددًا، فتعود البطاقة القديمة.
لكل شبكة أداة تصحيح تفرض التحديث، وهذا العلاج الوحيد الموثوق. وتوفر Facebook وLinkedIn وX أداة لكل منها.
لذلك اضبط الوسوم قبل الإطلاق لا بعده. فالبطاقة المخزنة في يوم الحملة مشكلة بطيئة الحل.
أوصاف البطاقة تتصرف بشكل مختلف
وصف البحث ينافس تسع نتائج أخرى. أما وصف البطاقة فينافس الخلاصة كلها حوله، ويحصل على مساحة أقل.
اجعله جملة واحدة، لأن معظم الشبكات تعرض سطرين تقريبًا على الهاتف. والجملة الثانية الطويلة نادرًا ما تنجو.
قل ما يقدمه الرابط، لا ما تحتويه الصفحة. فلا يوجد بحث خلف البطاقة، لذلك لا شيء يلمّح إلى سبب اهتمام أحد بها.
ثم دع العنوان يحمل الثقل. ففي البطاقة الصغيرة يختفي الوصف أحيانًا بالكامل.
أوصاف البطاقة تتصرف بشكل مختلف
وصف البحث ينافس تسع نتائج أخرى. أما وصف البطاقة فينافس الخلاصة كلها حوله، ويحصل على مساحة أقل.
اجعله جملة واحدة. فمعظم الشبكات تعرض سطرين تقريبًا على الهاتف، لذلك نادرًا ما تنجو الجملة الثانية الطويلة.
قل ما يقدمه الرابط، لا ما تحتويه الصفحة. فلا يوجد بحث خلف البطاقة، لذلك لا شيء يلمّح إلى سبب اهتمام أحد بها.
ثم دع العنوان يحمل الثقل. ففي البطاقة الصغيرة يختفي الوصف أحيانًا بالكامل.
كتلة واحدة تخدم كل الشبكات
يعود Twitter إلى وسوم og: حين تغيب وسومه، وكذلك يفعل كل شيء آخر تقريبًا. اكتب Open Graph مرة واحدة، وأضف سطر twitter:card، وانتهى الأمر.
كيف تستخدم مولّد Open Graph
أربع خطوات، وتتابع لوحة الملاحظات الخصائص الأربع الإلزامية أثناء ملئها.
- 1
اختر النوع
يغطي website معظم الصفحات. اختر article للتدوينة، وسيظهر حقلان إضافيان للكاتب والتاريخ.
- 2
اكتب عنوانًا للبطاقة
يظهر حتى 70 حرفًا كاملًا. ويمكن أن يختلف عن عنوان صفحتك، وكثيرًا ما يجب ذلك، لأنه لا يوجد بحث خلف البطاقة.
- 3
أضف الصورة والعنوان
كلاهما يحتاج إلى عناوين https كاملة. وتعرض المعاينة قص 1.91 إلى 1، لذلك ترى ما تحتفظ به البطاقة الضيقة.
- 4
الصق الكتلة وأعد القراءة
ضعها في head، ثم مرّر الرابط في أداة تصحيح كل شبكة. وإلا فقد تبقى البطاقة المخزنة أيامًا.
ما الذي يميز أداة Open Graph هذه
معظم المولّدات تُخرج كل خاصية في المواصفة. لكن هذه الأداة تكتب ما تحتاجه البطاقة وتسمّي ما ينقص.
تتابع الأربع الإلزامية
يحتفظ العنوان والنوع والصورة وurl كل منها بملاحظة حتى تملأه. ولا شيء آخر يدّعي أنه إلزامي.
معاينة مباشرة للبطاقة
ترى شكل القص وأطوال القطع أثناء الكتابة، لأن معظم البطاقات تخطئ هناك.
سمات صحيحة في كل مكان
تستخدم وسوم og: السمة property، بينما تستخدم وسوم twitter: السمة name. والخلط بينهما أكثر أسباب البطاقات المعطلة شيوعًا.
لا كتلة Twitter مكررة
يقرأ Twitter وسوم og: بالفعل، لذلك يضيف تحديد المربع twitter:card والنص البديل للصورة فقط. فتكرار الشيء لا يفيد أحدًا.
حقول المقال حين تحتاجها
يظهر الكاتب ووقت النشر للمقالات ويبقيان مخفيين في غيرها. ففي النهاية، النموذج المليء بحقول لا صلة لها يدعو إلى إجابات خاطئة.
تبقى ملفاتك في هذه العلامة
تمر من هنا نصوص حملات لم تُطلق بعد. ولأن الصفحة لا تجلب شيئًا، لا يصل أي عنوان ولا أي نص إلى خادم.
قواعد لبطاقات تبدو صحيحة
تفشل البطاقات بعدد قليل من الطرق المتوقعة. وكل قاعدة أدناه تغلق واحدة منها.
- استخدم عنوان صورة https مطلقًا. تتجاهل معظم الشبكات المسارات النسبية وhttp العادي. فالزاحف ليس متصفحك، ولا يملك سياق الصفحة لحلّها.
- اجعل الصورة 1200 في 630. هذا هو حجم صورة og الذي تقص إليه كل شبكة. والصور الأصغر تنتهي ببطاقة مربعة صغيرة أو بلا بطاقة.
- أبعد النص المهم عن الصورة. القص يقطع الأطراف، والبطاقات الصغيرة تصغّر كل شيء. لذلك مكان الكلمات في og:title، حيث تبقى مقروءة.
- اكتب عنوانًا للبطاقة لا للصفحة. عنوان البحث يجيب عن استفسار. أما عنوان البطاقة فيجب أن يعمل دون سياق، في خلاصة، بجانب أشياء تتنافس على النظرة نفسها.
- وجّه og:url إلى العنوان الأساسي. تتراكم المشاركات على ذلك العنوان. لذلك إن اختلف عن وسم canonical، تنقسم الأعداد بين نسختين من الصفحة نفسها.
- أضف og:image:alt. يقرؤه قارئ الشاشة بدل الصورة، ويكلف سطرًا واحدًا. ورغم أن قلة من المواقع تهتم به، فهذا سبب ضعيف لتخطيه.
- أعد القراءة بعد كل تغيير. تخزّن الشبكات مؤقتًا بشراسة. وحتى تفرض التحديث، سيرى الجميع البطاقة القديمة.
- سمِّ الموقع أيضًا. يضع og:site_name اسم منشورك بجانب العنوان. وفي خلاصة مزدحمة يؤدي ذلك السطر عملًا يعادل العنوان.
- اختبر على هاتف. يفتح معظم الناس الروابط في تطبيق دردشة على شاشة صغيرة. أما معاينة الحاسوب فهي المتساهلة.
ستة أخطاء في Open Graph تكسر البطاقات
كل منها ينتج صفحة تعمل تمامًا ورابطًا يبدو معطلًا.
استخدام name بدل property
تحتاج وسوم Open Graph إلى السمة property. ومع name يكون الوسم HTML صالحًا ويُتجاهل تمامًا.
مسار صورة نسبي
لأن الزاحف لا يملك أساسًا يحلّه عليه، تصل البطاقة دون أي صورة.
وسوم مضافة بـJavaScript
معظم الزواحف تقرأ HTML كما يُقدَّم ولا تشغّل شيئًا. لذلك تبقى الوسوم المضافة بعد التحميل غير مرئية لها.
صورة خلف تسجيل الدخول
لأن كلمة مرور بيئة الاختبار أو قاعدة منع الربط تحجب الزاحف، تعود البطاقة إلى نص عادي.
وسما og:image
يضع القالب وسمًا، ثم تضع إضافة وسمًا آخر. فتختار الشبكات واحدًا، لكن نادرًا ما يكون الذي أردته.
توقع تحديث فوري
يدوم التخزين المؤقت أيامًا. لذلك مرّر الرابط في أداة تصحيح كل شبكة، بدل مشاركته مجددًا والأمل.
أسئلة يطرحها الناس عن Open Graph
ما وسوم Open Graph التي تحتاجها البطاقة؟
أربعة: og:title وog:type وog:image وog:url. يسميها البروتوكول البيانات الوصفية الأساسية، كما أن البطاقة بلا صورة بطاقة أصغر بكثير.
ما حجم صورة og الذي يجب أن أستخدمه؟
استخدم 1200 في 630 بكسل، وهو ما يطابق نسبة 1.91 إلى 1 التي تقص إليها الشبكات. كما يجب أن تبقى تحت خمسة ميغابايت وتُقدَّم عبر https.
هل أحتاج إلى وسوم Twitter أيضًا؟
فقط twitter:card، والنص البديل للصورة إن أردته. في الواقع يقرأ Twitter الوسوم og:title وog:description وog:image وog:url حين تغيب وسومه الخاصة.
لماذا لم تتغير بطاقتي؟
خزّنت الشبكة البطاقة القديمة مؤقتًا. لذلك استخدم أداة التصحيح الخاصة بها لفرض قراءة جديدة، لأن مشاركة الرابط مجددًا تعرض غالبًا النسخة المخزنة.
هل يؤثر Open Graph في SEO؟
ليس مباشرة. فهو يؤثر في عدد النقرات على الرابط المشارَك، كما قال Google إنه قد يستخدم og:title كإشارة عند إعادة كتابة رابط العنوان.
هل يمكنني استخدام مخرجات مولّد وسوم Open Graph على أي منصة؟
نعم. تعمل الكتلة نفسها على Facebook وLinkedIn وWhatsApp وSlack وDiscord وTelegram وSignal، لأنها كلها تقرأ البروتوكول نفسه.
أين توضع هذه الوسوم؟
داخل عنصر head، بجانب وسومك الوصفية الأخرى. الترتيب لا يهم، لكن إبقاءها معًا يسهّل مراجعتها لاحقًا.
ماذا يحدث إن لم أضع أي وسوم og؟
تخمّن الشبكة من صفحتك. وغالبًا ما يعني ذلك شعارك وعنوانًا من القائمة وأول جملة تجدها، وهذا نادرًا ما يبيع الرابط.
هل يمكن لعدة صفحات مشاركة صورة واحدة؟
يمكنها ذلك، والصورة الافتراضية للموقع أفضل من لا شيء. لكن الصفحة التي لها صورة خاصة تكسب نقرات أكثر، لذلك استخدم الافتراضية فقط حيث لا توجد صورة محددة.
هل يمكن لعدة صفحات مشاركة صورة واحدة؟
يمكنها ذلك، والصورة الافتراضية للموقع أفضل من لا شيء. لكن الصفحة التي لها صورة خاصة تكسب نقرات أكثر، لذلك استخدم الافتراضية فقط حيث لا توجد صورة محددة.
هل يُرفع أي شيء أكتبه هنا؟
لا. يكتب متصفحك الوسوم، ولا تجلب الصفحة أي عنوان. لذلك لا يخزّن هذا الموقع شيئًا ولا يسجل شيئًا.
أدوات للروابط المشارَكة
تتكون البطاقة من وسوم وصورة. وتغطي هذه الثلاث النصفين.
مولّد Twitter Card
وسوم twitter:، وفقط تلك التي لا مقابل لها في og:.
افتح الأداة ←محوّل الصور
حوّل صورة البطاقة إلى WebP أو JPG أو PNG في متصفحك.
افتح الأداة ←مولّد الوسوم الوصفية
وسوم head التي تجاور كتلة og:.
افتح الأداة ←
هل أنت مستعد لإصلاح بطاقتك؟
املأ أربع خصائص، وراقب المعاينة، والصق الكتلة في head. مولّد Open Graph مجاني، ولا يحتاج إلى حساب، ويعمل كليًا في متصفحك.