[Facebook] FB OpenGraph ع: صورة لا سحب الصور (ربما HTTPS؟)


Answers

يمكن أن تحتوي بعض الخصائص على بيانات وصفية إضافية مرفقة بها. يتم تحديدها بنفس الطريقة مثل البيانات الوصفية الأخرى ذات property content ، ولكن property ستكون إضافية:

تحتوي الخاصية og:image على بعض الخصائص المركبة الاختيارية:

  • og:image:url - Identical to og: image.
  • og:image:secure_url - عنوان URL بديل لاستخدامه إذا كانت صفحة الويب تتطلب HTTPS.
  • og:image:type - نوع MIME لهذه الصورة.
  • og:image:width - عدد البكسل على نطاق واسع.
  • og:image:height عدد البيكسل المرتفع.

مثال كامل للصورة:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> 
<meta property="og:image:type" content="image/jpeg" /> 
<meta property="og:image:width" content="400" /> 
<meta property="og:image:height" content="300" />

لذلك يجب تغيير og:image خاصية og:image لعناوين URL HTTPS الخاصة بك إلى og:image:secure_url

مثلا:

HTTPS META TAG FOR IMAGE:

<meta property="og:image:secure_url" content="https://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

HTTP META TAG FOR IMAGE:

<meta property="og:image" content="http://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

المصدر: http://ogp.me/#structured <- يمكنك زيارة هذا الموقع لمزيد من المعلومات.

آمل أن يساعدك هذا.

تحرير: لا تنس أن ping خوادم facebook بعد تحديث الرموز - URL Linter

Question

أولاً - لا أعتقد أن هذه مشكلة مكررة. لقد بحثت عن مشكلات مماثلة أو مشابهة على SO على نطاق واسع ، وبسبب طبيعة استكشاف الأخطاء وإصلاحها قبل طرح السؤال ، أعتقد أن هذه المشكلة فريدة.

لا يستطيع فيس بوك فهم موقعي og:image ملفات og:image ولقد جربت كل الحلول المعتادة. لقد بدأت أعتقد أنه قد يكون له علاقة https://...

  • لقد تحققت من http://developers.facebook.com/tools/debug ولدينا صفر من التحذيرات أو الأخطاء.
  • يتم العثور على الصور التي ربطناها في " og:image " ، ولكنها تظهر فارغة. عندما نضغط على الصورة (الصور) ، ومع ذلك ، فهي موجودة ويستغرق الأمر مباشرة لهم.
  • فإنه لا تظهر صورة واحدة - صورة استضافتها على خادم غير HTTPS.
  • لقد جربنا الصور المربعة ، jpegs ، pngs ، أحجام أكبر وأحجام أصغر. لقد وضعنا الصور في public_html. الصفر تظهر.
  • إنه ليس خطأً في التخزين المؤقت ، لأنه عندما نضيف أداة أخرى og:image إلى meta ، تجد lent FB وتقرأ ذلك. انها تظهر معاينة. المعاينة فارغة. الاستثناء الوحيد الذي نحصل عليه هو للصور غير الموجودة على هذا الموقع.
  • كنا نظن أنه ربما كان هناك بعض مضادات الليش على cpanel أو .htaccess التي كانت تمنع ظهور الصور ، لذا قمنا بفحصها. لم يكن ذلك. حتى أننا قمنا بـ < img src="[remote file]" > على خادم مختلف تمامًا وتظهر الصورة بشكل جيد.
  • كنا نعتقد أنه ربما كان og:type أو غرائب ​​أخرى مع علامة وصفية أخرى. لقد أزلنا جميعًا ، في وقت واحد وفحصناها. لا تغيير. مجرد تحذيرات.
  • يظهر الرمز نفسه في موقع ويب مختلف بدون أي مشكلة.
  • كنا نظن أنه ربما لم يكن سحب الصور لأننا نستخدم نفس صفحة (صفحات) المنتج للعديد من المنتجات (تغييرها بناء على قيمة get ، أي ، "details.php؟ id = xxx") ولكنها لا تزال تسحب واحدة صورة (من عنوان URL مختلف).
  • ترك أي og:image أو image_src قبالة ، لا يجد FB أي صور.

أنا في نهاية الحبل بلدي. إذا قلت كم من الوقت قضيته أنا والآخرون في ذلك ، سوف تصاب بصدمة. المشكلة هي أن هذا متجر على الإنترنت. نحن على الاطلاق لا يمكننا الحصول على صور. علينا أن. لدينا عشرة مواقع أخرى أو أكثر ... هذا هو الموقع الوحيد مع مشكلات og:image . إنها أيضًا الوحيدة على https ، لذلك اعتقدنا أن هذه هي المشكلة. ولكن لا يمكننا العثور على أي سابقة في أي مكان على الويب لذلك.

هذه هي العلامات الوصفية:

<meta property="og:title" content="[The product name]" /> 
<meta property="og:description" content="[the product description]" /> 
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-art-black.png" />
<meta property="og:image" content="http://www.[ADIFFERENTwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/ARShopHeader.png" />
<meta property="og:image" content="http://www.[ourwebsite].com/overdriven-blues-music-tshirt-art-black.JPG" />
<meta property="og:type" content="product"/>
<meta property="og:url" content="https://www.[ourwebsite].com/apparel-details.php?i=10047" />
<meta property="og:site_name" content="[our site name]" />      
<meta property="fb:admins" content="[FB-USER-ID-NUMBER]"/>
<meta name="title" content="[The product name]" />
<meta name="description" content="[The product description]" />
<link rel="image_src" href="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta name="keywords" content="[four typical keywords]">
<meta name="robots" content="noarchive">

إذا كنت ترغب في ذلك ، فإليك رابطًا لأحد صفحات منتجاتنا التي كنا نعمل عليها. [تم اختصار الرابط لمحاولة الحد من هذا الأمر في نتائج البحث لموقعنا]: http://rockn.ro/114

تصحيح ----

باستخدام أداة الكشط "شاهد ما ترى فيسبوك" ، تمكنا من رؤية ما يلي:

"image": [          
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-details-safari.png"
      },
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-art-safari.png"
      },
      {
         "url": "http://www.[theotherNONSECUREwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png"
      }
   ],

اختبرنا جميع الروابط التي عثر عليها لصفحة واحدة. كانت جميع الصور صالحة تماما.

EDIT 2 ----

لقد جربنا اختبارًا وأضفنا نطاقًا فرعيًا إلى موقع NONSECURE (حيث تظهر الصور في الواقع من خلال facebook). كان النطاق الفرعي http: // img. [nonsecuresite] .com. ثم وضعنا جميع الصور في مجلد النطاق الفرعي الرئيسي وأشرنا إليها. لن يسحب تلك الصور إلى FB. ومع ذلك ، فإنه لا يزال يسحب أي الصور التي تم الإشارة إليها على المجال الرئيسي غير الآمنة.

عودة إلى الأعلى

بفضل Keegan ، نعرف الآن أن هذا خطأ في Facebook. لوضع حل بديل ، وضعنا نطاقًا فرعيًا في موقع NON-HTTPS مختلفًا وألقينا جميع الصور فيه. http://img.otherdomain.com/[like-image.jpg] تنسيق http://img.otherdomain.com/[like-image.jpg] صورة في og:image في كل صفحة منتج. ثم اضطررنا للذهاب عبر FB Linter وتشغيل كل رابط لتحديث بيانات OG. لقد نجح هذا ، لكن الحل هو حل بديل للمساعدة ، وإذا ما تم إصلاح المشكلة https ، ونعود إلى استخدام نطاق https الطبيعي ، فسيعمل FB على تخزين الصور مؤقتًا من موقع ويب مختلف ، مما يعقد الأمور. نأمل أن تساعد هذه المعلومات على إنقاذ شخص آخر من فقدان 32 ساعة ترميز في حياته.




كان لدي نفس الخطأ ولم يساعد أي شيء سابق ، لذا حاولت اتباع الوثائق الأصلية ogp.me وأضفت خاصية prefix إلى علامة html الخاصة بي وأصبح كل شيء رائعًا.

<html prefix="og: http://ogp.me/ns#">



اكتشفت سيناريو آخر يمكن أن يسبب هذه المشكلة. ذهبت من خلال جميع الخطوات الموضحة في السؤال والإجابات ، لا تزال المشكلة لا تزال قائمة.

راجعت صوري ووجدت أن بعض مشاركاتي كانت لها صور مصغّرة كبيرة جدًا في og:image في مدى عدة آلاف من البكسلات وعدة ميغابايت.

حدث هذا بسبب الترحيل الأخير من WP إلى Jekyll ، لقد قمت بتحسين صوري باستخدام gulp ، لكني استخدمت الصور الأصلية في og: الصورة عن طريق الخطأ.

يمنحنا Facebook التوصيات التالية اعتبارًا من اليوم :

استخدم صورًا لا تقل عن 1200 × 630 بكسل لأفضل عرض على الأجهزة عالية الدقة. على أقل تقدير ، يجب استخدام الصور التي تبلغ 600 × 315 بكسل لعرض مشاركات صفحة الارتباط بالصور الأكبر حجمًا. يمكن أن يصل حجم الصور إلى 8 ميغابايت.

لذلك هناك حد أعلى من 8MB.




لا تنسَ تحديث الخوادم من خلال:

مصحح الفيس بوك

وانقر على "جمع معلومات جديدة"




أستطيع أن أرى أن المصحح يقوم باسترجاع 4 og:image علامات og:image من عنوان URL الخاص بك.

الصورة الأولى هي الأكبر وبالتالي تستغرق وقتًا أطول لتحميلها. حاول تقليص حجم الصورة الأولى أو تغيير الترتيب لإظهار صورة أصغر أولاً.




بالنسبة لي هذا عمل:

<meta property="og:url" content="http://yoursiteurl" />
    <meta property="og:image" content="link_to_first_image_if_you_want" />
    <meta property="og:image" content="link_to_second_image_if_you_want" />
    <meta property="og:image:type" content="image/jpeg" /> 
    <meta property="og:image:width" content="400" /> 
    <meta property="og:image:height" content="300" />
    <meta property="og:title" content="your title" />
    <meta property="og:description"  content="your text about homepage"/> 



وصلت إلى هنا من Google ولكن هذا لم يساعدني كثيرًا. تبين أن هناك نسبة عرض إلى ارتفاع دنيا قدرها 3: 1 مطلوبة للشعار. كان لي ما يقرب من 4: 1. استخدمت Gimp لاقتصاده إلى 3: 1 وفويلا - يظهر شعاري الآن على FB.




كما وجدت عن طريق الخطأ ، تأتي صورة فارغة شفافة مع رأس استجابة تشير إلى سبب محتمل للمشكلة.

  1. انتقل إلى مصحح الأخطاء على https://developers.facebook.com/tools/debug/og/object/
  2. ضع عنوان موقعك
  3. في الجزء السفلي ، يعرض facebook "image" (شفاف 1x1 GIF)
    1. الصورة مرتبطة بصورتك الأصلية - لا حاجة إلى ضغطها
    2. اضغط على اليمين وعرض الصورة (ستحصل على شيء مثل https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=... )
  4. قم بتشغيل علامة التبويب Net على أدوات firebug / developer ، وقم بتحديث الصفحة إذا لزم الأمر
  5. ستحصل على رأس استجابة x-error-detail مع الشرح

على سبيل المثال ، في حالتي كان Invalid image extension for URL: https://[mydomain]/[myfilename].jpg

القضية الحقيقية في حالتي كانت متعلقة بـ prerender.io .

كما تبين ، إذا كانت الصورة مطلوبة عن طريق العرض المسبق ، يتم تحويلها إلى HTML. شيء من هذا القبيل:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body style="margin: 0px;"><img style="-webkit-user-select: none; cursor: -webkit-zoom-in; " src="https://[yourdomain].com/[yourfilename].jpg" width="1078" height="718"></body>
</html>

إما أنه خطأ في العرض نفسه ، أو من المفترض أن يتم تهيئته في الوكيل الخاص بك لعدم استخدام العرض المسبق لطلبات *.jpg (حتى إذا تم طلبها من قبل Facebook bot).

من الصعب حقًا ملاحظة هذا ، نظرًا لأنه يتم استخدام العرض المسبق فقط في عناوين معينة لعناوين المستخدمين.




بعد عدة ساعات من الاختبار ومحاولة الأشياء ...

لقد حلت هذه المشكلة بسيطة قدر الإمكان. ألاحظ أنهم يستخدمون "صفحات الاختبار" داخل صفحة مطوّري فيس بوك التي تحتوي فقط على علامات "og" وبعض النصوص في علامة النص التي تحيل هذه العلامات.

إذن ماذا فعلت؟

لقد أنشأت عرضًا ثانيًا في طلبي يحتوي على هذه الأشياء نفسها التي يستخدمونها.

وكيف أعرف أن Facebook هو الوصول إلى صفحتي حتى أتمكن من تغيير طريقة العرض؟ لديهم وكيل مستخدم فريد: "facebookexternalhit / 1.1"