أسوأ وقت لاكتشاف معاينة الارتباط المعطل هو بعد تغريدة الإطلاق. تقضي أسبوعًا على الصفحة، وتكتب الإعلان، وتضغط على إرسال - والبطاقة التي تظهر هي مستطيل رمادي بعنوان مقطوع ولا توجد صورة، لأن og:image أشار إلى /images/og.png بدلا من https://yoursite.com/images/og.png. المنشور خارج بالفعل. البطاقة مخزنة بالفعل. عليك إصلاحه ثم مطالبة الجميع بإعادة المشاركة.
آن افتح الرسم البياني المعاينة تحل ذلك عن طريق نقل الشيك مبكرًا. بدلاً من النشر والأمل، تنظر إلى ما ستكون عليه البطاقة بينما لا تزال العلامات قابلة للتحرير. هذه هي الفرضية الكاملة لل افتح معاينة الرسم البياني الأداة: أدخل علاماتك، أو الصق العلامات التي لديك بالفعل، وشاهد بطاقات Facebook وX وLinkedIn وSlack وDiscord التقريبية التي يتم تقديمها جنبًا إلى جنب، مع حكم التمرير/التحذير/الفشل في كل حقل.
السبب وراء عدم كفاية المعاينة الواحدة هو أن كل منصة تقرأ نفس العلامات وتعرضها بشكل مختلف. X يقتطع الأوصاف بحوالي 110 حرفًا؛ يعرض Facebook ما يقرب من 155. كثيرًا ما يسقط LinkedIn الوصف بالكامل ويظهر فقط الصورة والعنوان والمجال. يقوم Slack بدمج الأمر برمته في مرفق مضغوط بسكة ملونة. يدمج Discord الوصف بشكل بارز ولكنه يقلص الصورة. يمكن قطع العنوان الذي يتناسب بشكل جميل مع بطاقة Facebook في منتصف الكلمة على X، ولن تلاحظ ذلك أبدًا إلا إذا نظرت إلى كليهما.
أنا أبني تولز.ديف وشحن الصفحات باستمرار، وقد سئمت من حلقة النشر والتحقق والإصلاح. تعمل الأداة بالكامل في المتصفح ولا تجري أي مكالمات عبر الشبكة على الإطلاق - فهي لا تجلب عنوان URL الخاص بك أبدًا - مما يعني أنها تعمل أيضًا مع الصفحات التي لم يتم نشرها بعد، أو التي تقع خلف تسجيل الدخول، أو التي تعيش على نطاق مرحلي لا يمكن لمصححي أخطاء النظام الأساسي الرسميين الوصول إليها.
ليرة تركية؛DR: تتحكم علامات الرسم البياني المفتوح في شكل الرابط الخاص بك عند مشاركته. كل منصة تقرأ نفس الشيء
og:العلامات ولكنها تقتطعها وتضعها بشكل مختلف، لذا فإن معاينة أحد الأنظمة الأساسية لا تخبرك شيئًا عن الأنظمة الأساسية الأخرى. ال افتح معاينة الرسم البياني تعرض الأداة خمس بطاقات نظام أساسي من مجموعة واحدة من العلامات، وتتحقق من صحة كل حقل مقابل حدود النظام الأساسي الحالية، وتوزع كتلة علامات موجودة إذا كان لديك واحدة بالفعل، وتسلمك نسخة جاهزة<meta>الكتلة - من جانب العميل بالكامل، بدون كشط أو تحميل.
الميزات الرئيسية
خمس معاينات للنظام الأساسي من مجموعة واحدة من العلامات
تعرض الأداة بطاقات تقريبية لـ Facebook وX في كليهما summary_large_image و summary الأنماط، LinkedIn، Slack، وDiscord. يقرؤون جميعًا من نفس الحقول، لذلك عندما تقطع عنوانًا، فإنك تشاهده يتم تحديثه في كل مكان مرة واحدة. النقطة ليست الدقة المثالية للبكسل - تعيد الأنظمة الأساسية تصميم بطاقاتها دون سابق إنذار - ولكن الدقة النسبية: النسب الصحيحة، ونقاط الاقتطاع الصحيحة، والترتيب الصحيح للحقل، حتى تتمكن من معرفة النظام الأساسي الذي ينكسر.
لصق وتحليل العلامات الموجودة لديك بالفعل
إذا كانت الصفحة موجودة، فنادرًا ما ترغب في إعادة كتابة تسعة حقول. لصق HTML الخام - الكل <head>، تفريغ مصدر العرض، أو كتلة فضفاضة من <meta> الأسطر - في مربع التحليل ويقوم المحلل اللغوي المدمج بسحب كل منها og: و twitter: ضع علامة على أنه يتعرف عليها ويقوم بتحميلها في النموذج. يعتمد المحلل اللغوي على regex بدلاً من DOM، وهو ما يتيح تشغيل نفس التعليمات البرمجية في المتصفح وفي العقدة وفي بناء سطح المكتب دون تغيير.
التحقق من صحة كل حقل بحدود حقيقية
يحصل كل حقل على حالة تمرير أو تحذير أو فشل. فشل العنوان الذي يزيد عن 60 حرفًا تقريبًا. يتم تحذير الوصف الذي يتراوح بين 110 و155 حرفًا، لأنه يُقرأ بالكامل على Facebook وLinkedIn ولكن يتم قطعه على X.A قريب og:image يفشل المسار تمامًا - الكاشطات لا تحلها. آن og:image يقدم على عادي http يحذر، لأن العديد من الأنظمة الأساسية ترفض عرض صور غير HTTPS. أ twitter:site القيمة التي ليست مقبضًا صالحًا تفشل. الأحكام محددة بما يكفي للعمل عليها بدلاً من كونها عامة وحاصل؛ يبدو جيدًا وحاصلًا؛.
قواعد الصورة التي يمكنك اتباعها بالفعل
تفترض بطاقات الصور الكبيرة الموجودة على كل منصة رئيسية صورة بنسبة 1.91:1؛ 1200x630 بكسل هو الحجم الذي يرضيهم جميعًا مرة واحدة. تنص الأداة على أن الهدف بشكل صريح، وتضع علامة على أوضاع الفشل التي تجعل الصور تختفي بصمت، و- لأن البطاقة التي تحتوي على صورة مكسورة هي الخطأ الوحيد الأكثر شيوعًا في Open Graph - تجعل الصورة فعلية og:image عنوان URL في كل معاينة، يعود إلى عنصر نائب واضح إذا تعذر تحميل الصورة.
كتلة تعريف جاهزة للنسخ، تم الهروب منها بشكل صحيح
الإخراج الذي تم إنشاؤه عبارة عن كتلة علامة كاملة، وليس جزءًا. يتضمن og:image:width و og:image:heightوهو أمر مهم أكثر مما يدركه معظم الناس: بدونها، تعرض بعض الكاشطات بطاقة نصية فقط عند الجلب الأول ولا تظهر الصورة إلا بعد تنزيلها وقياسها، وهو ما يمكن أن يحدث بعد عدة ساعات. يتم تجنب القيم بتنسيق HTML، لذا لا يمكن لعلامة الضم أو الاقتباس في الوصف الخاص بك أن يخرج عن السمة ويفسد العلامات الخاصة بك.
100% من جانب العميل، بدون كشط
الأداة لا تطلب عنوان URL الخاص بك أبدًا. هذا متعمد، ومن الجدير أن نفهم السبب: لا يمكن للمتصفح جلب صفحة طرف ثالث عشوائية بسبب سياسة نفس الأصل، ويعني الجلب من جانب الخادم شحن عناوين URL التي لم يتم إصدارها إلى شخص آخر '؛s السجلات. يؤدي العمل من العلامات التي توفرها إلى تجنب المشكلات وفتح الحالة التي لا يستطيع مصححو الأخطاء الرسميون تقديمها - التحقق من صحة الصفحة التي لم يتم تشغيلها بعد. يرى خصوصية البيانات في الأدوات عبر الإنترنت للتفكير الأوسع.
كيفية استخدام أداة معاينة الرسم البياني المفتوح
الخطوة 1: قم بتحميل العلامات الخاصة بك
لديك طريقان. إذا كنت تكتب البيانات الوصفية من الصفر، فاملأ النموذج og:title، og:description، og:image، og:url، og:site_name، ثم اختر og:type و أ twitter:card النمط وإضافة الخاص بك twitter:site و twitter:creator مقابض.
إذا كانت الصفحة تحتوي بالفعل على علامات، فقم بلصقها بدلاً من ذلك. افتح الصفحة، واعرض المصدر (وليس مفتش المتصفح - المزيد عن هذا التمييز أدناه)، وانسخ <head>، وإسقاطه في مربع التحليل. انقر فوق علامات التحليل ويتم تحميل كل شيء تم التعرف عليه في النموذج. يفهم المحلل اللغوي الأسماء المستعارة أيضًا og:image:secure_url و og:image:url كلاهما يغذي حقل الصورة، و twitter:title، twitter:description، و twitter:image يتم استخدامها كاحتياطيات عندما تكون og: المعادلات غائبة - وهو ما يعكس كيفية قيام الأنظمة الأساسية نفسها بحل العلامات.
الخطوة 2: اقرأ لوحة التحقق
يتم ترتيب قائمة التحقق من الصحة بالطريقة التي تهم بها الحقول. إصلاح حالات الفشل أولاً: مفقود og:image، مسار صورة نسبي، عنوان يزيد عن الحد بـ 20 حرفًا. ثم انظر إلى التحذيرات، التي تتعلق في الغالب بالفجوة بين الأنظمة الأساسية - وهو وصف جيد لفيسبوك ولكنه طويل بالنسبة لـ X، وهو مفقود og:site_name وهذا يعني أن بطاقتك تعرض اسم مضيف مكشوفًا بدلاً من علامتك التجارية.
تمنحك العدادات الموجودة أعلى اللوحة قراءة سريعة. فشل الصفر وبعض التحذيرات هي حالة قابلة للشحن تمامًا؛ التحذيرات هي مقايضات وليست أخطاء.
الخطوة 3: مقارنة البطاقات
هذه هي الخطوة التي يتخطاها الأشخاص، وهي التي تكتشف المشكلات الحقيقية. مسح جميع المعاينات الستة. هل تم قطع العنوان على بطاقة ملخص X؟ هل يختفي الوصف على LinkedIn (عادةً ما يختفي - هذا متوقع)؟ هل تبدو الصورة عند 1.91:1، أم أن شعارك تم اقتصاصه لأنك صممت رسمًا مربعًا والبطاقة تجعله عريضًا؟
قم بقصها وإعادة فحصها حتى تقرأ كل بطاقة بشكل نظيف. نظام مفيد: اكتب إلى أقصى حد. إذا كان وصفك يقرأ بالكامل عند 110 أحرف، فإنه يقرأ بالكامل في كل مكان. إذا كان عنوانك يعمل عند 55، فإنه يبقى على قيد الحياة في كل بطاقة وكل تخطيط للهاتف المحمول.
الخطوة 4: انسخ الكتلة التعريفية وشحنها
انسخ الكتلة التي تم إنشاؤها إلى صفحتك '؛s <head>. في إطار العمل - Next.js، Nuxt، SvelteKit، Astro - لن تقوم بلصق الخام <meta> العلامات، لكن الكتلة لا تزال مصدر الحقيقة الخاص بك فيما يتعلق بالحقول التي يجب ملؤها بالضبط في إطار العمل و#39؛s metadata API.
ثم قم بالخطوة التي ينسىها الجميع: إعادة كشط عنوان URL في كل منصة ومصحح أخطاء #39؛s. شحن الإصلاح لا يؤدي إلى مسح البطاقة المخزنة مؤقتًا. ال مولد العلامات هي الأداة المصاحبة هنا إذا كنت بحاجة أيضًا إلى علامات تحسين محركات البحث القياسية - العنوان والوصف والروبوتات الأساسية - التي تعيش جنبًا إلى جنب مع العلامات الاجتماعية.
كيف يعمل بروتوكول الرسم البياني المفتوح فعليًا
بدأ Open Graph في Facebook في عام 2010 كوسيلة لتحويل صفحة الويب إلى عقدة في رسم بياني اجتماعي. تلاشى الطموح؛ ظلت مفردات العلامات عالقة، وأصبح الآن المعيار الفعلي الذي يقرأه Facebook وLinkedIn وSlack وDiscord وWhatsApp وPinterest وiMessage وSignal ومعظم برامج كشف الارتباط الأخرى.
الآلية بسيطة. عند مشاركة رابط، يرسل النظام الأساسي روبوتًا إلى عنوان URL الخاص بك - facebookexternalhit، LinkedInBot، Slackbot-LinkExpanding، Discordbot، Twitterbot. يطلب هذا الروبوت HTML الخام، ويقرأ <head>، يستخرج og: و twitter: العلامات الوصفية، ويبني بطاقة. إنه HTTP GET واحد وتحليل. الروبوت ليس متصفحًا: فمعظم برامج الزحف هذه لا تنفذ JavaScript، وهو السبب الجذري لنوع كامل من الأخطاء.
العلامات نفسها
يتم وصف أربع علامات كما هو مطلوب في البروتوكول: og:title، og:type، og:image، و og:url. في الممارسة العملية og:description و og:site_name تحمل نفس القدر من الحمل، لأنه بدونها تكون البطاقة إما عارية أو تعود إلى أي نص يمكن أن تجده المكشطة على الصفحة. العلامات تستخدم property السمة، لا name- <meta property="og:title" content="..." />- ما الذي يعرقل الناس لأن علامات تويتر تفعل العكس وتستخدم name. معظم المحللين يتسامحون مع هذا الأمر، لكن المنصات '؛ أدوات التحقق الخاصة ليست دائمًا كذلك، لذا فإن الأمر يستحق القيام به بشكل صحيح.
og: مقابل تويتر: الأسبقية
يقرأ X علامات بطاقة Twitter أولاً ويعود إلى Open Graph عند غيابها. وهذا يعني صفحة تحتوي على فقط og:title، og:description، و og:image لا تزال تنتج بطاقة X عاملة - فالاحتياطي حسب التصميم.
إذن ما يحتاج في الواقع إلى twitter: علامة؟ ثلاثة اشياء. twitter:card يقرر التخطيط، ولا يوجد مكافئ للرسم البياني المفتوح: بدونه، يختار X نمط البطاقة بناءً على ما يجده، وهو ليس قرارًا تريد تفويضه. twitter:site ينسب البطاقة إلى حساب العلامة التجارية. twitter:creator ينسب الفضل للمؤلف. كل شيء آخر يمكن أن يأتي بأمان من Open Graph.
القاعدة العملية: اكتب علامات Open Graph كاملة، ثم أضف هذه العلامات الثلاثة بالضبط twitter: العلامات. تكرار twitter:title و twitter:description غير ضار ولكنه لا معنى له إلا إذا كنت تريد حقًا نسخة مختلفة على X عن أي مكان آخر - وهو خيار مشروع في بعض الأحيان، نظرًا لأن الاقتطاع الأكثر إحكامًا لـ X'؛ يبرر أحيانًا وصفًا أقصر وأكثر قوة.
أبعاد الصورة ونسبها ومشكلة الاقتصاص
نسبة العرض إلى الارتفاع 1.91:1 هي الرقم المطلوب استيعابه. تصل إلى 1200x630 بكسل، وهي كبيرة بما يكفي لشاشات شبكية العين، وهي ما تقدمه كل من Facebook وLinkedIn وX دون تشويه لبطاقات الصور الكبيرة.
وضع الفشل دقيق: لا ترفض الأنظمة الأساسية عادةً الصورة خارج النسبة، بل تقوم باقتصاصها. قم بتحميل رسم مربع مقاس 1000x1000 وسيقوم Facebook بقصه في المنتصف إلى 1.91:1، مما يؤدي إلى قطع ثلث تقريبًا من الأعلى والأسفل. إذا كان النص الرئيسي الخاص بك متمركزًا عموديًا، فإنه يبقى على قيد الحياة؛ إذا وضعت شعارًا في الأعلى، فلن يحدث ذلك. احتفظ بمحتوى ذي معنى داخل منطقة آمنة وبعيدًا عن الحواف، لأن الأسطح المختلفة تظهر بكميات مختلفة قليلاً.
المدمجة X summary البطاقة هي الاستثناء. إنها تريد صورة مربعة، بحد أدنى 144x144، وسوف تقوم بقص لافتة مقاس 1.91:1 في المربع - مما يؤدي عادةً إلى تدميرها. إذا كنت تستخدم عمدا summary، قم بتوفير صورة مربعة؛ إذا قمت بتوفير لافتة، استخدم summary_large_image.
احتفظ بحجم الملف أقل من حوالي 5 ميجابايت (السقف الموثق لـ Facebook'؛s؛ الأنظمة الأساسية الأخرى أكثر صرامة في الممارسة العملية)، أو بمثابة PNG، أو JPEG، أو ويب بي، واستخدم دائمًا عنوان URL المطلق لـ HTTPS. المسارات النسبية والبروتوكول النسبي // عناوين URL هي الطريقتان الأكثر شيوعًا لفشل ظهور الصورة بصمت.
لماذا تقوم الكاشطات بتخزين ذاكرة التخزين المؤقت، وكيفية كسر ذاكرة التخزين المؤقت
تقوم كل منصة بتخزين نتيجة تجريف صفحتك مؤقتًا - عادةً لمدة سبعة أيام تقريبًا، وأحيانًا لفترة أطول. هذا ليس عنادًا: يمكن مشاركة رابط شائع آلاف المرات في الساعة، وإعادة جلب صفحتك لكل مشاركة سيكون بمثابة هجوم رفض الخدمة الذي تجريه المنصة. لذلك يقومون بالكشط مرة واحدة وإعادة الاستخدام.
والنتيجة هي أن إصلاح العلامات الخاصة بك لا يؤدي إلى إصلاح البطاقة. تستمر المعاينة القديمة لكل مشاركة موجودة وللمشاركات الجديدة حتى تنتهي صلاحية ذاكرة التخزين المؤقت. لفرض التحديث:
- فيسبوك: مصحح أخطاء المشاركة، باستخدام "؛ كشط مرة أخرى وكوت؛ زر. يؤدي هذا أيضًا إلى مسح ذاكرة التخزين المؤقت التي يستخدمها Instagram وWhatsApp.
- لينكدإن: مفتش البريد. يؤدي إدخال عنوان URL إلى حدوث خدش جديد.
- العاشر: لقد تم إهمال أداة التحقق من صحة البطاقة وأصبح الوصول إليها غير متسق. ومن الناحية العملية، يعد نشر الرابط هو التحديث الوحيد الموثوق به.
- سلاك: تنتهي صلاحية ذاكرة التخزين المؤقت لـ Unfurl من تلقاء نفسها؛ تؤدي إضافة معلمة استعلام غير ضارة إلى ظهور جديد على الفور.
- الخلاف: مشابه - سلسلة الاستعلام التي تم تغييرها هي الحل العملي.
خدعة سلسلة الاستعلام هذه هي فتحة الهروب العالمية https://example.com/page?v=2 هو، بالنسبة للمكشطة، عنوان URL مختلف بدون إدخال مخزن مؤقتًا. استخدمه للاختبار، وليس للرابط الأساسي الذي تنشره وتحتفظ به بالفعل og:url الإشارة إلى العنوان الأساسي النظيف بحيث يتم دمج مشاركات المتغيرات ذات المعلمات بشكل صحيح. ال URL ترميز/فك تشفير URL مفيد عندما تصبح هذه المعلمات معقدة.
ماذا يحدث عندما تكون العلامات مفقودة
تتراجع الكاشطات، وتكون الخلفيات أسوأ مما تأمل.
لا og:title ويستخدمون <title> العلامة - والتي تتم كتابتها عادةً للحصول على نتائج البحث وغالبًا ما تنتهي بأنبوب واسم علامتك التجارية، وتقرأ بشكل محرج كعنوان رئيسي للبطاقة. لا og:description ويستخدمون الوصف التعريفي، أو النص الأساسي، الذي يمكنه سحب لافتة ملفات تعريف الارتباط أو ملصق التنقل. لا og:image وتعرض معظم الأنظمة الأساسية بطاقة نصية فقط، على الرغم من أن بعضها يبحث عن أي صورة في الصفحة وقد يجد شعارًا أو صورة رمزية أو بكسل تتبع. لا og:url ويتم استخدام العنوان المشترك كما هو، لذلك ?utm_source=twitter يتم التعامل مع المتغيرات كصفحات مميزة ويتم احتساب جزء من مشاركاتك.
هناك فئة فشل أخرى تستحق التسمية، لأنها غير مرئية في تصحيح الأخطاء العادي العلامات التي تم حقنها بواسطة JavaScript من جانب العميل. إذا تم تعيين العلامات التعريفية الخاصة بك بواسطة React بعد الترطيب، فسيعرضها مفتش المتصفح بشكل مثالي ولا يرى الكاشطة شيئًا، لأن الكاشطة لم تقم بتشغيل JavaScript مطلقًا. تحقق دائمًا باستخدام مصدر العرض أو curl، والتي تعرض HTML الخام الذي أعاده الخادم بالفعل - وليس DOM بعد تشغيل تطبيقك. وينطبق الشيء نفسه على الصفحات التي تُرجع 401، أو إعادة توجيه تسجيل الدخول، أو حظر الروبوت 403 للطلبات غير المصادق عليها: يحصل المكشطة على صفحة الخطأ، وليس المحتوى الخاص بك.
حالات الاستخدام الشائعة
التحقق من صحة ما قبل الإطلاق
الحالة الأساسية. قبل أن يتم تشغيل الصفحة، قم بلصق العلامات التي تنوي شحنها وتأكيد كل عرض للبطاقة. هذا هو الشيء الوحيد الذي لا يستطيع مصححو أخطاء النظام الأساسي الرسميون القيام به، لأنه يجب عليهم جلب عنوان URL مباشر. يكلف فحص ما قبل الإطلاق ثلاثين ثانية ويحفظ إعادة المشاركة في يوم الإطلاق.
تصحيح البطاقة المكسورة
الرابط ينكشف بشكل خاطئ وتحتاج إلى معرفة السبب. لصق العلامات الحالية للصفحة '؛، وقراءة لوحة التحقق من الصحة، وعادة ما يكون السبب فوريًا: مسار صورة نسبي، و http الصورة، وصف ضعف الحد، مفقود twitter:card. تم الإصلاح وإعادة الكشط في مصحح أخطاء النظام الأساسي.
تدقيق البيانات الوصفية للموقع '؛s على نطاق واسع
العمل من خلال صفحة الموقع صفحة تلو الأخرى، ولصق كل منها <head> وقراءة الحكم، تظهر الانجراف الذي يتراكم في أي مشروع متعدد المساهمين: صفحة واحدة تحتوي على علامات تويتر وأخرى لا تحتوي عليها، ووصف واحد يتكون من 300 حرف، وثلاث صفحات تشترك في نفس الشكل العام og:image. تصبح الأداة فحصًا سريعًا للاتساق بدلاً من تخمين لكل صفحة.
تصميم صورة المشاركة
عندما تختار أو تكلف og:image، توضح لك المعاينة ما يفعله المحصول فعليًا به في بطاقة واسعة مقابل بطاقة مربعة. يقوم المصممون بشكل روتيني بتسليم رسم مربع جميل يتم ذبحه بواسطة محصول 1.91:1؛ رؤية ذلك قبل الشحن أرخص من رؤيته بعد ذلك.
كتابة نسخة إلى أشد القيود
نظرًا لأن المعاينات تعرض اقتطاع X'؛s بجوار Facebook'؛s، فإنها تحول حد الأحرف المجرد إلى شيء مرئي. تعد كتابة وصف يقرأ بالكامل عند 110 أحرف نظامًا يسهل الاحتفاظ به عندما يمكنك رؤية علامات الحذف تظهر أثناء الكتابة. ال مولد البزاق يغطي المهمة المجاورة المتمثلة في إنتاج عنوان URL النظيف الذي og:url ينبغي الإشارة إلى.
العمل على التدريج أو خلف تسجيل الدخول
لا يمكن الوصول إلى الأدوات الداخلية وعمل العميل ضمن NDA والصفحات الموجودة خلف جدار المصادقة بواسطة مصححات أخطاء النظام الأساسي. نظرًا لأن الأداة تعمل من العلامات وليس من الجلب، فإنها تتعامل معها بشكل مماثل للصفحة العامة.
مقارنة المنصة
التوجيه الحالي الأكثر شهرة. تقوم المنصات بتغيير هذه الأرقام دون إعلان، ويتم قياس نقاط الاقتطاع بالبكسل بدلاً من الأحرف - وهو عنوان مليء بمقاطع الحروف العريضة في وقت أقرب من عنوان مليء بالأحرف الضيقة. تعامل مع هذه الأهداف كأهداف آمنة، وليس المواصفات.
| منصة | الصورة الموصى بها | نسبة | العنوان الموضح | الوصف موضح | ملاحظات |
|---|---|---|---|---|---|
| فيسبوك | 1200x630 | 1.91:1 | ~60 حرف | ~155 حرف | الحد الأدنى 200x200؛ صور المحاصيل المركزية خارج النسبة |
| X / تويتر (كبير) | 1200x628 | ~1.91:1 | ~60 حرف | ~110 حرف | يتطلب twitter:card=summary_large_image |
| X / تويتر (ملخص) | 800x800 | 1:1 | ~50 حرف | ~90 حرف | الحد الأدنى 144x144؛ الصورة المربعة مطلوبة |
| لينكدإن | 1200x627 | ~1.91:1 | ~100 حرف | غالبا ما تكون مخفية | الوصف يتم إسقاطه بشكل متكرر من البطاقة |
| سلاك | 1200x630 | 1.91:1 | ~60 حرف | ~140 حرف | مرفق مدمج؛ تنتهي صلاحية ذاكرة التخزين المؤقت لفتحها من تلقاء نفسها |
| الخلاف | 1200x630 | 1.91:1 | ~60 حرف | ~160 حرف | يعرض الوصف بشكل بارز، والصورة أصغر |
إن الوجبات الجاهزة من الطاولة هي هدف التصميم: صورة مقاس 1200x630، وعنوان يتراوح بين 55-60 حرفًا أو أقل، ووصف يهبط تحت 110، مما يمنحك بطاقة يتم عرضها بشكل صحيح في كل مكان دون ضبط كل منصة.
أسئلة وأجوبة
ما هو حجم صورة الرسم البياني المفتوح الصحيح؟
استخدم 1200x630 بكسل - نسبة 1.91:1. يرضي ذلك Facebook وLinkedIn وX وSlack وDiscord في وقت واحد لبطاقات الصور الكبيرة، وهو كبير بما يكفي ليظل حادًا على شاشات العرض عالية الكثافة. احتفظ بالملف أقل من 5 ميجابايت تقريبًا، وقدمه عبر HTTPS على عنوان URL مطلق، واحتفظ بالنص المهم بعيدًا عن الحواف نظرًا لأن الأسطح تظهر بكميات مختلفة قليلاً. للحصول على بطاقة ملخص X مدمجة، قم بتوفير صورة مربعة بحجم 144x144 على الأقل بدلاً من ذلك.
لماذا تستمر معاينة الرابط في عرض الصورة القديمة بعد إصلاح العلامات؟
لأن النظام الأساسي قام بتخزين نتيجة عملية الخدش السابقة مؤقتًا، عادةً لمدة أسبوع تقريبًا. تحديث العلامات لا يبطل ذاكرة التخزين المؤقت هذه. فرض عملية جلب جديدة من خلال مصحح أخطاء النظام الأساسي '؛s - زر Facebook Sharing Debugger'؛s Scrape Again، أو LinkedIn Post Inspector. بالنسبة إلى Slack and Discord، تؤدي إضافة معلمة استعلام إلى عنوان URL إلى معاينة غير مخبأة على الفور، وهي أسرع طريقة للتحقق من الإصلاح.
هل أحتاج إلى كل من OG: و Twitter: العلامات؟
يعود X إلى Open Graph عندما تكون مرادفات Twitter مفقودة، لذا تكون الصفحة كاملة og: تنتج العلامات بطاقة X عاملة. ما لا يستطيع Open Graph التعبير عنه هو تخطيط البطاقة، لذا لا يزال يتعين عليك إضافته twitter:card للاختيار بين اللافتة الكبيرة والملخص المدمج، بالإضافة إلى ذلك twitter:site و twitter:creator لإسناد البطاقة. هذه العلامات الثلاثة بالإضافة إلى علامات Open Graph الكاملة هي المجموعة الفعالة.
كم من الوقت يجب أن يكون og: العنوان و og: الوصف؟
يحفظ og:title عند أو أقل من حوالي 60 حرفًا. ل og:description تتباعد المنصات: تظهر X ما يقرب من 110 أحرف، ويظهر Facebook وLinkedIn أقرب إلى 155 إلى 200. الكتابة إلى حد X الأكثر إحكامًا تعني أن الوصف يقرأ بالكامل في كل مكان. لا يتم فقدان النص الذي يتجاوز الحد، بل يتم إخفاؤه خلف علامة الحذف، لذا قم بتحميل الكلمات المهمة في المقدمة.
لماذا تكون المعاينة فارغة أو تعرض عنوان URL فقط؟
الأسباب المعتادة، بترتيب تقريبي للتكرار: og:image هو مسار نسبي وليس عنوان URL مطلقًا؛ يتم تقديم الصورة على عادي http؛ العلامات خارج <head>؛ يتم إدخال العلامات بواسطة JavaScript من جانب العميل ولا ينفذها المكشطة أبدًا؛ أو تقوم الصفحة بإرجاع حالة غير 200 أو إعادة توجيه تسجيل الدخول إلى الروبوت. تحقق من HTML الخام باستخدام مصدر العرض أو curl بدلاً من مفتش المتصفح - يعرض المفتش DOM بعد تشغيل JavaScript، وهو ليس ما يراه الكاشطة.
هل تقوم هذه الأداة بإحضار عنوان URL الخاص بي لقراءة العلامات؟
لا، لا يقدم أي طلبات للشبكة على الإطلاق. إنه يعمل من العلامات التي تكتبها أو تلصقها، ويتم تحليل كل شيء وعرضه في متصفحك. لا يمكن للمتصفحات جلب صفحات عشوائية تابعة لجهات خارجية بسبب CORS، ويعني الجلب من جانب الخادم إرسال عناوين URL التي لم يتم إصدارها إلى مكان آخر. المقايضة هي أنك توفر العلامات - والفائدة هي أن الصفحات الموجودة على المضيف المحلي أو على التدريج أو خلف تسجيل الدخول تعمل تمامًا مثل الصفحات العامة.
هل يمكنني معاينة صفحة لم يتم نشرها بعد؟
نعم، وهذا هو السبب الرئيسي لاستخدام هذا بدلاً من مصحح أخطاء النظام الأساسي. يجب على مصححي الأخطاء الرسميين جلب عنوان URL مباشر، بحيث يكون عديم الفائدة قبل النشر. هنا تقوم بلصق العلامات التي تنوي شحنها - من القالب الخاص بك، أو كائن البيانات التعريفية لإطار العمل الخاص بك، أو البنية المحلية - ويتم عرض المعاينات على الفور.
هل تساعد علامات Open Graph في تصنيفات البحث الخاصة بي؟
ليس بشكل مباشر. تتم قراءتها بواسطة منصات التواصل الاجتماعي والدردشة، ولا يتم استخدامها كعامل تصنيف بواسطة محركات البحث. ما يؤثرون عليه هو معدل النقر إلى الظهور على كل حصة من الارتباط الخاص بك، مما يؤدي إلى زيادة حركة المرور، وبشكل غير مباشر، الإشارات التي تهم. فكر فيها على أنها تحسين تحويل للروابط المشتركة وليس كرافعة لتحسين محركات البحث. بالنسبة للعلامات التي تؤثر على مقتطف البحث الخاص بك، استخدم مولد العلامات.
