Web teknolojileri geliştikçe web programcıları gün geçtikçe yeni teknolojileri kullanmak zorunda kalmaktadırlar Open Graph ‘shema.org’ gibi şema belirleme teknolojisidir makalenin devamında daha detaylı bilgi alabilirsiniz.
Open Graph ile sosyal paylaşım sitelerinde paylaşılacak içeriklerinizi belirleme
Sosyal paylaşım sitesinde sayfanız paylaşıldığında paylaşılacak ve sosyal paylaşım sitesi kullanıcılarına gözükecek içerikleri bu şemalar yardımıyla belirleyebilirsiniz normalde schema olmayan bir siteden direk paylaşım yapıldığında başlık, içerik veya resim çok alakasız içerikler paylaşılabilir bunların önüne geçmek için Open Graph teknolojisini şiddetle tavsiye edebilirim.
Open Graph şemasını head etiketleri arasına meta etiketleri yardımıyla ekleyebilirsiniz şimdi örneklerimize geçelim.
Kullanılabilecek bazı Ope Graph metaları şu şekildedir.
Temel Şemaları
| Open Graph Şeması | Açıklama |
|---|---|
| og:title | Paylaşılacak içeriğinizin başlığını belirlemelisiniz. |
| og:type | Paylaşılacak içeriğiniz ne tür bir içeriğe sahip olduğunu belirleyebilirsiniz örnek “video.movie” ile paylaşılan içeriğin bir film içeriği olduğunu belirtebilirsiniz. |
| og:image | Paylaşılan içeriğe ait bir görsel url’i belirtmelisiniz Görsel url’inin yolu tam olarak belirtilmeli örnek http://www.muratoner.net/ornek.jpg. |
| og:url | Paylaşılan içeriğin tam url’ini belirtmelisiniz örnek http://www.muratoner.net. |
Temel Open Graph Şemalarının şimdide bir sayfa içerisinde nasıl kullanıldığını örnekli olarak açıklayalım.
HTML Kodu
1 2 3 4 5 6 7 8 9 10 11 | <html prefix="og: http://ogp.me/ns#"> <head> <title>Open Graph</title> <meta property="og:title" content="Murat ÖNER - Kişisel Web Sayfası" /> <meta property="og:type" content="video.article" /> <meta property="og:url" content="http://www.muratoner.net" /> <meta property="og:image" content="http://www.muratoner.net/ornek.jpg" /> ... </head> ... </html>; |
Üstteki kodda dikkatini çekmiş olabilecek ve çekmesi gereken bir durum var html etiketinde prefix adında bir attribute var Open Graph şemasını kullandığınız sayfalara eklemelisiniz prefix attribute’ünü ve içeriğini.
İsteğe Bağlı Kullanılabilecek Şemalar
| Open Graph Şeması | Açıklama |
|---|---|
| og:audio | Ses dosyasının tam url’i |
| og:decription | Açıklama. |
| og:locale | Sayfada kullanılan dil, varsayılanı en_US’dur. |
| og:locale:alternate | Sayfanızda kullanılan alternatif diğer diller istenilen sayıda ekleme yapılabilir. |
| og:site_name | Site adı |
| og:video | Video dosyasının tam url’i |
Üstteki tabloyu örneklerle açıklamaya çalışalım
HTML Kodu
1 2 3 4 5 6 7 | <meta property="og:audio" content="http://muratoner.net/theme.mp3" /> <meta property="og:description" content="Sayfa açıklaması." /> <meta property="og:locale" content="tr_TR" /> <meta property="og:locale:alternate" content="fr_FR" /> <meta property="og:locale:alternate" content="es_ES" /> <meta property="og:site_name" content="Murat ÖNER" /> <meta property="og:video" content="http://muratoner.net/fragman.swf" /> |
Daha detaylı bilgi için: http://ogp.me/
Dinamik bir websitem var. Her makale için ayrı resim ataması yapmak istiyorum. Bunu nasıl sağlayabilirim. Geri dönüş yaparsanız sevinirim?
Dinamik olarak oluşturulan makale sayfasında alttaki meta etiketine ilgili makaleye ait görsel adresini site adresi ilgili birlikte(http://www.muratoner.net) oluşturursanız sosyal medyada paylaşma yapıldığında bu etiketteki adres dikkate alınacaktır.
ilgili meta etiketi