معاينة Open Graph
اكتب العنوان والوصف واسم الموقع ورابط الصفحة ورابط الصورة، وتُنشئ هذه الأداة بطاقة مشاركة حية لـ Facebook و X (Twitter) تتحدث مع كل ضغطة مفتاح. إنها بيئة تصميم تجريبية لوسوم Open Graph: لا يُجلب شيء ولا يُنشر، فتستطيع تجربة طول العنوان وقصّ الصورة حتى تبدو البطاقة صحيحة، ثم تنسخ الصياغة إلى وسوم og: الحقيقية لديك.
كيف تُجمَّع المعاينة
-
1
اكتب حقول البطاقة
العنوان واسم الموقع والوصف ورابط الصفحة ورابط الصورة. يقابل كل حقل وسم og: واحدا.
-
2
شاهد البطاقتين تتحدثان
تُعاد بطاقتا Facebook و X الوهميتان أثناء الكتابة، باستخدام تخطيط كل منصة الحقيقي وأسلوبها في الاقتطاع.
-
3
أضف رابط صورة
الصق عنوان صورة مطلقا بـ https لرؤية القصّ؛ واتركه فارغا فتعرض بطاقة Facebook عنصرا نائبا.
-
4
انسخها إلى وسوم og:
حين تبدو البطاقة جيدة، انقل العنوان والوصف والصورة نفسها إلى وسوم meta في صفحتك.
إلامَ يتحول كل حقل
| الحقل | وسم Open Graph | ما يظهر في البطاقة |
|---|---|---|
| العنوان | og:title | عنوان عريض يُقتطع إلى سطر واحد |
| الوصف | og:description | عنوان فرعي رمادي محصور في سطرين |
| اسم الموقع | og:site_name | لصيقة صغيرة فوق عنوان Facebook |
| الرابط | og:url | يُعرض النطاق المستخرَج منه |
| رابط الصورة | og:image | يُقصّ إلى 1.91:1 في كلتا البطاقتين |
تقرأ الأداة المضيف من الرابط الذي تكتبه، فيظهر https://blog.example.com/post على البطاقة بوصفه blog.example.com.
البطاقتان، وكيف تختلفان
- Facebook يعرض الصورة مقصوصة إلى 1.91:1، ثم النطاق بأحرف صغيرة، فالعنوان العريض في سطر واحد، والوصف في سطرين على الأكثر. ودون رابط صورة يعرض عنصرا نائبا رماديا، وهو أكثر سبب شيوعا لمشاركة مسطّحة بلا صورة في الواقع.
- X (Twitter) يعرض بطاقة
summary_large_imageبزوايا مستديرة: الصورة بقصّ 2:1، فالنطاق فالعنوان فالوصف تحته.
ضبط الصياغة لتتّسع
- العنوان: استهدف 60 إلى 70 حرفا. يقتطع Facebook عند نحو 88 و X عند نحو 70، فالعنوان دون 70 حرفا يبقى سليما في كل مكان.
- الوصف: أبقه دون نحو 160 حرفا؛ تحصر البطاقة الوصف في سطرين ويُهمَل الباقي.
- الصورة: صمّمها بمقاس 1200 x 630 بكسل ليكون قصّ 1.91:1 نظيفا، واستضفها على رابط
https://مطلق. المسار النسبي لن يُحمَّل بعد نشر الوسوم. - اسم الموقع: قصير ومقتصر على العلامة، دون شعار تسويقي. يستقر فوق العنوان بوصفه لصيقة.
قائمة تحقق يوم النشر
- [ ] العنوان دون 70 حرفا
- [ ] الوصف دون 160 حرفا
- [ ] رابط الصورة مطلق (https، لا // ولا مسار نسبي)
- [ ] الصورة مصممة بمقاس 1200 x 630 بكسل، JPG أو PNG
- [ ] الرابط يطابق الرابط المعياري الذي ستنشره
- [ ] الصياغة منسوخة إلى وسوم og: الحقيقية ثم مُتحقَّق منها بفاحص
الأسئلة الشائعة
لا. أنت تكتب حقول البطاقة يدويا وتحاكي الأداة شكلها المتوقع. إنها بيئة تصميم تجريبية لا زاحفا، فتعمل أيضا قبل أن تكون الصفحة على الإنترنت. ولقراءة الوسوم الموجودة فعلا في صفحة ما، الصق شيفرة HTML لتلك الصفحة في فاحص Open Graph بدلا من ذلك.
بطاقة Facebook وبطاقة X (Twitter) كبيرة الصورة. تستخدمان قيم Open Graph نفسها، فالبطاقة التي تبدو جيدة هنا مؤشّر جيد على LinkedIn و Slack و Discord وسائر التطبيقات التي تكشف الروابط من وسوم og: نفسها، مع اختلاف طفيف في حدود كل منها.
لأن حقل الصورة فارغ، أو لأن الرابط الذي لصقته ليس عنوان https مطلقا صالحا. أضف رابط صورة https كاملا ويظهر القصّ في الحال. وعند النشر، أبقِ الملف دون 5 ميغابايت ومخدوما بنوع محتوى عام image/*.
تقتطع كل منصة عند نقطة مختلفة (Facebook قرب 88 حرفا، و X قرب 70)، والبطاقة الوهمية تحاكي ذلك. اقتطع العنوان إلى 60 حتى 70 حرفا فيبقى سليما على كل منصة.
أدوات ذات صلة
أداة فحص طول الوصف الوصفي
قِس الوصف التعريفي بالأحرف والبكسلات التقديرية، وقارنه بمؤشرات تحريرية، وراجع نماذج توضيحية لسطح المكتب والهاتف.
أداة استخراج الروابط الداخلية
استخرج جميع الروابط الداخلية من عنوان URL أو من كود HTML ملصق، مع نص الرابط وسمات rel وحالة nofollow لأغراض تدقيق تحسين محركات البحث (SEO).
محاكي نتائج بحث Google
عاين مقتطفًا تقريبيًا بأسلوب Google بحدود أحرف للهاتف وسطح المكتب. تبقى مسودتك في جلسة المتصفح.
مدقق الروابط المكسورة
الصق رابط صفحة وتحقق من روابطها الصادرة بحثا عن أخطاء 404 وغيرها من أخطاء HTTP، مع رمز الحالة لكل رابط.
أداة فحص رؤوس أمان HTTP
الصق ترويسات استجابة HTTP وراجع محليًا HSTS وCSP والحماية من clickjacking وسياسات MIME وreferrer وcross-origin.
مدقق خريطة الموقع بصيغة XML
افحص XML لخريطة الموقع في المتصفح لاكتشاف أخطاء التحليل والمواقع المفقودة والعناوين المكررة وقيم الحقول الشائعة.
الأداة متاحة بلغات أخرى
- Pratinjau Open Graph [ID]
- Prévia do Open Graph [PT]
- Open Graph Preview [DE]
- Open Graph プレビュー [JA]
- Open Graph 미리보기 [KO]
- ตัวอย่าง Open Graph [TH]
- Podgląd Open Graph [PL]
- Open Graph-förhandsvisning [SV]
- Xem trước Open Graph [VI]
- Vista previa de Open Graph [ES]
- Aperçu Open Graph [FR]
- Open Graph-voorvertoning [NL]
- Open Graph Preview [EN]
- Anteprima Open Graph [IT]
- Предпросмотр Open Graph [RU]
- Open Graph Önizleme [TR]
- Open Graph 预览 [ZH]