🔗 Open Graph Preview

Preview how your web page looks when shared on Facebook, Twitter, LinkedIn, and WhatsApp. Check Open Graph and Twitter Card tags. Free online OG preview tool.

Title

27/95

Description

57/200

Image URL Site Name Page URL

Facebook / Open Graph

No image

ONHTML.COM

My Awesome Page — onHTML.com

Free online tools for developers: HTML, CSS, JSON and more.

Twitter / X Card

No image

My Awesome Page — onHTML.com

Free online tools for developers: HTML, CSS, JSON and more.

onhtml.com

How to Use

Enter your metadata

Fill in the title, description, image URL, and site name. These map to og:title, og:description, og:image, and og:site_name.

See the live preview

Watch the Facebook and Twitter card previews update in real time as you type.

Copy the meta tags

Click Copy Meta Tags to get the full Open Graph <meta> block ready to paste in your <head>.

Frequently Asked Questions

What are Open Graph meta tags? +

Open Graph (OG) meta tags control how your page appears when shared on social media. They define the title, description, image, and URL that Facebook, LinkedIn, Twitter, and other platforms display in link previews.

Why does my Facebook preview look wrong? +

Facebook caches OG data. After adding or updating OG tags, use the Facebook Sharing Debugger to clear the cache and re-scrape your URL. It may take a few minutes to update.

What is the ideal OG image size? +

The recommended OG image size is 1200×630 pixels (1.91:1 ratio). Minimum is 600×315px. Twitter large card uses 1200×628px. PNG or JPG format, under 8MB.

What is the difference between og:title and the page title tag? +

og:title is specifically for social media sharing and can differ from the HTML <title> tag. You might use a shorter, more engaging title for social sharing while keeping a keyword-optimized title for SEO.

Do all social platforms support Open Graph? +

Facebook, LinkedIn, Pinterest, and most messaging apps use the Open Graph protocol. Twitter has its own Twitter Card system (twitter:card tags) but also falls back to OG tags if Twitter Cards are not defined.

Tam Rehber: Open Graph Önizleme Aracı

Birisi Facebook, Twitter/X, LinkedIn veya WhatsApp'ta bir bağlantı paylaştığında, platform ham bir URL göstermez — resim, başlık ve açıklama içeren zengin bir kart oluşturur. Bu kartlar sayfanın <head> bölümüne gömülü Open Graph ve Twitter Card meta etiketlerinden oluşturulur.

Temel Open Graph Etiketleri

<meta property="og:title" content="Sayfa Başlığı" />
<meta property="og:description" content="Sayfa açıklaması burada." />
<meta property="og:image" content="https://ornek.com/img/kapak.jpg" />
<meta property="og:url" content="https://ornek.com/blog/rehber/" />

Platform Başına Görsel Boyutları

Facebook — 1200 × 630 piksel (1,91:1 oran). Minimum 600 × 315 piksel.
Twitter / X — summary_large_image için 1200 × 628 piksel.
LinkedIn — 1200 × 627 piksel. Önbelleği temizlemek için Post Inspector'ı kullanın.
WhatsApp — Standart og:image etiketlerini okur. Minimum 400 × 400 piksel kare görseller de işe yarar.

Twitter Card Türleri

summary — Küçük kare küçük resim + başlık + açıklama.
summary_large_image — Başlığın üzerinde tam genişlikte resim. En yüksek etkileşim.
app — Mobil uygulamayı App Store / Google Play bağlantılarıyla tanıtır.
player — Doğrudan tweet'e video veya ses oynatıcı yerleştirir.

Önbellek Temizleme

Sosyal platformlar OG verilerini agresif biçimde önbelleğe alır. Etiketlerinizi güncelledikten sonra eski veriler saatlerce veya günlerce sürebilir:

Facebook — developers.facebook.com/tools/debug/ adresini ziyaret edin ve Tekrar Tara'ya tıklayın.
LinkedIn — linkedin.com/post-inspector/ adresindeki Post Inspector'ı kullanın.
Twitter/X — Card Validator'ı kullanın.

<title> ve meta açıklamayı OG etiketleriyle birlikte Meta Etiket Oluşturucu ile ayarlayın.
Sitenizin markalamasını tamamlamak için Favicon Oluşturucu'yu kullanın.