Pokud jste se rozhodli vytvořit nejen obyčejnou webovou aplikaci, ale chcete zároveň zajistit, aby byl obsah vašich stránek stravitelný pro vyhledávací roboty. Strukturovaným JSON+LD datům se nevyhnete. Pro zajištění snadné indexace a zobrazení ústřižků z vaší stránky v rámci vyhledávání doporučuji použít Google JSON+LD.

Většina webových stránek používá schema.org, nicméně pro Google Search je lepší spoléhat se na dokumentaci od Google než na Schema.org.

Webové stránky ve Wordpressu většinou obsahují nějaké základní SEO optimalizace, proto o nich většina blogerů ani neví a přesto jsou v rámci vyhledávání hodnoceni dobře. Proto je také důležité, abychom do vlastních webů tyto prvky také zahrnuly a roboti vyhledávacích serverů se na naše weby nedíval skrz prsty.

Server-side strukturovaná data v Nuxt.js

Nuxt.js je framework, jež umožňuje tvorbu webů ve Vue.js s již předpřipraveným renderováním webu na serveru, rozdělování kódu a generováním statických stránek. Zároveň obsahuje celou řadu užitečných knihoven či umožňuje jejich následné nainstalování. Jedním z takových rozšíření je vue-meta, které umožňuje editaci hlavičky stránky přímo z komponent a právě toho využijeme pro přidání strukturovaných dat do hlavičky stránky.

1export default {
2  data () {
3    return {
4      structuredData: {
5        "@context": "http://schema.org",
6        "@type": "Article",
7        // Zbytek strukturovaných dat, pro možnosti se podívejte na odkaz výše
8        // nebo Google Docs...
9      }
10    }
11  },
12  head () {
13    return {
14      script: [{ innerHTML: JSON.stringify(this.structuredData), type: 'application/ld+json' }]
15    }
16  },
17  async asyncData (context) {
18    // Načtení dat a vrácení článku na serveru.
19  }
20}

Vysvětlení ukázky kódu

Uvnitř funkce data() si předformátujeme hodnoty, které mají být následně zobrazeny ve strukturovaném data bloku. Pokud potřebujete data načítat data dynamicky, měl by být blok se strukturovanými daty obsažen již ve funkci asyncData(). Jak jsem již zmiňoval Nuxt.js umožňuje ve funkci head() upravit podobu hlavičky stránky a právě sem vložíme skritp se strukturovanými daty. Nuxt následně vygeneruje <script> tag, který bude obsahovat strukturovaná data a typ application/ld+json, nezapomeňte proto vždy nastavit i vlastnost type.

Závěr

Díky tomuto drobnému ústřižku kódu zajístíte, že vaše Nuxt.js aplikace bude pro Google Search stravitelná a Google bude schopný zobrazit krom klasického vyhledávání také speciální ústřižky.