Jak přidat meta tagy do Nuxt.js

Nuxt.js je výkonný rámec pro vytváření aplikací Vue.js vykreslovaných na straně serveru. Kromě toho, že Nuxt.js poskytuje pevný základ pro vytváření složitých aplikací, usnadňuje přidávání metaznaček na vaše stránky.

Zjistěte, jak zahrnout meta tagy do vaší aplikace Nuxt, abyste zlepšili SEO a viditelnost svého webu na sociálních sítích.

Meta tagy jsou úryvky kódu, které poskytují informace o webové stránce. Tyto značky jsou přítomny ve zdroji HTML, stejně jako obsah vaší stránky, ale nejsou viditelné na stránce samotné.

Meta tagy mohou poskytovat informace, jako je název stránky, popis a klíčová slova. Používají se také k poskytování informací pro sdílení na sociálních sítích a optimalizaci pro vyhledávače.

Než se pustíte do přidávání metaznaček, vytvořte novou aplikaci Nuxt.js. Za to se ujistěte, že máte Node.js nainstalovaný na vašem zařízení. Poté otevřete terminál a spusťte následující příkaz:

npx create-nuxt-app my-app

Tím se vytvoří nová aplikace Nuxt.js v adresáři s názvem moje aplikace. Podle pokynů nakonfigurujte aplikaci podle potřeby.

Jedním ze způsobů, jak přidat metaznačky do aplikace Nuxt.js, je přidat je globálně. Chcete-li to provést, přidejte značku názvu a dvě značky metadat: jednu pro znakovou sadu a jednu pro výřez. Otevřete svůj nuxt.config.js a přidejte vlastnost head do souboru modul.vývoz objekt:

modul.exports = {
 hlava: {
 titul: 'Moje aplikace',
 meta: [
 { znaková sada: 'utf-8' },
 { název: 'výřez', obsah: 'width=device-width, initial-scale=1' }
 ]
 }
}

Přidání meta tagů na jednotlivé stránky

Někdy můžete chtít přidat metaznačky pouze na konkrétní stránky v aplikaci. Chcete-li to provést, můžete do definice komponenty pro stránku přidat vlastnost head: