Seo is a major pillar in web development and every production project have to be optimized for seo.
We'll need to install 1 package that will assist us on seo, Will make our site stand out while sharing the link on social networks, Her's a preview.
You can add: image, title, descreption and theme color.
Let's start with installing nuxt-social-meta
npm i nuxt-social-meta
or
yarn add nuxt-social-meta
Let's add meta tags on nuxt-config.js
head: {
htmlAttrs: {
// Add the default language of the website
lang: 'en',
},
title: 'My website title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
// Add a descreption for the website
{
hid: 'description',
name: 'description',
content: 'Descreption...',
},
],
link: [
// Add the author
{
name: 'author',
content: 'John Doe',
},
// Keywords related to the website
{
name: 'keywords',
content: 'the best website ever',
},
// Favicon
{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
],
},
Now let's add the module responsible for social networks url sharing.
modules: [
[
'nuxt-social-meta',
{
title: 'website-title',
description: 'website-descreption',
url: 'https://website.com',
img: '/bg.png',
locale: 'en',
themeColor: '#000',
},
],
],
If you want to add custom meta tags for a page then do the following
<script>
export default {
head() {
return {
title: 'my website',
meta: [
{
hid: 'description',
name: 'description',
content: 'a website descreption',
},
],
}
},
}
</script>
You're nuxt app is seo ready !
Top comments (0)