opengraph-image.png

Opengraph Bağlantı Kartları.

Bu kısımda sayfalarızın URL bağlantasındaki ön izleme görselini nasıl oluşturabileceğinizi ve bunun önemini örnekler ile anlatmaya çalıştım.

OpenGraph Hakkında

Sosyal medya platformlarında sayfanızın bağlantısını paylaştığınızda, paylaştığınız platform, meta etiketlerinizi inceleyerek sizin için bir önizleme kartı oluşturur. Bu önizleme kartı genellikle sizin ayarladığınızog:image, title ve description bilgilerini içerir. Bu önizleme kartı, sitenizin sosyal medyada daha iyi görünmesini ve daha fazla tıklama almasını sağlayabilir.

OpenGraph Image, bu önizleme kartında kullanılan görseldir. OpenGraph Image, paylaştığınız sayfayı ifade edebilecek en doğru görsel olmalıdır. Bu görsel, sayfanızın içeriğini ve amacını temsil etmelidir.

OpenGraph Image, dinamik bir şekilde yapılabilir. Örneğin, ürün sattığınız sitenizdeki bir sayfanın içeriğine göre farklı görseller kullanabilirsiniz. Bunu yapmak için Vercel ekibinin hazırladığı OG API paketi tercih edebilirsiniz. Paketi kendiniz incelemek isterseniz tıklayın.

Dikkat Edilmesi Gereken Hususlar

OpenGraph Image'ın boyutları önemlidir. 1200 piksel genişliğinde ve 630piksel uzunluğunda olması önerilir. Bu boyutlar, görselin sosyal medya platformlarında iyi görünmesini sağlar. OpenGraph Image, dosyanız .jpg, .png, gif.formatında olmalıdır.

Default Opengraph Görseli Nasıl Eklenir?

Default OpenGraph görselini projenize eklemek için, projenizin app dosyasının başlangıç dizinine opengraph-image.png adlı bir dosya eklemeniz yeterlidir. Next JS bu görseli özelleştirme yapmadığınız bütün sayfalarınızda otomatik olarak kullanır.

Uyarı: Görselin Yüklenmeme Durumu Hakkında.

Next JS URL üretirken projenizin bulunduğu sunucu adresini kullanır. Bu, önizleme kartlarının düzgün çalışmamasına neden olabilir.

Bu sorunu çözmek için projenizin layout dosyasındaki metadata objesinde bazı eklemeler yapmanız gerekir. Bunun için, metadataBase özelliğini kullanabilirsiniz. metadataBase özelliği, önizleme kartlarında kullanılan tüm URL'lerin temelini oluşturur.

URL'in daha dinamik olabilmesi için .env içerisinde environment URL değerinizi saklayabilirsiniz.

Twitter ( X ) OpenGraph Görsel Çözümü.

Next JS 14 sürümünde, Twitter'da sitenizle ilgili bir gönderi paylaştığınızda, otomatik olarak opengraph görseliniz oluşmayabilir. Bu durumu düzeltmek için, opengraph-image.png görselinizi kopyalayarak adını twitter-image.png olarak değiştirip app klasörünüzün en üst dizinde aynı şekilde listelemeniz sorunu çözmenize yeterli olacaktır.

Manuel Olarak Tanımlama.

Aşağıdaki tanımlamayı kullanarak, manuel olarak özelleştirme yapmak istediğiniz sayfaların kartlarını düzenleyebilirsiniz. Bu tanımlamaları tekrar tekrar doldurmanız gerekmez. Eğer opengraph içerisindeki title değeriniz zaten sayfanızın title değeri ile aynı ise, sayfanızın title değeri kartınızda kullanılacaktır.

Tavsiye Edebileceğim Siteler.

Ücretsiz bir şekilde görsel üretebilmek için faydalanabileceğiniz platform : PlacID

Ücretsiz bir şekilde kartlarınızı test edebileceğiniz platform : Social Share Preview