Bir WordPress Web Sitesine Açık Grafik Etiketlerinin Anlaşılması ve Nasıl Yükleneceği
Bir Web Sitesine Açık Grafik Etiketlerinin Anlaşılması ve Nasıl Yükleneceği. Open Graph, bir web sitesi sayfasını tanımak için HTML kodunu ve işlevlerini kullanan özel bir etiket yöntemidir. Bu etiketler tarayıcılar ve arama motorları tarafından otomatik olarak bir web sayfasının ana açıklaması olarak tanınacaktır.
Gerçek pazarlamacılar ve blogcular her zaman ilgi çekici, yüksek kaliteli içerik yaratırlar. Amaç içeriğin çok sayıda kişi tarafından okunmasıdır. Peki içeriğin birçok kişiye ulaşmasını nasıl sağlarsınız? İçeriği sosyal medyada paylaşmanız yeterli! Evet, kesinlikle öyle. Çünkü aslında Facebook, Twitter ve diğer sosyal medyalar içeriğinizi paylaşmak için en iyi platformlardır. Ancak bir kez daha, kitle erişiminizin daha büyük olması için paylaşım potansiyelini nasıl optimize edeceğinizi biliyor musunuz? Değilse Open Graph adlı aracı tanımaya çalışalım.
Açık Grafik neden oluşturuldu?
Facebook, 2010 yılında Açık Grafik Etiketleri’ni tanıttı. Aslında bu araç, Facebook’un Facebook ile dışarıdaki diğer siteler arasındaki entegrasyonu artırmak için yaptığı bir bencillikten başka bir şey değil. Bu araç ile Facebook sayfaları üzerinden paylaşılan tüm site URL’lerinin otomatik olarak uygun ve düzgün grafik, resim ve başlıklara sahip olması mümkündür.
Bu özellik, blog yazarlarının geçmişte yaşadığı, yani içeriklerini Facebook’ta paylaştıklarında bir şeylerin ters gitmesi sorununun üstesinden gelmek için oluşturuldu. Bu düzensizlikler arasında görselin başlıkla eşleşmemesi, Facebook’ta görüntülenen açıklamanın eşleşmemesi ve hatta web sitelerinin önizlemesinin Facebook’ta hiç görünmemesi yer alıyor!
O zamandan beri Facebook, Açık Grafik Etiketleri ile Web Sitesi ve Facebook Entegrasyonu için bir standart yayınladı.
Basitçe söylemek gerekirse, web sitenize özel bir kod verilecek ve bu kod, içerik referansı olarak kullanılmak üzere Facebook, Whatsapp, Twitter ve benzerleri tarafından anında tanınacaktır. Kod içerisinde küçük resim, içerik başlığı, içerik açıklaması vb. yer almaktadır.
Bu özel Açık Grafik kodu genellikle web sitenizde HTML veya PHP etiketinin hemen altına yerleştirilir.
Ancak artık Facebook dışındaki sosyal medya sitelerinin de web sitesi bilgilerini almak için Açık Grafik Etiketlerini kullanmaya başladığı ortaya çıktı. GOOGLE bile artık verileri almak için Açık Grafiği kullanıyor! Diğer tüm büyük platformlar, Twitter, LinkedIn ve Google, Açık Grafik Etiketlerini bir web sitesini tanımak için ana seçenek haline getirdi.
Twitter’ın aslında Twitter için kendi meta etiketleri var. Ancak Twitter robotu web sitenizde Twitter etiketini bulamadığında bunun yerine otomatik olarak Grafiği Aç etiketini kullanacaktır.
Bir Web Sitesinde Açık Grafik Nasıl Kullanılır?
WordPress Web Sitesine Açık Grafik Etiketleri Nasıl Kurulur? : WordPress kullanıcıları için iyi haber, çünkü artık her içeriğe özel Açık Grafik Etiketleri kodu eklemenize gerek yok. YOAST SEO adlı ücretsiz eklentiyi kullanarak, tüm özelliklere sahip olacak ve her sayfada ve içerikte AÇIK GRAFİK üzerinde kontrol sahibi olacaksınız! WordPress için Yoast SEO’yu şimdi indirin!
Bu arada diğer CMS’ler için Blogger, Joomla vb. Yoast SEO’ya benzer eklentiler sağlayanlar olduğuna eminim. Bu nedenle, özel Açık Grafiği kodunu manuel olarak ekleme konusunda üşenenler için lütfen eklentiyi bulmak üzere gezinmek üzere tarayıcınızı kullanın!
Şunlar da Hoşunuza Gidebilir
Veya manuel olarak eklemek istiyorsanız lütfen Dosya’yı arayın. başlık.html (blog yazarı) veya başlık.php (wordpress) ve aşağıdaki kodu yapıştırın:
HTML Blogcusu:
<!-- Open Graph Meta Tags BEGIN --> <meta expr:content="data:blog.pageName" property='og:title'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content="data:blog.postImageThumbnailUrl" property='og:image'/> </b:if> <meta expr:content="data:blog.title" property='og:title'/> <meta expr:content="data:blog.canonicalUrl" property='og:url'/> <b:if cond='data:blog.metaDescription'> <meta expr:content="data:blog.metaDescription" property='og:description'/> </b:if> <!-- Open Graph Meta Tags END -->
WordPress PHP’si:
<meta property="og:locale" content="id_ID" /> <meta property="og:type" content="" /> <meta property="og:title" content="" /> <meta property="og:description" content="" /> <meta property="og:url" content="" /> <meta property="og:site_name" content="" /> <meta property="og:image" content="" /> <meta property="og:image:width" content="" /> <meta property="og:image:height" content="" />
En Eksiksiz Açık Grafik Fonksiyonlarının Tümü!
Kod 1: başlık
Maksimum 65 karakter
<title>your keyword rich title of the website and/or webpage</title>
Kod 2: açıklama
Maksimum yalnızca 155 karakter
<meta name="description" content="description of your website/webpage, make sure you use keywords!">
Kod 3: og:başlık
Maksimum 35 karakter
<meta property="og:title" content="short title of your website/webpage" />
Kod 4: og:url
Bu bölümü, bağlantıyı özelleştirmek istediğiniz Sayfanın veya içeriğin URL’siyle doldurun
<meta property="og:url" content="https://www.example.com/webpage/" />
Kod 5: og:açıklama
Maksimum 65 karakter
<meta property="og:description" content="description of your website/webpage">
Kod 6: og:resim
Resim (JPG veya PNG) boyutu şu şekilde olmalıdır: 300 KB’tan az ve minimum boyutlar 300 x 200 piksel
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">
Kod 7: og:tür
Paylaşılan içeriğin türüne uyum sağlayın, eğer “yazılıyorsa” makaleyi doldurmanız yeterli. Ayrıca video, ses, web sitesi, blog, kitap, oyun, film, yemek, şehir, ülke, şirket, otel, restoran da olabilir.
<meta property="og:type" content="article" />
Kod 8: og:yerel ayar
Bu yalnızca web sitenizde birden fazla dil varsa doldurulur
Ancak siz yazmasanız bile yazılan dil otomatik olarak En US olacaktır.
<meta property="og:locale" content="en_GB" /> <meta property="og:locale:alternate" content="fr_FR" /> <meta property="og:locale:alternate" content="es_ES" />
Kod 9: Twitter
Twitter meta tag kodu hakkında bilgi almak için Twitter’dan gelen açıklamayı takip etmeniz yeterli.
Bir Web Sitesindeki Açık Grafik Etiketleri Nasıl Kontrol Edilir?
Facebook, web sitemizdeki Açık Grafik Etiketlerinin doğru olup olmadığını kontrol etmek için basit bir araç oluşturdu. Grafik Nesnesi Hata Ayıklayıcısını Aç. Tek yapmanız gereken Sayfa veya Web Sitesi URL’sini kopyalayıp yapıştırmak ve ardından Kazı’ya basmaktır! Ayrıca herhangi bir değişiklik olup olmadığını görmek için Tekrar Kazıyabilirsiniz
