معاينة 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 على الأجهزة المحمولة؛ حيث يتم عرض الصفحة بأحجام شاشات الهواتف، ويتم تحديد أي مشاكل تتعلق بنقاط النقر، أو نصوص صغيرة جدًا، أو غياب بيانات ميتا الخاصة بحجم العرض.
محلل UTM
الصق رابط حملة واقرأ وسوم UTM الخمسة القياسية (source وmedium وcampaign وterm وcontent) مع فك ترميز كل قيمة. طريقة سريعة لفحص رابط تتبع قبل إرساله.
Page Speed Insights
أدخل أي رابط وافتح تدقيق سرعة مجاني في Google PageSpeed Insights أو GTmetrix أو WebPageTest لعرض مؤشرات Core Web Vitals ودرجات Lighthouse.
أداة إنشاء روابط UTM
أنشئ روابط تتبّع للحملات بمعاملات UTM: source وmedium وcampaign وterm وcontent. روابط نظيفة ومشفّرة لعناوين URL، جاهزة للإعلانات والنشرات البريدية.
معاينة مقتطف SERP من الرابط
الصق رابطًا وشاهد كيف يظهر عنوانه ووصف الميتا والرابط القانوني مباشرةً كمقتطف جوجل. يُجلب مباشرة من الصفحة، دون نسخ يدوي.
مولد خريطة الموقع
الصق قائمة عناوين URL الخاصة بك وأنشئ خريطة موقع XML صالحة مع changefreq وpriority وlastmod الاختياري، جاهزة للحفظ والإرسال إلى Search Console.
الأداة متاحة بلغات أخرى
- Pratinjau Open Graph [ID]
- Aperçu Open Graph [FR]
- Open Graph プレビュー [JA]
- Prévia do Open Graph [PT]
- ตัวอย่าง Open Graph [TH]
- Vista previa de Open Graph [ES]
- Open Graph 미리보기 [KO]
- Xem trước Open Graph [VI]
- Open Graph Preview [DE]
- Open Graph-voorvertoning [NL]
- Open Graph-förhandsvisning [SV]
- Podgląd Open Graph [PL]
- Open Graph Preview [EN]
- Anteprima Open Graph [IT]
- Предпросмотр Open Graph [RU]
- Open Graph Önizleme [TR]
- Open Graph 预览 [ZH]