الأخطاء الشائعة مع Open Graph العلامات
تحقق من وجود أخطاء في علامات OG الخاصة بك
استخدم Proovd — الصق عنوان URL وشاهد على الفور كيف يبدو على X وLinkedIn وSlack وDiscord وWhatsApp وReddit.
إجابة سريعة
- استخدام عناوين URL النسبية لـ
og:image— لا تستطيع الأنظمة الأساسية جلبها - العلامة
twitter:cardمفقودة — X لن يعرض بطاقتك - الصورة صغيرة جدًا بالنسبة للمنصة — LinkedIn تحتاج إلى 1200×627 كحد أدنى
- عدم مسح ذاكرة التخزين المؤقت بعد التحديثات — تقوم الأنظمة الأساسية بتخزين علامات OG لعدة أيام
الخطأ 1: استخدام عناوين URL النسبية لـ og:image
هذا هو الخطأ الوحيد الأكثر شيوعا. يكتب المطورون:
✗ خطأ
<meta property="og:image" content="/images/preview.jpg" />
لا تستطيع برامج زحف الأنظمة الأساسية حل عناوين URL النسبية. إنهم بحاجة إلى عنوان URL مطلق:
✓ صحيح
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
استخدم دائمًا https:// في عنوان URL og:image الخاص بك. يؤثر هذا على كل منصة – X، LinkedIn، Discord، Slack، WhatsApp، وReddit.
الخطأ 2: العلامة twitter:card مفقودة
يقوم العديد من المطورين بتعيين Open Graph علامات فقط وتخطي Twitter Card علامات. يفضل X/Twitter twitter:card وقد لا يعرض بطاقتك بشكل صحيح بدونها.
✗ غير مكتملة
<meta property="og:image" content="https://yoursite.com/image.jpg" />
✓ كاملة
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />
ضعي كلا من og:image و twitter:image لتغطية كاملة. راجع دليلنا Open Graph مقابل Twitter Card للحصول على التفاصيل.
الخطأ 3: الصورة صغيرة جدًا بالنسبة للمنصة
تحتوي كل منصة على حد أدنى مختلف لأحجام الصور. الصورة التي تعمل على Discord (300×300 كحد أدنى) قد لا تعمل على LinkedIn (1200×627 كحد أدنى).
| Platform | Minimum | Recommended |
|---|---|---|
| X / Twitter | 800 × 418 | 1200 × 628 |
| 1200 × 627 | 1200 × 627 | |
| Discord | 300 × 300 | 1200 × 630 |
| 300 × 157 | 1200 × 630 | |
| 120 × 120 | 1200 × 628 |
استخدام 1200 × 630 حيث أن الحجم القياسي الخاص بك يغطي جميع المنصات. راجع Open Graph دليل حجم الصورة للحصول على التفاصيل الكاملة.
الخطأ 4: عدم مسح ذاكرة التخزين المؤقت بعد التحديثات
قمت بتحديث علامات OG الخاصة بك. لا تزال الأنظمة الأساسية تعرض المعاينة القديمة. المشكلة: تقوم الأنظمة الأساسية بتخزين علامات OG ولا تقوم بإعادة جلبها تلقائيًا.
بعد تحديث علاماتك، يجب عليك مسح ذاكرة التخزين المؤقت لكل نظام أساسي:
- Facebook: Sharing Debugger → "اكشط مرة أخرى"
- LinkedIn: Post Inspector → "فحص"
- X/تويتر: Card Validator → "بطاقة المعاينة"
- Discord/Slack: حذف الرسالة القديمة، إعادة نشر عنوان URL
- WhatsApp: أضف
?v=2معلمة الاستعلام
راجع دليل كيفية مسح Open Graph ذاكرة التخزين المؤقت للحصول على الإرشادات التفصيلية الكاملة لكل منصة على حدة.
الخطأ 5: النص og:description مفقود أو مقطوع
قام بعض المطورين بتعيين og:title وog:image ولكنهم يتخطون og:description. يكتب آخرون أوصافًا طويلة جدًا ويتم اقتطاعها.
أفضل الممارسات:
- og:title: 50-60 حرفًا (مثل علامة عنوان SEO)
- og:description: 150-160 حرفًا (نفس الوصف التعريفي)
- ضع المعلومات الأكثر أهمية أولًا، حيث يتم اقتطاع المنصات في نقاط مختلفة
الخطأ السادس: عدم الضبط og:url
بدون og:url، قد تستخدم الأنظمة الأساسية عنوان URL خاطئًا في المعاينة (على سبيل المثال، عنوان URL مع معلمات التتبع). قم دائمًا بتعيين عنوان URL الأساسي:
✓ صحيح
<meta property="og:url" content="https://yoursite.com/your-page" />
الخطأ السابع: استخدام نوع MIME للصورة الخاطئة
إذا قام خادمك بإرجاع رأس نوع المحتوى الخاطئ لصورتك (على سبيل المثال، عرض PNG مع image/jpeg)، فسترفضه بعض الأنظمة الأساسية. تأكد من أن خادم الصور الخاص بك يُرجع نوع MIME الصحيح:
- JPG/JPEG →
صورة/jpeg - PNG →
صورة/png - WebP →
صورة/webp - GIF →
صورة/gif
LinkedIn صارم بشكل خاص فيما يتعلق بالتحقق من صحة نوع MIME.
الخطأ الثامن: الصفحات الديناميكية بدون علامات OG الفريدة
إذا كان لديك موقع SPA أو موقع ديناميكي حيث تشترك كل صفحة في نفس علامات OG (عادةً علامات الصفحة الرئيسية)، فستعرض الأنظمة الأساسية نفس المعاينة لكل صفحة. تحتاج كل صفحة إلى عنوانها ووصفها وصورتها الفريدة.
في Next.js، استخدم generateMetadata(). في WordPress، استخدم إعدادات Yoast/RankMath لكل صفحة. في HTML العادي، قم بتعيين العلامات بشكل فردي في كل صفحة.
قائمة مراجعة الإصلاح السريع
- استخدم عناوين URL المطلقة (https://...) لجميع المسارات og:image
- قم بتعيين كلاً من
og:وtwitter:العلامات - استخدم صورًا بحجم 1200 × 630 بكسل للتوافق العالمي
- مسح ذاكرة التخزين المؤقت للنظام الأساسي بعد تحديث العلامات
- قم بتعيين علامات OG فريدة لكل صفحة
- تضمين og:description (150-160 حرفًا)
- اضبط og:url على عنوان URL الأساسي
- تحقق من تطابق نوع MIME مع تنسيق الصورة الفعلي
- اختبر باستخدام Proovd لاكتشاف جميع الأخطاء مرة واحدة
الأسئلة المتداولة
ما هو الخطأ Open Graph الأكثر شيوعًا؟
استخدام عنوان URL نسبي لـ og:image بدلاً من عنوان URL المطلق الذي يبدأ بـ https://. لا تستطيع الأنظمة الأساسية جلب عناوين URL نسبية، لذلك لن تظهر الصورة أبدًا في المعاينة.
لماذا تعمل صورة OG الخاصة بي على منصة واحدة دون منصة أخرى؟
لكل منصة متطلبات مختلفة لحجم الصورة. LinkedIn يتطلب 1200x627 كحد أدنى، X يتطلب 800x418، وDiscord يقبل 300x300 كحد أدنى. الصورة التي تعمل على أحد الأنظمة الأساسية قد تكون صغيرة جدًا بالنسبة إلى نظام آخر.
كيف يمكنني التحقق مما إذا كانت علامات OG الخاصة بي تحتوي على أخطاء؟
استخدم Proovd للصق أي عنوان URL ورؤية كيفية عرضه بالضبط عبر الأنظمة الأساسية الستة في وقت واحد.
مقالات ذات صلة
تحقق من وجود أخطاء في علامات OG الخاصة بك
استخدم Proovd — الصق عنوان URL وشاهد المعاينة على X وLinkedIn وSlack وDiscord وWhatsApp وReddit.