WordPress'te Şema İşaretleme Uygulaması İçin Hızlı Kılavuz
Yayınlanan: 2020-05-13Güzel görünüme ve harika işlevlere sahip bir web sitesi başlattınız. Sırada ne var? Organik trafik getirmek için içeriğini arama motorunda sıralamayı SEO dostu yapın. Sindirimi kolay olmasa da anlamanız gereken birçok teknik unsur olduğundan biraz zor bir iş gibi görünebilir. Ancak web sitenizin SEO'su konusunda ciddiyseniz, SEO ile ilgili tüm konulara bütünsel bir bakış açısına sahip olmanız gerekir. Böyle bir konu, Şema İşaretlemesini Uygulamaktır.
Scheme Markup ve yapılandırılmış veriler, yıllardır SEO'da iyi bir role sahip ve Google, Bing, Yahoo, vb. gibi büyük arama motorlarının bunları önerdiği görülüyor. Ancak şema işaretlemesi tam olarak nedir ve sitenizin SEO sürecini nasıl etkiler? Bu makaleyi okuduktan sonra tam olarak ne olduğunu, SEO ve arama motorlarını nasıl etkilediğini, daha iyi sıralamalar elde etmek için nasıl doğru şekilde uygulanacağını öğreneceksiniz.
Yapılandırılmış Veri ve Şema İşaretlemesi Nedir?
Yapılandırılmış veri, evrensel olarak anlaşılabilen bir bilgi formatıdır. Arama motorlarının sayfanın ne hakkında olduğunu kolayca anlamasını sağlayan farklı öğeler içerir.
Schema Markup temelde web sitenizi arama motoruna yerleştiren bir koddur. Temel amacı, arama motorunu kullanıcılar için daha bilgilendirici hale getirmektir.
Tarihler, resimler, çalışma saatleri ve daha pek çok farklı öğeyi tanımlamak için web sayfanıza kod şeklinde eklenebilir.
SEO'da Şema İşaretlemenin Faydaları
SEO söz konusu olduğunda, Schema Markup'ta temsil edilen yapılandırılmış veriler, arama motoru sonuçlarını daha ayrıntılı ve bilgilendirici bir şekilde görüntüler. Web sitesini yalnızca SEO dostu hale getirmekle kalmaz, aynı zamanda web sitesine daha fazla trafik çekmek için zengin sonuçlar görüntüleyebilir.
Arama Motorunda Görüntülenen Farklı Zengin Sonuç Türleri
Daha önce, arama motorunda zengin sonuçlar görüntülemek için Şema İşaretlemenin faydalarını tartışmıştık. Web sitenizde Schema Markup uygulanmışsa, arama motorunda görüntülenecek zengin sonuçlardan bazıları burada.
Zengin snippet'ler
Zengin snippet'ler, arama sonuçlarında görüntülenirken derecelendirmeler, incelemeler, resimler ve çok daha fazlası gibi ek bilgileri içeren sonuçlardır. Kullanıcıların sayfa/gönderi hakkında daha fazla bilgi sahibi olmasına yardımcı olacak ve daha fazla tıklama alma şansı sağlayacaktır.
Zengin Kartlar
Zengin kartlar, sonucu arama motorlarında görüntülemek için yeni biçimdir. Zengin snippet'ler gibi, zengin kartlar da arama sonuçlarını daha ilgi çekici ve görsel olarak çekici bir biçimde görüntülemek için şema işaretlemesini kullanır. Daha iyi bir mobil arama deneyimi sağlamaya odaklanır ve dokunma dostu kaydırma seçenekleriyle birlikte gelir.
Bilgi Grafiği
Bilgi Grafiği, resimleri, konumu, iletişim bilgilerini, açıklamayı, sosyal medya profillerini görüntüleyerek bilgileri daha da ayrıntılı hale getirmek için arama motorlarında kullanılan bir bilgi tabanıdır.
Öne Çıkan Snippet
Öne Çıkan Parçacıklar, kullanıcılara sorularına doğrudan yanıtlar sağlayan arama motoru biçimidir. Zengin snippet'ler gibi ek bilgiler içermezler, ancak belirli sonuçlara tıklamak zorunda kalmadan kullanıcıya kısa ve öz bir yanıt sağlarlar.
Web sayfamda Şema İşaretlemeyi Uygulamaya Nasıl Başlayabilirim?
Schema Markup'ı farklı şekillerde uygulayabilirsiniz. İşte bunlardan bazıları aşağıdadır:
Mikro Verileri Kullanarak Şema Ekle:
Mikro veriler, makine tarafından okunabilen etiketlerle HTML öğelerine açıklama eklemenin basit bir yolunu sağlamak amacıyla HTML5 ile tanıtılan bir etiketler kümesidir. Yeni başlayanlar için işaretlemeyi kullanmak oldukça kolaydır. Ancak dezavantajı, her bir öğeyi web sayfasının gövdesi içinde ayrı ayrı işaretlemeniz gerekmesidir, bu da dağınık olabilir.
Ancak başlamadan önce, web sayfanızın hangi öğe türünü tanımladığını bulmanız gerekecek. Ne tür etiketler kullanmanız gerektiğini belirlemenize yardımcı olacaktır.
Burada, HashThemes adında bir çevrimiçi mağazanız olduğunu ve ana sayfasının şöyle görünebileceğini varsayacağız:
<div> <h1>HashThemes</h1> <h2>En İyi WordPress Tema Satıcısı!</h2> <p>Adres:</p> <p>Dhobighat</p> <p>Lalitpur, Nepal</p> <p>E-posta: [email protected]</p> <p><a href="https://hashthemes.com/wordpress-theme/">En İyi WordPress Temalarımızı Görmek İçin Buraya Tıklayın!</a></p> <p>Açığız: </p> <p>Pzt-Cum 10:00 - 18:00</p> </div>
İlk olarak, web sayfasının bölümlerini tanımlamanız gerekecektir. <div> etiketleri arasındaki her şeydir. Yani, ekliyoruz
<div itemscope>
Öğe kapsam etiketini ekleyerek, belirli öğelere atıfta bulunmak için <div> etiketleri arasında yer alan HTML'yi belirtebiliriz.
Şimdi, sayfanızdaki öğelerin türünü belirtmek için öğe türü özelliğini kullanacağız.
<div itemscope itemtype = "http://schema.org/wordpressthemes">
Şimdi ana sayfaya gidin ve web sayfasının web sitenizin adını taşıyan bölümünü etiketleyin. Burada, öğelerin özelliklerini etiketleyen bir öğe destek etiketi ekleyeceğiz.
<h1 itemprop="name">HashThemes</h1>
Devam edin ve sayfaların geri kalanına da etiketler ekleyin.
Bazen, tüm satırı etiketlemeniz gerekmeyebilir, ancak e-posta adresi satırında olduğu gibi, özelliğin yönlendirildiği satırın bir kısmını etiketlemeniz gerekebilir.
<h2 itemprop="description">En İyi WordPress Tema Satıcısı!</h2> <p>Adres:</p> <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <p itemprop="streetAddress">Dhobighat</p> <p itemprop="addressLocality">Lalitpur, Nepal</p></span> <p>E-posta: <span itemprop="email">[email protected]</span></p> <p><a itemprop="store" href="https://hashthemes.com/wordpress-theme/">En İyi WordPress Temalarımızı Görmek İçin Buraya Tıklayın!</a></p> <p>Açığız:</p> <p itemprop="openingHours">Pzt-Cum 10:00 - 18:00</p> </div>
Web sayfalarınızı etiketlemeyi kolaylaştırmak için Google Yapılandırılmış Veri İşaretleme Yardımcısı'nı da kullanabilirsiniz.
RDFa Kullanarak İşaretleme Ekleme
Özniteliklerdeki Kaynak Açıklama Çerçevesi (RDFa), yapılandırılmış verileri işaretlemenize yardımcı olmak için tasarlanmış bir HTML5 uzantısıdır. Bu bir W3C önerisidir ve Schema.org'un ötesine geçen yapılandırılmış veriler eklemek için birden çok yapılandırılmış veri sözlüklerini birleştirmek için kullanılabilir.
Schema.org ile Mikro veri işaretlemesini nasıl kullanacağınızı biliyorsanız, RDFa farklı olmayacaktır. Mevcut HTML'yi içeriğin gövdesine entegre eder.
Örnek olarak yukarıdaki e-ticaret sitesini kullanalım:
<div> <h1>HashThemes</h1> <h2>En İyi WordPress Tema Satıcısı!</h2> <p>Adres:</p> <p>Dhobighat</p> <p>Lalitpur, Nepal</p> <p>E-posta: [email protected]</p> <p><a href="https://hashthemes.com/wordpress-theme/">En İyi WordPress Temalarımızı Görmek İçin Buraya Tıklayın!</a></p> <p>Açığız: </p> <p>Pzt-Cum 10:00 - 18:00</p> </div>
Burada, http://schema.org/ URL'si ile birlikte etiket kelime hazinesini belirteceğiz. Sayfa türü, etiket türüne göre tanımlanır.
<div vocab="http://schema.org/" typeof="store">
Artık arama motorlarına sayfanın ne hakkında olduğunu anlattık. Şimdi, özellik niteliklerini kullanarak özellikleri tanımlamanın zamanı geldi.
<h1 property="name">HashThemes</h1>
Öznitelik türü, PostalAddress'i tanımlamak gibi özelliği tanımlamak için de kullanılabilir.
<div property="address" typeof="PostalAddress">
Nitelik türü, Mikro verilerdeki öğe türüne eşdeğerken, özellik, öğe destek niteliğine eşdeğerdir.
<h2 property="description">En İyi WordPress Tema Satıcısı!</h2> <p>Adres:</p> <div property="address" typeof="PostalAddress"> <p property="streetAddress">Dhobighat</p> <p property="addressLocality">Lalitpur, Nepal</p> </div> <p>E-posta: <span property="email">[email protected]</span></p> <p><a property="store" href="https://hashthemes.com/wordpress-theme/">En İyi WordPress Temalarımızı Görmek İçin Buraya Tıklayın!</a></p> <p>Açığız:</p> <p property="openingHours">Pzt-Cum 10:00 - 18:00</p> </div>
JSON-LD Kullanarak İşaretleme Web Sayfası
Bağlantılı Veriler için JavaScript Nesne Gösterimi (JSON-LD), bağlantılı verilerin JSON kullanılarak kodlanmasıdır. Bu bir W3C tavsiyesidir ve 2013 yılında Schema.org için önerilen format olarak eklenmiştir.
Şema İşaretleme için JSON-LD kullanmanın ana avantajı, en alakalı kodları sayfa başlığıyla sınırlaması ve fazladan etiketi içeriğinizin ana gövdesinin dışında tutmasıdır. Bu, kodları daha temiz ve okunması kolay hale getirir.
JSON – LD gösterimi, bir komut dosyası bloğunun içinde bulunur. Bu nedenle, işleme başlamak için, JSON-LD biçimini kullandığımızı göstermek için komut dosyası satırını giriyoruz:
<script type="application/ld+json">
JSON-LD kodu ayrıca küme parantezleri (kıvrımlı parantezler) içinde yer almalıdır, aksi takdirde sayfaya uygulanmaz veya arama motorları tarafından ayrıştırılmaz. Bu, Javascript'te nesne yapısı olarak bilinir. Yani, kodun ana hatları şöyle görünecek:
<script type="application/ld+json"> kod buraya gelecek </script>
Şimdi, sözlük tarafından tanımlanan bağlamı Schema.org'a bağlı verilere kullanmanız gerekecek.
Ayrıca kodun her satırı için bir virgül gelmelidir.
"@bağlam": "http://schema.org",
Diğer schema.org formatı türleri için, işaretleyeceğiniz içerik türünü tanımlamanız gerekecektir. Bu, Microdata'nın görüntü tipi özniteliğine ve RDFa öznitelik tipine eşdeğerdir.
Örnek olarak yukarıda bahsettiğimiz basit web sitesini kullanacağız:
"@type": "Mağaza",
Şimdi mağazanın adını ve açıklamasını tanımlıyoruz. Bu öğeleri tanımlamak için Mikro Veri veya RDFa kullanıyorsanız, bunlar web sitesinin ana sayfasında sunulmalıdır. Ancak JSON-LD durumunda, sayfada bulunmasına gerek kalmadan öğeleri tanımlayabilirsiniz.
"name": "HashThemes", "description": "En İyi WordPress Tema Satıcısı!",
Şimdi adresi tanımlama zamanı. Bir adres, sokak adresi ve yer gibi ek ancak daha kesin bir özelliğe sahip olacaktır. Bu yüzden onları bir küme parantezine koyacağız.
"adres": {
"@type": "PostaAdresi",
"addressLocality": "Lalitpur, Nepal",
"streetAddress": "Dhobighat",
},Şimdi, mağazanın açılış saatlerini yerleştireceğiz. Açılış saatini dizide tutacağız ve günleri iki harfli kombinasyonlarda belirteceğiz. Ayrıca saat 24 saatlik olmalıdır.
"açılış saatleri": [ "Pt-Cum 10:00-18:00" ],
Son olarak, bir e-posta adresi ve tema URL'sini ekleyeceğiz. Her ikisi de oldukça basittir.
"email": "[email protected]" "mağaza": "https://hashthemes.com/wordpress-theme/" Ve sonunda işaretlememiz şöyle görünecek: <script type="application/ld+json"> { "@bağlam": "http://schema.org", "@type": "Mağaza", "name": "HashThemes", "description": "En İyi WordPress Tema Satıcısı!", "adres": { "@type": "PostaAdresi", "addressLocality": "Lalitpur, Nepal", "streetAddress": "Dhobighat", }, "açılış saatleri": [ "Pt-Cum 10:00-18:00" ], "email": "[email protected]" "mağaza": "https://hashthemes.com/wordpress-theme/" } </script>
Söz diziminde hatalar olup olmadığını kontrol etmek için Google'ın Yapılandırılmış Veri Test Aracını kullanabilirsiniz.
WordPress web sitenize Şema İşaretlemeleri Nasıl Uygulanır?
Şema İşaretlemenin uygulanması farklı şekillerde yapılabilir. Web sitenizi SEO dostu hale getirmek ve içeriğinizin arama motorundaki sıralamasını iyileştirmek için bunları takip edebilirsiniz. Bunlardan bazıları:
Şema İşaretleme ile Dahili Entegrasyonlu Bir WordPress Teması Seçme:
Bildiğiniz gibi WordPress, kısa sürede çekici web siteleri oluşturmak için çok sayıda şablondan oluşan en popüler platformdur. Ancak, Şema İşaretleme kodlarıyla entegre edilmiş yalnızca birkaç sayıda tema vardır. Bu nedenle, web varlığınızı başlatmak veya mevcut web sitenizi yenilemek için bir WordPress teması seçiyorsanız, temanın en azından ortak şema özellikleri içerip içermediğini kontrol ettiğinizden emin olun. Ortak şema, arama motorlarının web sitenizin yapısını anlamasını sağlamak için üstbilgi, altbilgi ve gezinme seçeneklerini içerir.
WordPress Eklentileri ile Diğer Şema Verilerini İşaretleme
Yukarıda bahsedildiği gibi, Schema MarkUp kodlarıyla tam entegrasyona sahip bir WordPress teması bulmakta zorlanabilirsiniz. Alternatif olarak, web sitenize Şema özelliğini eklemek için mevcut WordPress eklentilerini seçebilirsiniz. Yoast SEO ve Schema Pro, Schema MarkUp'ı web sitenize uygulamanıza yardımcı olacak birkaç eklentidir.
Şema İşaretlemelerini uygularken hatırlanması gerekenler
Artık WordPress web sitenize Şema İşaretlemeyi nasıl uygulayabileceğinizi bildiğinize göre, Şema İşaretlemeyi uygularken hatırlamak isteyebileceğiniz birkaç şey var:
Şema İşaretlemeyi Entegre Etmek İyi Sıralamayı Garanti Etmeyebilir
Şema İşaretleme tek başına web içeriğinizin iyi bir sıralamasını garanti etmez. Sıralamayı etkileyen içerik otoritesi, içerik kalitesi, anahtar kelime analizi, alaka düzeyi vb. gibi başka birçok faktör vardır. Bu nedenle, Schema Markup'ın içeriğinizin sıralamasını yükseltmenize yardımcı olabilecek faktörlerden yalnızca biri olduğunu unutmayın.
Şema İşaretlemenin Etkili Olması Zaman Alır
Schema Markup'ın hemen yürürlüğe gireceğini merak ediyorsanız, yanılıyorsunuz. Zengin snippet'in arama sonuçlarında görülmesi aylar alacaktır.
WordPress Teması Tarafından Verilen Şema İşaretini Kontrol Edin ve İşlevselliği Buna Göre Geliştirmek için Eklentiyi Kullanın
WordPress temasının çoğu, yalnızca üstbilgi ve altbilgi, gezinme gibi ortak Şema alır. Diğer Şema ile ilgili uygulama özelliklerine sahip bazı şablonlar olabilir. Web sitenizin şema uygulamasını analiz etmek ve buna göre eklentiyi seçmek için Google Yapılandırılmış Veri Test Aracı'na gidebilirsiniz.