Web siteniz için bağlantı önizleme görseli hazırlama

Bağlantı önizleme görseli nedir?

Bir yazıyı paylaştığınızda karşı taraf yalnızca adresi, yanlış bir resmi veya görsel ve başlık içeren bir kartı görebilir. Karttaki resme paylaşım görseli, bağlantı önizleme görseli veya Open Graph görseli denir.

Bu görsel web sayfasının bağlantısına eşlik eder. Instagram gönderisi, tarayıcı sekmesindeki küçük site simgesi (favicon) ve yazının kapak resmi farklı amaçlara hizmet eder. Aynı kaynağı kullanabilirsiniz; ancak kırpma, metin ve ayarları kullanım yerine göre düzenleyin.

Bir hizmet önizleme oluştururken sayfanın başlığını, açıklamasını ve görsel adresini okur. Bu arka plan bilgilerine meta veri denir. Open Graph, hizmetlerin bu bilgileri tanımasını sağlar. Genellikle kod yazmadan site ayarlarından girebilirsiniz. MDN’nin meta veri rehberi bu bilgilerin görünen sayfa içeriğinden farkını açıklar.

Uygulamalar aynı önizlemeyi göstermez. Görseli kırpabilir, başlığı kısaltabilir veya kartı hiç göstermeyebilirler. Siteniz son görünümü tamamen belirlemez. Bağlantıyı paylaşacağınız hizmette sonucu kontrol edin.

Görsel hangi boyutta olmalı?

Siteniz başka bir ölçü önermiyorsa 1200 × 630 piksel ile başlayın. Bu, 1200 küçük görüntü noktası genişlik ve 630 nokta yükseklik demektir; görsel neredeyse iki kat geniştir. Pratik bir öneridir, bütün hizmetlerin ortak şartı değildir.

Örneğin, LinkedIn’in yönergeleri bir Sayfa gönderisinin önizlemesi için 1200 × 627 önerir. Birkaç piksellik fark için resmi esnetmeyin. Belirli bir alan için sürüm hazırlarken ilgili hizmetin yönergelerini izleyin.

Görsel ölçüleri ile dosya boyutu farklıdır. Piksel, genişlik ve yüksekliği; kilobayt (KB) veya megabayt (MB), kaplanan alanı belirtir. Her görsel için ortak bir dosya boyutu hedefi yoktur. Kopyaları karşılaştırın, okunaklı kalan küçük sürümü seçin. Hizmetin üst sınırını da kontrol edin.

Kaynak 1600 × 1600 ise önce yatay bir kırpma hazırlayın. Araç oranları korumuyorsa doğrudan 1200 × 630 ayarlamak konuyu esnetebilir. Görseli bozmadan boyutlandırma rehberi kırpma ile ölçü değiştirme arasındaki farkı açıklar.

Küçük boyutta anlaşılır bir görsel tasarlayın

Kart çoğu zaman telefonda, başka içeriklerin arasında görünür. Küçük ayrıntılar kaybolabilir. Okurun hemen anlaması gereken tek şeyi seçin: yazının konusu, etkinliğin türü veya bağlantıdaki ürün.

Görselde “Daha iyi ürün fotoğrafları” gibi kısa bir ifade, uzun başlık ve alt başlıktan daha iyi çalışabilir. Başlık çoğu önizlemede resmin dışında da görünür. Her bilgiyi görsele sığdırmayın; temel bilgiler sayfanın metninde de bulunmalıdır.

Metin ile arka planı kolay ayırt edilen renklerle hazırlayın. Konunun çevresinde boşluk bırakın; yüzleri, ürünleri ve önemli kelimeleri kenarlardan uzak tutun. Her hizmet için geçerli bir güvenli alan yoktur. Tam görseli ve kenarları daha fazla kesilmiş, merkeze yakın bir kırpmayı deneyin.

Taslağı yaklaşık 300 piksel genişlikte veya telefonda küçük görünümde inceleyin. Bu bir okunabilirlik denemesidir, teknik şart değildir. Yakınlaştırmadan okuyup konuyu anlayabiliyor musunuz? Değilse metni kısaltın, harfleri büyütün veya ayrıntıları azaltın.

Mağaza görselinde ürün hemen anlaşılmalı. Etkinlik görseli atmosferi anlatabilir; ancak tarih ve kayıt bilgisi sayfada metin olarak da yer almalı. Logo tanınmayı sağlar, fakat her yazıda aynı büyük logoyu kullanmak yazının konusunu pek anlatmaz.

Biçimi seçin ve bir kopyayı sıkıştırın

Fotoğraf ağırlıklı görseller için JPG iyi bir başlangıçtır. JPG harfleri veya kenarları bozuyorsa PNG kullanışlıdır. Arka planı bilinçli seçin: şeffaf görsel, uygulamanın arka planında gösterilir ve açık renkli logo kaybolabilir.

WebP ve AVIF site içindeki görsellerde kullanılabilir. Tarayıcının desteklemesi, önizlemeyi oluşturan hizmetin de desteklediğini göstermez. Burada JPG veya PNG ile başlayın. Başka biçimler için desteği ve gerçek sonucu kontrol edin.

Yerleşimi tasarım programınızda hazırlayın. Kırpma için Pixilo’nun görsel kırpma aracını, ölçüler için ise boyutlandırma aracını kullanın. Belirli bir dosya sınırı varsa dosyayı boyut sınırına küçültmeyi deneyin. İndirdiğiniz dosyayı kontrol edin; bu araçlar sitenizdeki paylaşım görseli ayarını yapmaz.

Sıkıştırma, dosyanın kapladığı alanı azaltır. Orijinali saklayın ve bir kopyayla çalışın. Harfleri, logo kenarlarını ve renk geçişlerini karşılaştırın. Kalite bozulursa orijinalden daha hafif sıkıştırmayla yeniden başlayın. Bulanık kopyayı tekrar işlemek ayrıntıları geri getirmez. JPG ve PNG karşılaştırması metin ve fotoğraflar için seçim yapmanıza yardımcı olur.

Görseli WordPress’e veya site oluşturucuya ekleyin

Site yönetiminde ilgili yazıyı açın. Paylaşım görseli, Social image veya Open Graph image adlı ayarı arayın. Arama motoru optimizasyonu ayarlarında, yani SEO bölümünde olabilir. Şu adımları izleyin:

1. Doğru sayfayı açın. Bağlantısını paylaşacağınız yazıyı veya sayfayı düzenleyin.
2. Bu sayfaya özel görsel seçin. Hazır dosyayı yükleyin veya daha önce yüklenen görsellerin bulunduğu medya kütüphanesinden seçin.
3. Başlığı ve varsayılanı kontrol edin. Değişiklik yalnızca bu sayfayı etkilemeli, tüm sitenin ortak paylaşım görselini değiştirmemeli.
4. Kaydedip yayımlayın. Dosyayı kütüphaneye yüklemek tek başına önizleme bilgilerini değiştirmez.
5. Herkese açık bağlantıyı deneyin. Paylaşmadan önce aşağıdaki kontrolleri yapın.

WordPress’te ayar mevcut SEO eklentinizde bulunabilir. Eklenti, WordPress’e özellik ekler. Örneğin, Yoast rehberi sosyal görsel ayarlarını gösterir. Menü adları ve önizleme seçenekleri sürüme ve aboneliğe göre değişebilir. Yeni eklenti kurmadan önce mevcut işlevleri inceleyin.

Kapak görseli, tema ve eklentilere bağlı olarak paylaşım görseli de olabilir. Yoast’ın teknik açıklaması görseli nasıl seçtiğini anlatır. Varsayılan görsel, özel seçim yapılmayan sayfalarda kullanılan yedektir. Önemli yazılarda ortak görsel konuyu anlatmıyorsa ayrı bir görsel seçin.

Ayarı bulamıyorsanız siteyi yöneten kişiye sayfa adresini ve hazır görseli verin. Paylaşım görselini ayarlamasını ve yayımlanan bilgileri kontrol etmesini isteyin. Meta verileri yazının görünen metnine yapıştırmak doğru yere eklemekle aynı değildir.

İsteğe bağlı: görseli sayfa kodundan ayarlayın

Görseli site ayarlarından seçtiyseniz bu bölümü atlayabilirsiniz. Doğrudan kod düzenleyen siz veya site yöneticiniz içindir. HTML, sayfanın yapısını tarif eder. head bölümü, yazı metninde görünmeyen arka plan bilgilerini içerir. Aşağıdaki bilgileri oraya ekleyin. og:image görsel adresini belirtir; diğer Open Graph alanları sayfayı tanımlar. Open Graph tanımı bu alanları açıklar. Örnek bir makale içindir. Genel bir sayfa için website türünü kullanın.

Alan adını, adresleri, başlığı, açıklamayı ve görsel dosyasını kendinize göre değiştirin. 1200 × 630 yazıyorsanız görselin gerçek ölçüleri de böyle olmalıdır.

<meta property="og:type" content="article">
<meta property="og:title" content="Mağazanız için daha iyi ürün fotoğrafları">
<meta property="og:description" content="Anlaşılır görseller hazırlayın ve ürün sayfanızda kontrol edin.">
<meta property="og:url" content="https://example.com/guides/product-photos/">
<meta property="og:image" content="https://example.com/images/product-photos-social.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Açık renkli fonda mavi bir kupa ve Daha iyi ürün fotoğrafları yazısı.">

Site adı ve dosya yolunu içeren tam bir HTTPS adresi kullanın. Sayfa adresi og:url alanına, görsel adresi ise og:image alanına yazılır. Sayfa adresi amaçlanan ana adresle eşleşmelidir. Çok dilli sitelerde her sürümün doğru başlık ve adresini kontrol edin.

Görselin konusunu ve önemli yazılarını og:image:alt alanında açıklayın. Bu, alternatif metin veya alt metindir. Yazıda görünen resmin açıklamasının yerine geçmez. Aynı resmi yazıda da kullanıyorsanız oradaki açıklamayı ayrıca ekleyin.

Önce tema veya eklentinin alanları zaten oluşturup oluşturmadığını kontrol edin; mevcut ayarı güncelleyin. Birden fazla görsel bilinçli olabilir, ancak eski ve yeni çelişkili bilgiler seçimi belirsizleştirir. Ana görsel ve ölçülerini birlikte tutun.

Hizmet sayfayı okurken bilgiler yayımlanan HTML’de bulunmalıdır. Sonradan yalnızca tarayıcıda eklenen ayar okunmayabilir. X kartları için ayrı ayarlar varsa onların görselini de inceleyin. Open Graph düzeltmesi başka alandaki eski görseli değiştirmez.

Paylaşmadan önce yayımlanan bağlantıyı deneyin

Sayfanın herkese açık adresini yeni gönderi veya mesaj taslağına yapıştırın. Önizlemeyi bekleyin. Görsel ve başlık doğru mu, metin okunuyor mu? Taslağı göndermeden ilgili hizmette deneyin. Görsel eksik veya yanlışsa kontrolleri sürdürün.

Tarayıcıda yayımlanan sayfanın kaynak kodunu açıp og:image ifadesini arayın. Bu menünün adı tarayıcıya göre değişir. Görseli, başlığı ve sayfa adresini kontrol edin veya yöneticinizden isteyin. Yönetim panelindeki taslak adresi, herkese açık bağlantının testi değildir.

LinkedIn için Post Inspector, Facebook için ise Sharing Debugger kullanılabilir. Sayfa adresini yapıştırıp kontrolü başlatın; oturum açmanız gerekebilir. Ardından yeni bir gönderi taslağını da kontrol edin. Deneme için yayın yapmak gerekmez.

Sayfa adresini, görsel adresini ve denediğiniz hizmeti not edin. Bir yerde çalışıp diğerinde çalışmıyorsa bu bilgiler, sürekli görsel değiştirmekten daha yararlıdır. LinkedIn’in önbellek rehberi Post Inspector güncellemelerinin yeni gönderileri etkilediğini, mevcut gönderilerin önizlemelerinin değişmediğini belirtir.

Görsel neden eksik veya yanlış görünüyor?

Üç nedeni ayırın: sayfa yanlış resmi gösteriyor, hizmet dosyaya ulaşamıyor veya eski kaydedilmiş önizlemeyi kullanıyor. Kaliteyi artırmak bozuk adresi düzeltmez. Tarayıcıyı yenilemek de başka hizmetin önbelleğini temizlemez.

Görsel adresi bir web sayfasını açıyorsa yol yanlış veya dosya eksik olabilir. Bazı siteler bu durumda ana sayfayı gösterir. Yöneticiye iki adresi de verin ve gerçek görsel dosyasının oturum açmadan erişildiğini doğrulatın.

Önbellek, sayfanın veya görselin kaydedilmiş kopyasıdır. Yüklemeyi hızlandırır ama eski kalabilir. CDN, dosyaları farklı sunuculardan dağıtan bir hizmettir ve kopyalar saklayabilir. Gerekirse site kopyalarını güncelletin. Önce herkese açık sayfa ve dosyayı doğrulayın, sonra paylaşım hizmetinden yeniden okumasını isteyin. Tarayıcınızın önbelleğini temizlemek diğer kopyaları güncellemez.

Yeni görseli farklı ve açık bir adla kaydedebilirsiniz; örneğin product-photos-social-v2.jpg. Sonra sayfadaki adresini güncelleyin. Bu, dosyaları ayırır ancak sayfanın yeniden okunmasını veya önceki mesajların değişmesini zorunlu kılmaz.

Makalenin kalıcı adresini değiştirmeyin veya denemek için korumaları kapatmayın. Yöneticiye sorunlu adresi ve hata mesajını verin. Bu belirli herkese açık içeriğe erişimi neyin engellediğini araştırabilir.

Örnek: ürün fotoğrafı rehberi için anlaşılır bir kart

Bir mağaza rehberinin kapağında kare bir kupa fotoğrafı ve farklı cihazlara uygun ürün fotoğrafları hakkında uzun bir başlık olduğunu düşünün. Otomatik yatay kırpma kulpu kesiyor. Aşağıdaki süreç bir örnektir, ölçülmüş sonuç değildir.

1. Yatay bir sürüm hazırlayın. 1200 × 630 ile başlayın; kupanın tamamını gösterip çevresinde boşluk bırakın.
2. Görseldeki metni kısaltın. “Daha iyi ürün fotoğrafları” ifadesini deneyin. Tam başlığı yazıda ve önizleme başlığı ayarında koruyun.
3. Kaydedip kontrol edin. JPG ve PNG’yi dosya boyutu, yazı ve ürün kenarları açısından küçük görünümde karşılaştırın.
4. Sayfanın görselini ayarlayın. Dosyayı yazının paylaşım ayarlarından seçin. Kaydedip yayımlayın.
5. Bağlantıyı deneyin. Dosyayı, sayfa bilgilerini ve hizmette yeni önizlemeyi kontrol edin.

Bu sürüm bağlantıya uygun olabilir ama Instagram veya geniş bir site kapağı için en iyisi olmayabilir. Son JPG’yi sürekli düzenlemek yerine yeni sürümler için özgün tasarım dosyasını saklayın.

Paylaşım görselinin SEO ile ilgisi nedir?

Görsel, paylaşılan bağlantıyı anlamayı kolaylaştırır. Yalnızca og:image eklemek daha iyi arama sıralaması garanti etmez. Arama sonucu, sayfa içi ve bağlantı görselleri farklı kullanımlardır. Tek ayar hepsini kontrol etmez.

Açıklayıcı dosya adı ve sayfaya uygun başlık seçin. Görseli bir insan için anlatın; anahtar kelime listesiyle doldurmayın. Google’ın SEO başlangıç rehberi yararlı içerik ve anlaşılır görselleri ele alır. Alt metin ve dosya adları rehberi sayfada görünen resimleri açıklamaya yardımcı olur.

Paylaşım görselini küçültmek, yazının görünen ana resmini otomatik hızlandırmaz. Sayfa başka dosya kullanıyorsa onu ayrıca iyileştirin. Performansı gerçekten yüklenen görseller üzerinden değerlendirin.

Sık sorulan sorular

Open Graph 1200 × 630 zorunlu mu tutar?

Hayır. Burada pratik başlangıç ölçüsüdür. Open Graph adres ve ölçülerin nasıl belirtileceğini açıklar; gösterim biçimini ve sınırları alıcı hizmet belirler.

Kapak resmi paylaşım görseli de olabilir mi?

Evet, yerleşim uygunsa ve site doğru dosyayı bildiriyorsa. Dikey veya kare kapaklarda ya da küçük görünümde okunmayan metinde ayrı bir sürüm yardımcı olur.

Her sayfaya farklı görsel gerekir mi?

Şart değil. Varsayılan görsel iyi bir yedektir. Konusu sadece logodan anlaşılmayan rehberler, ürünler ve etkinlikler için özel görsel daha yararlıdır.

Yeni resim neden eski gönderide görünmüyor?

Hizmet ilk önizlemeyi koruyabilir. Yeni bir taslağı ve hizmetin güncelleme yönergelerini kontrol edin. Sitede dosyayı değiştirmek gönderilmiş mesajların değişmesini garanti etmez.

Paylaş düğmesi resmi önizlemeye ekler mi?

Hayır. Bağlantıyı göndermeyi kolaylaştırır ama sayfa bilgilerinin yerini tutmaz. Kartı getirip göstermeye alıcı hizmet karar verir. Görsel dosyasını ayrıca paylaşmak farklı bir işlemdir.

Yapay zekâyla özetleChatGPT (yeni sekmede açılır)Grok (yeni sekmede açılır)Google (yeni sekmede açılır)Perplexity (yeni sekmede açılır)Claude (yeni sekmede açılır)