Bağlantı önizlemeniz neden yanlış görünüyor ve Open Graph ile nasıl düzeltilir

Yeni açılış sayfanıza bir bağlantı paylaşıyorsunuz ve önizleme görselsiz, ana sayfanızın başlığıyla ya da iki kampanya önceki bir afişle geliyor. Sayfanın kendisinde sorun yok. Önizleme başka bir şeyden oluşturuluyor: çoğu insanın hiç görmediği, sayfanın head bölümündeki birkaç satır koddan.

Bu yazı, bozuk önizlemelerin çoğunun ardındaki altı nedeni, kontrol etmeye değer sırayla ele alıyor. Etiketlerin sizin yerinize yazılmasını istiyorsanız, ücretsiz Open Graph oluşturucu bunları üretir, düzgün biçimde kaçış karakterleriyle yazar ve aşağıdaki sınırlara göre denetler.

Bağlantı önizlemesi nasıl oluşturulur

Bir bağlantı bir gönderiye ya da mesaja yapıştırıldığında, uygulama sayfaya bir tarayıcı botu gönderir. Bot, <head> içindeki <meta> etiketlerini okur ve kartı bunlardan çizer. Bu etiketler, dördünü gerekli sayan Open Graph protokolünden gelir:

• og:title: sayfanın kartta görünmesi gereken başlığı.
• og:type: sayfanın türü, genellikle website ya da article.
• og:image: görsel.
• og:url: sayfanın kanonik adresi; protokol buna kalıcı kimlik diyor.

og:description ekleyin, kartınız hazır olur. Eksiksiz ve asgari bir küme şöyle görünür:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Neden 1: etiketler eksik

og: etiketleri yoksa her uygulama <title> ya da ilk görsel gibi sayfada bulduğu başka şeylere dönmek zorunda kalır ve neyi seçeceği o uygulamaya kalmıştır. Bu yüzden bir bağlantı bir yerde doğru, bir sonrakinde bozuk görünebilir. Çözüm, dört gerekli etiketi ve bir açıklamayı yalnızca ana sayfada değil, insanların paylaşmasını beklediğiniz her sayfada belirtmektir. Ana sayfanın etiketleriyle paylaşılan bir ürün sayfası, ana sayfanın kartını gösterir.

Neden 2: görsel adresi göreli

Bunu gözden kaçırmak kolaydır, çünkü sayfa kendi tarayıcınızda düzgün görünür. content="/images/og.jpg" sitenizde zaten açık olan bir tarayıcıda çalışır, ama bot sitenizin dışında kalır. Tam adresi yazın: https:// ile başlayan ve alan adınızı içeren. Aynısı og:url için de geçerlidir.

Neden 3: görsel yanlış boyutta ya da şekilde

Her platform neyi istediğini belirtir ve bu üçü geniş bir görselde birleşir:

• LinkedIn, web sitenizi paylaşılabilir yapma rehberinde görselin en az 1200 × 627 piksel olması, önerilen oranın 1.91:1 olması ve 5 MB'ı aşmaması gerektiğini söyler.
• Meta’nın paylaşım en iyi uygulamaları, yüksek çözünürlüklü ekranlar için en az 1080 piksel genişliğinde, görsel bağlantı reklamlarını göstermek için ise en az 600 piksel genişliğinde görseller önerir.
• X'in büyük görsel kartı, geliştirici belgelerine göre 300 × 157 ile 4096 × 4096 piksel arasında 2:1 orana, 5 MB'ın altında, JPG, PNG, WEBP ya da GIF biçiminde görselleri destekler ve SVG'yi desteklemez. Orijinal sayfa artık yönlendirme yapıyor, bu yüzden bu bağlantı Internet Archive üzerinden gider.

Üçü için tek bir boyut yeterli: 1200 × 630. LinkedIn'in 1200 × 627 asgarisini karşılar, Meta'nın 1080'inden geniştir ve oranı 1200 ÷ 630 = 1.905 olup X'in 2:1 oranına %5 mesafededir. Kare ya da dikey bir görsel geniş karta kırpılır, bu yüzden önemli kısmı ortada tutun. En-boy oranı hesaplayıcısı ortadan kırpmanın neyi koruduğunu gösterir.

Boyutu etiketlerde de belirtin. Meta, görseli hemen gösterebilmesi için, indirip işlemeden önce, og:image:width ve og:image:height ister. Webmaster rehberi bunu basitçe anlatır: görselin ilk paylaşımda düzgün yüklenmesi için yüksekliği ve genişliği belirtin.

Neden 4: etiketler JavaScript ile ekleniyor

Bazı site oluşturucular ve tek sayfalık uygulamalar meta etiketlerini, sayfa yüklendikten sonra tarayıcıda ekler. Sunucunuzun gönderdiği HTML'i okuyan bir bot bu kodu hiç çalıştırmayabilir, dolayısıyla etiketleri hiç görmez. Sayfanın kaynağını kontrol edin (Kaynağı Görüntüle; inceleyici değil, çünkü inceleyici betikler çalıştıktan sonraki sayfayı gösterir). Etiketler kaynakta yoksa, bot da muhtemelen görmez. Düzeltme sitenizin ayarlarında ya da sunucu tarafındaki şablonunuzda olmalı.

Neden 5: özel karakterler etiketi bozdu

İçinde çift tırnak olan bir başlık, örneğin The "only" linen you need, content="..." özniteliğini erken kapatır ve başlığın geri kalanı kaybolur. Bir özniteliğin içinde önemli olan karakterler kaçış karakterleriyle yazılmalıdır: " " olur, & & olur ve < &lt; olur. Tarayıcılar ve botlar etiketi okurken bunları özgün karakterlere geri çevirir. Oluşturucu bunu sizin yerinize yapar; bir tanesini kullanmanın yarısı nedeni de budur.

Neden 6: uygulama eski sürümü hatırlıyor

Etiketleri düzelttiniz, yeniden paylaştınız ve eski kart hâlâ orada. Bu önbellektir. Uygulamalar taradıklarını saklar ve yeniden kullanır; iki büyük ağ da yeni bir bakış istemek için bir araç sunar:

• Facebook: URL'yi Meta'nın Sharing Debugger aracına yapıştırın. Meta'nın webmaster rehberi, botun hangi etiketleri çektiğini, varsa hata ve uyarılarla birlikte gösterdiğini ve yeni bir tarama tetiklediğini söyler. Meta'nın en iyi uygulamaları, çekilen içeriğin aksi halde standart 24 saatlik bir dönemde güncellendiğini ekler.
• LinkedIn: URL'yi Post Inspector üzerinden çalıştırın. LinkedIn'in yardım sayfası sınırı açıkça belirtir: yenileme yalnızca yeni gönderiler için önizlemeyi değiştirir. URL'yi zaten içeren gönderiler eskisini tutmaya devam eder.

Lansmandan önce hatırlanması gereken not bu LinkedIn notu. Önizlemeyi ilk gönderi çıkmadan önce kontrol edin, çünkü sayfayı düzeltmek eski bir gönderiyi düzeltmez.

twitter:card etiketi: dört değil, tek satır

X de Open Graph'i okur. cards işaretleme referansı her etiket için bir yedek listeler: twitter:title, og:title'a; twitter:description, og:description'a; twitter:image, og:image'a ve twitter:image:alt, og:image:alt'a düşer. Yani her şeyi tekrarlamanız gerekmez. Eklemeniz gereken tek satır twitter:card: tam genişlikte bir görsel için summary_large_image, küçük bir kare için summary. Bunu atlarsanız aynı referans, X'in bunun yerine küçük bir özet kartı gösterebileceğini söyler; büyük bir görselin bazen küçük resim olarak gelmesinin nedeni de budur. Aynı referans başlığı 70, açıklamayı 200 ve alternatif metni 420 karakterle sınırlar.

Beş dakikalık lansman öncesi kontrol

1. Sayfa kaynağını görüntüleyin ve og: etiketlerini bulun. Gerekli dört etiketin hepsi, artı bir açıklama.
2. og:image ve og:url değerlerinin https:// ile başladığını kontrol edin.
3. Görsel URL'sini tek başına bir tarayıcıda açın. 1200 × 630 ya da buna yakın boyutta yüklenmelidir.
4. URL'yi Sharing Debugger ve Post Inspector'a yapıştırın ve kartları okuyun.
5. Ancak ondan sonra paylaşın.

Hermoso nerede yer alıyor

Hermoso bir AI pazarlama ajanıdır: pazarınızda zaten işe yarayan reklamları araştırır, markanıza uygun görsel ve video reklamları yapar, gönderileri kendi hesaplarınıza planlar ve kendi reklam hesaplarınızda ücretli kampanyalar yürütür. İyi bir bağlantı önizlemesi, bu gönderileri tıklamaya değer kılan şeydir. Hermoso web uygulamasında ya da MCP sunucusu üzerinden Claude, ChatGPT ve Cursor içinde çalışır.

Sıkça sorulanlar

Bağlantım Facebook ya da LinkedIn'de neden görsel göstermiyor?

Genellikle og:image etiketi eksiktir, tam https:// adresi yerine göreli bir yol kullanır ya da çok küçük bir görsele işaret eder. LinkedIn en az 1200 × 627 piksel ister. Düzelttikten sonra URL'yi Meta'nın Sharing Debugger'ı ya da LinkedIn'in Post Inspector'ı üzerinden çalıştırın, böylece yeniden çekerler.

Bir Open Graph görseli hangi boyutta olmalı?

1200 × 630 piksel büyük ağların tamamında çalışır. Yaklaşık 1.91:1 oranıyla LinkedIn'in 1200 × 627 asgarisini karşılar, Meta'nın önerdiği 1080 pikselden geniştir ve X'in büyük görsel kartlarında desteklediği 2:1 orana yakındır.

LinkedIn bağlantı önizlemesini nasıl güncellerim?

Sayfadaki etiketleri düzeltin, sonra URL'yi LinkedIn'in Post Inspector'ına girin. Yenilenen önizleme yalnızca yeni gönderilere uygulanır. URL'yi zaten içeren gönderiler eski önizlemeyi korur.

og: etiketlerim varsa twitter: etiketlerine ihtiyacım var mı?

Yalnızca twitter:card. twitter: sürümleri eksik olduğunda X, og:title, og:description, og:image ve og:image:alt değerlerine döner.