Sosyal önizleme rehberi
Open Graph görselleri: yayınlamadan önce paylaşılan linki test edin
Open Graph resimleri, birisi bağlantı paylaştığında sayfanızın nasıl görüneceğini belirler. Bu rehber, pratik boyut, etiketler, tasarım kontrolleri, önbellek düzeltmeleri ve yayınlama kontrol listesini gösterir.
Hızlı cevap
Bir Open Graph görseli seçin ve paylaşmadan önce linki test edin
Çoğu sayfa için 1200 x 630 boyutunda başlayın, önemli metin ve logoları kenarlardan uzak tutun, mutlak HTTPS resim URL'leri kullanın ve son URL'yi platform hata ayıklama araçlarında test edin. Bu basit iş akışı çoğu bozuk önizlemeyi yakalar.
Önizleme rolü
Open Graph resmini sayfa varlığı olarak değerlendirin
Open Graph resmi süsleme değildir. Tarayıcılar sosyal akışlar, sohbet uygulamaları ve iş araçları için bağlantı kartı oluştururken sayfayı temsil eden resimdir. Başlık, açıklama, görünür konu ve yapılandırılmış veri resmiyle uyumlu olmalıdır.
Tıklamayı artırır
Resim, başlık ve açıklama, ziyaretçi sayfanıza ulaşmadan önce ilk izlenimi oluşturur.
İçerikle uyumlu olmalı
İyi bir önizleme resmi, sayfa başlığı, görünür konu ve ana kullanıcı vaadiyle uyumlu olmalı, genel bir marka grafiği kullanılmamalıdır.
SEO verileriyle birlikte olmalı
Open Graph resimleri, Twitter kart resimleri, kanonik URL'ler ve JSON-LD resimleri aynı sayfayı tanımlamalıdır.
Bir adlandırma kuralına ihtiyaç var
Açık bir dosya adı ve güncelleme kuralı, eski önbelleklerin ve kampanya görsellerinin tekrar görünmesini engeller.
Boyut planı
Gerçek önizlemelerde sağlam kalan boyutları seçin
Farklı platformlar önizlemeleri biraz farklı kırpar ve önbelleğe alır. 1200 x 630 dosya, Open Graph önizlemeleri için güçlü bir varsayılandır, ancak daha güvenli kural, ortalanmış güvenli alanla tasarlamak ve sayfa için önemli platformlarda son URL'yi test etmektir.
| Platform veya kullanım | Pratik resim planı | Dikkat edin | Yayınlama kontrolü |
|---|---|---|---|
| Genel Open Graph | Büyük paylaşım resmi için pratik varsayılan olarak 1200 x 630 kullanın. | Küçük resimler yumuşak görünebilir veya küçük küçük resimler olarak gösterilebilir. | Paylaşmadan önce son URL'yi platform hata ayıklayıcısında önizleyin. |
| Facebook ve LinkedIn | Sayfa platforma özel bir varlık gerektirmedikçe aynı 1.91:1 oranlı resmi kullanın. | Kenarlar, akış düzenleri ve cihazlar arasında farklı şekilde kırpılabilir. | Önemli metin ve logoları merkezdeki güvenli alanda tutun. |
| X büyük kart | summary_large_image kullanın ve görseli ortalayın; X geniş büyük kart resmini destekler. | Kart kırpıldığında veya yeniden boyutlandırıldığında küçük metin ve kenar detayları kaybolabilir. | twitter:image ayarlayın ve X kart araçlarıyla test edin. |
| Sohbet uygulamaları ve iş araçları | Dosyayı küçük ve tasarımı basit tutun çünkü önizlemeler genellikle küçük panellerde görünür. | Yoğun ekran görüntüleri, uzun başlıklar ve düşük kontrast hızla okunamaz hale gelir. | Son bağlantıyı hedef kitlenizin kullandığı araçlara yapıştırın. |
Ana mesajı resmin merkezinde tutun. Kenarlar risklidir çünkü akış kartları, sohbet önizlemeleri ve mobil düzenler farklı kırpabilir.
HTML
Sayfa yayına alınmadan önce tarayıcıların ihtiyaç duyduğu etiketleri ayarlayın
Open Graph etiketleri HTML başlığına aittir. Mutlak resim URL'leri kullanın, genişlik ve yüksekliği belirtin, faydalı alt metin ekleyin ve kanonik URL'yi kullanıcıların paylaşacağı sayfayla tutarlı tutun.
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| Etiket | Neden önemli | Yaygın yanlış |
|---|---|---|
| og:image | Tarayıcıları sayfayı temsil etmesi gereken resme yönlendirir. | Göreli yol kullanmak veya giriş, yönlendirme ya da robots kurallarıyla engellenen resim kullanmak. |
| og:image:width / og:image:height | Platformlara dosyayı almadan ve incelemeden önce resim boyutunu bildirir. | Boyutları belirtmemek ve her tarayıcının önizlemeyi nasıl göstereceğini tahmin etmesine izin vermek. |
| og:image:alt | Önizleme resmini erişilebilirlik için tanımlar ve tarayıcılara daha fazla bağlam sağlar. | Resimde görüneni tanımlamak yerine sayfa başlığını tekrarlamak. |
| og:url | Önizlemeyi paylaşılması gereken kanonik sayfa URL'sine bağlar. | Kalıcı sayfa kimliği olarak izleme, test veya yanlış kültür URL'si kullanmak. |
| twitter:card / twitter:image | X'e açık bir büyük kart talimatı ve isteğe bağlı platforma özel resim verir. | X'in Open Graph resmini her zaman diğer platformlar gibi göstereceğini varsaymak. |
Blazor kullanıyorsanız, Blazor SEO Meta Veri Bileşeni Open Graph etiketleri, Twitter kart etiketleri, kanonik URL'ler ve JSON-LD meta verilerini bir arada tutar.
Tasarım kuralları
Öncelikle küçük bir akış kartı için tasarlayın
Çoğu kişi tam resmi görmez. Akışta, mesajda veya önizleme panelinde sıkıştırılmış kart görürler. Basit düzenler kazanır: net bir konu, okunabilir kontrast ve sadece tasarım dosyasında görünen küçük metin yok.
İş akışı
Her önemli sayfa için basit bir iş akışı
- 1
Önizleme vaadini yazın
Kartın tek bakışta ne söylemesi gerektiğine karar verin: konu, fayda, ürün veya makale açısı.
- 2
Resmi planlanan oranda oluşturun
Varsayılan dosya için 1200 x 630 kullanın ve önemli içeriği ortada tutun.
- 3
Dosyayı optimize et
Sosyal resim için JPG veya PNG kullanın, dosyayı makul boyutta tutun ve görünür sıkıştırma hasarından kaçının.
- 4
Meta verileri ve şemayı ayarla
Open Graph etiketleri, Twitter kart etiketleri, kanonik URL ve JSON-LD resim referanslarını birlikte güncelleyin.
- 5
Kararlı dosya adıyla yayınla
Anlamlı bir dosya adı kullanın ve platform önbellekleri eski sürümü tutacaksa resmi değiştirirken dosya adını değiştirin.
- 6
Son URL'yi test et
Genel sayfa URL'sini hata ayıklama araçlarında çalıştırın ve sadece kaynak kodu değil gerçek önizlemeyi kontrol edin.
Araç ipucu
Önizleme boyutu belirlendikten sonra PixelPress kullanın
Resim planı son dosyaları adlandırdığında, PixelPress yerel WebP veya AVIF dönüşümünde yardımcı olabilir. Orijinalleri değiştirmeden, çıktıyı inceleyin ve ardından Open Graph URL'sini güncelleyin.
Hata ayıklama
Önizlemeye güvenmeden önce platform önbelleklerini yenileyin
Sosyal platformlar önizleme verilerini önbelleğe alır. Bir resmi değiştirip aynı URL'yi korursanız, platform eski önizlemeyi göstermeye devam edebilir. Resmi yenilemek için resmi araçları kullanın ve gerekirse dosya adını değiştirin veya sürümlü URL ekleyin.
Kontrol listesi
Yayınlamadan önce Open Graph resim kontrol listesi
Bir makale, ürün sayfası, araç sayfası veya açılış sayfası yayına girmeden önce bu listeyi kullanın. Bağlantı paylaşıldıktan sonra fark edilmesi zor olan önizleme sorunlarını yakalar.
Sık sorulan sorular
Open Graph resmi hangi boyutta olmalı?
Çoğu Open Graph önizlemesi için pratik varsayılan olarak 1200 x 630 kullanın. Yüksek çözünürlüklü ekranlar için yeterince büyük ve yaygın 1.91:1 önizleme oranına yakındır. Yine de her platform farklı kırpabilir veya önbelleğe alabilir, son URL'yi test edin.
Her sayfa için aynı Open Graph resmini kullanabilir miyim?
Kullanabilirsiniz, ancak genellikle daha zayıftır. Genel bir marka resmi hiç olmamasından iyidir, ancak önemli makaleler, ürün sayfaları ve araçlar sayfaya özel önizleme resmi içermelidir.
Neden eski Open Graph resmim hala görünüyor?
En yaygın neden platform önbelleklemesidir. URL'yi yenilemek için Facebook Paylaşım Hata Ayıklayıcısı, LinkedIn Gönderi Denetleyicisi veya X kart araçlarını kullanın. Eski dosya tekrar görünüyorsa, yeni dosya adı veya sürümlü URL ile yeni resmi yayınlayın.
og:image ile twitter:image arasındaki fark nedir?
og:image birçok platformda kullanılan standart Open Graph resmidir. twitter:image X kartlarına özeldir. twitter:image sağlarsanız, X og:image yerine onu kullanabilir.
JSON-LD resmi Open Graph resmiyle eşleşmeli mi?
Aynı olmak zorunda değil, ancak aynı sayfa hikayesini anlatmalı. Arama meta verileri, Open Graph etiketleri, Twitter kartları ve JSON-LD ilgisiz veya eski resimlere işaret etmemeli.
PixelPress Open Graph resimlerinde nerede yer alır?
PixelPress, resim boyutu, dosya adı ve rolü belirlendikten sonra devreye girer. Orijinalleri değiştirmeden yerel olarak dosyaları dönüştürmeye yardımcı olur. Sayfa yine de doğru meta veri ve önizleme testi gerektirir.