Web Bileşenleri ve JSON-LD ile semantik siteler oluşturma

Web bileşenlerinin ve Polymer gibi destekleyici kitaplıkların giderek daha popüler hale gelmesiyle özel öğeler, kullanıcı arayüzü özellikleri oluşturmanın cazip bir yolu haline geldi. Özel öğelerin varsayılan kapsüllenmesi, bunları özellikle bağımsız widget'lar oluşturmak için kullanışlı hale getirir.

Widget'ların bazıları bağımsız olsa da birçoğu, içeriği kullanıcıya sunmak için harici verilerden yararlanır (ör. bir hava durumu widget'ı için güncel hava durumu tahmini veya bir harita widget'ı için şirketin adresi).

Polymer'de özel öğeler bildirim temellidir.Diğer bir deyişle, bir projeye aktarıldıktan sonra bunları HTML'de eklemek ve yapılandırmak çok kolaydır. Örneğin, bir özellik aracılığıyla widget'ı doldurmak için verileri aktarabilirsiniz.

Arama motorlarına ve diğer tüketicileri sayfamızın içeriği hakkında bilgilendirmenin yanı sıra, farklı widget'ları doldurmak için aynı veri snippet'lerini tekrar kullanarak tekrarlardan kaçınıp veri tutarlılığını sağlayabilsek harika olurdu. Bunu, verilerimiz için schema.org standardını ve JSON-LD biçimini kullanarak yapabiliriz.

Bileşenleri yapılandırılmış verilerle doldurma

JSON, belirli bir widget'a veri eklemenin genellikle kolay bir yoludur. JSON-LD için artan destek sayesinde, aynı veri yapılarını kullanıcı arayüzünün yanı sıra arama motorlarını ve diğer yapılandırılmış verileri tüketicileri sayfa içeriğinin tam anlamı hakkında bilgilendirmek için de yeniden kullanabiliyoruz.

Web bileşenlerini JSON-LD ile birleştirerek bir uygulama için iyi tanımlanmış bir mimari oluştururuz:

• schema.org ve JSON-LD veri katmanını temsil eder. schema.org veriler için sözlüğü sağlarken verilerin biçimini ve aktarımını oluşturan JSON-LD;
• özel öğeler; yapılandırılabilir ve verilerden ayrı olarak ayrılmış sunum katmanını temsil eder.

Örnek

Aşağıdaki örneği inceleyelim, birkaç Google Office konumunu listeleyen bir sayfa: https://github.com/googlearchive/structured-data-web-components/tree/master/demo

İki widget içerir: Her ofis için bir raptiye içeren harita ve konumların listesini içeren bir açılır menü. Her iki widget'ın da kullanıcıya aynı verileri sunması ve sayfanın arama motorları tarafından okunabilmesi önemlidir.

Bu demoda, bazı Google Ofislerinin coğrafi konumu olan verimizin anlamını ifade etmek için LocalBusiness varlıklarını kullanıyoruz.

Google'ın bu sayfayı nasıl okuduğunu ve dizine eklediğini kontrol etmenin en iyi yolu, yeni geliştirilmiş Yapılandırılmış Veri Test Aracı'nı kullanmaktır. Demonun URL'sini Getir URL bölümüne gönderip Getir ve doğrula'yı tıklayın. Sağdaki bölümde, sayfadan alınan ayrıştırılan veriler ve oluşabilecek hatalarla birlikte gösterilir. JSON-LD işaretlemenizin doğru ve Google tarafından işlenebilir olup olmadığını kontrol etmenin çok kolay bir yoludur.

Web Yöneticisi Merkezi blog yayınında, araç ve aracın sunduğu iyileştirmeler hakkında daha fazla bilgi edinebilirsiniz.

Bileşenleri yapılandırılmış veri kaynağına bağlama

Demo ve derleme için kullanılan web bileşenleri kodu GitHub'da yer alır. combined-demo.html sayfasının kaynak koduna göz atalım.

İlk adım olarak, verileri bir JSON-LD komut dosyası kullanarak sayfaya yerleştiriyoruz:

<script type="application/ld+json">
{...}
</script>

Bu şekilde, schema.org standardını ve JSON-LD biçimini destekleyen diğer tüketicilerin (ör. arama motorları) verilere kolayca erişebilmesini sağlarız.

İkinci adım olarak, verileri görüntülemek için iki web bileşeni kullanırız:

• address-dropdown-jsonld - Bu öğe, "jsonld" özelliğinde geçirilen tüm konumları içeren bir açılır liste oluşturur.
• google-map-jsonld - Bu öğe, "jsonld" özelliğinde iletilen her konum için bir raptiye içeren bir Google haritası oluşturur.

Bu işlem için, HTML içe aktarma işlemlerini kullanarak bunları sayfamıza aktarırız.

<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">

İçe aktarıldıktan sonra bunları sayfamızda kullanabiliriz:

<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>

Son olarak, JSON-LD verilerini ve öğeleri bir araya getiririz. Bunu polimer için hazır bir geri çağırmada yaparız (bu, bileşenler kullanıma hazır olduğunda tetiklenen bir etkinliktir). Öğeler özellikler aracılığıyla yapılandırılabildiğinden, JSON-LD verilerimizi bileşenin uygun özelliğine atamak yeterlidir:

document.addEventListener('polymer-ready', function() {
    var jsonld = JSON.parse(
        document.querySelector(
            'script[type="application/ld+json"]').innerText);
    document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
    document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
    });

JSON-LD, JSON'ın güçlü kardeşi

Muhtemelen fark etmiş olduğunuz gibi bu yöntem, verileri aktarmak için düz ve eski JSON kullanmaya çok benzer bir şekilde çalışmaktadır. Yine de JSON-LD'nin birkaç avantajı vardır ve bunlar doğrudan schema.org uyumluluğundan türetilir:

• Veriler, schema.org standardı kullanılarak açık bir şekilde yapılandırılır. JSON-LD'nin etkinleştirildiği herhangi bir web bileşenine anlamlı ve tutarlı bir giriş sağlamanıza olanak tanıdığından, benzersiz bir avantajdır.
• Veriler, arama motorları tarafından verimli bir şekilde tüketilebilir. Bu da sayfanın dizine eklenmesini iyileştirir ve arama sonuçlarında zengin snippet'lerin gösterilmesine yol açabilir.
• Web bileşenlerini bu şekilde yazıyorsanız, bileşenlerin beklediği veriler için yeni bir yapı (ve dokümanlar) öğrenmenize veya tasarlamanıza gerek yoktur. Schema.org, tüm ağır işleri ve fikir birliği oluşturmayı sizin için zaten yapıyor. Ayrıca, uyumlu bileşenlerden oluşan eksiksiz bir ekosistem oluşturmayı da kolaylaştırır.

Özetlemek gerekirse JSON-LD ve schema.org web bileşenleri teknolojisiyle birlikte, geliştirici ve arama motoru dostu olan, yeniden kullanılabilir, kapsüllenmiş kullanıcı arayüzü parçaları oluşturmayı sağlar.

Kendi bileşenlerinizi oluşturma

GitHub'daki örnekleri deneyebilir veya kendi öğenizi yazmaya başlamak için Polymer'in yeniden kullanılabilir bileşenler oluşturma kılavuzunu okuyabilirsiniz. JSON-LD ile işaretleyebileceğiniz çeşitli varlıklar hakkında ilham almak için developers.google.com adresindeki Yapılandırılmış Veri dokümanlarına bakın.

Oluşturduğunuz özel öğeleri sergilemek için bizi @polymer'de tanıtabilirsiniz.