معاينة صورة Open Graph

شاهد كيف تبدو صفحتك عند مشاركتها على وسائل التواصل الاجتماعي قبل النشر

أدخل علامات Meta الخاصة بك

أدخل علامات OG يدويًا أدناه لمعاينة كيف ستظهر على كل منصة.

0/60 chars
0/160 chars

موصى به: 1200x630px (نسبة 1.91:1) لأفضل نتائج على جميع المنصات.

Social Media Previews

Fill in the fields on the left to see live previews of how your link will appear on each platform.

ما هي علامات Open Graph؟

علامات Open Graph هي علامات Meta تتحكم في كيفية ظهور محتواك عند مشاركته على وسائل التواصل الاجتماعي. تحدد العنوان والوصف والصورة التي تظهر في بطاقة المشاركة.

صور OG المُحسَّنة تزيد معدلات النقر بشكل كبير. المحتوى الذي يحتوي على صور جذابة يحصل على مشاركات أكثر بكثير.

6 نصائح لصور Open Graph فعّالة

1

Use 1200x630px Images

The 1.91:1 aspect ratio (1200x630px) works across all major platforms. Facebook, LinkedIn, and Twitter all crop to this ratio for large preview cards. Avoid text-heavy images — keep important content centered.

2

Keep Titles Under 60 Characters

Facebook truncates titles around 60-65 characters. Twitter is similar. Write concise, compelling titles that convey value within this limit. Front-load keywords for maximum impact.

3

Descriptions: 155 Characters Max

Most platforms truncate descriptions between 155-200 characters. Write the most important information first. Include a clear value proposition or call-to-action within the first 155 characters.

4

Always Include og:image

Links without images get significantly fewer clicks. Posts with link preview images see 2-3x higher engagement on average. Use high-quality, relevant images that complement your title.

5

Test on Each Platform

Each platform renders previews differently. Facebook uses large horizontal cards, Twitter supports both summary and large image cards, Discord shows an embed with accent color. Always preview on all platforms before launching campaigns.

6

Use Absolute URLs for Images

Social media crawlers cannot resolve relative image paths. Always use full absolute URLs (https://...) for og:image. Ensure images are publicly accessible — authenticated or localhost URLs will fail.

مقارنة أدوات معاينة OG

FeatureKleapMetatags.ioOpenGraph.xyzFacebook Debugger
PriceFreeFree (limited)Free (limited)Free
Platforms Previewed6 platforms4 platforms3 platformsFacebook only
Manual Tag EntryYesYesNo (URL only)No (URL only)
Copy Meta TagsYesYesNoNo
Character WarningsYesNoNoNo
No Signup RequiredYesYesYesFacebook login

أسئلة شائعة حول صور Open Graph

tools.og-image-preview.faq.q1+
Open Graph (OG) meta tags are HTML tags placed in the <head> section of your web page that control how your URL appears when shared on social media. The main tags are og:title (the headline), og:description (a summary), og:image (the preview image), og:url (the canonical URL), and og:type (content type like website or article). Without these tags, platforms try to guess what to show — often with poor results.
tools.og-image-preview.faq.q2+
The recommended Open Graph image size is 1200x630 pixels with a 1.91:1 aspect ratio. This size works well across Facebook, Twitter/X, LinkedIn, Discord, Slack, and WhatsApp. For Twitter summary cards (not large image), use 120x120px minimum. Always use images larger than 200x200px — Facebook won't display images smaller than this.
tools.og-image-preview.faq.q3+
This usually happens because: 1) Your og:image URL is a relative path instead of an absolute URL. 2) The image is behind authentication or on localhost. 3) The image is too small (under 200x200px). 4) The platform has cached an old version — use the platform's debug tool (Facebook Debugger, Twitter Card Validator) to force a re-scrape. 5) Multiple og:image tags exist and the platform picked the wrong one.
tools.og-image-preview.faq.q4+
Use Facebook's Sharing Debugger tool (developers.facebook.com/tools/debug). Enter your URL and click 'Scrape Again'. This forces Facebook to re-fetch your OG tags and update the cached preview. Note that it may take a few minutes for the change to propagate across all of Facebook's servers.
tools.og-image-preview.faq.q5+
og:image is the standard Open Graph tag used by Facebook, LinkedIn, Discord, Slack, WhatsApp, and most other platforms. twitter:image is Twitter/X-specific. If twitter:image is not set, Twitter falls back to og:image. You only need twitter:image if you want to show a different image on Twitter than on other platforms. The twitter:card tag (summary or summary_large_image) controls the layout style.
tools.og-image-preview.faq.q6+
You always need OG tags (og:title, og:description, og:image) since most platforms use them. Twitter/X-specific tags (twitter:card, twitter:title, twitter:description, twitter:image) are optional — Twitter falls back to OG tags if they're missing. However, twitter:card is recommended because it controls whether Twitter shows a small square image (summary) or a large banner image (summary_large_image).
tools.og-image-preview.faq.q7+
Browser security policies (CORS) prevent client-side JavaScript from fetching content from other websites. To read OG tags from a URL, you need a server-side proxy or API. This tool focuses on manual entry so it can run 100% in your browser with zero data sent to any server — your meta tags never leave your device.
tools.og-image-preview.faq.q8+
og:type tells platforms what kind of content your page contains. Common values are: 'website' (homepage, landing pages), 'article' (blog posts, news), 'profile' (personal pages), and 'product' (e-commerce items). The default is 'website'. Facebook uses this to categorize content in news feeds. For most pages, 'website' is fine; use 'article' for blog posts to enable additional tags like article:published_time.
How do OG tags affect SEO and click-through rates?+
OG tags don't directly affect Google rankings, but they significantly impact click-through rates from social media. Posts with optimized OG tags (compelling title, clear description, eye-catching image) can see 2-3x higher engagement compared to posts with missing or auto-generated previews. Higher engagement means more traffic, which indirectly benefits SEO through increased backlinks and brand visibility.
Can I use different titles for Google and social media?+
Yes. The HTML <title> tag is what Google shows in search results, while og:title is what social platforms show in link previews. You can optimize each for its context — a shorter, keyword-rich title for Google and a more compelling, curiosity-driven title for social sharing. Similarly, meta description and og:description can be different to optimize for each channel.

أنشئ موقعًا قابلًا للمشاركة مع Kleap

Kleap يُضيف علامات Open Graph تلقائيًا لكل صفحة في موقعك

ابدأ مجانًا

Related Free Tools

Image Compressor

Meta Tags Generator

Social Media Post Generator

Favicon Generator

أداة معاينة صورة OG - Open Graph | Kleap