SEO Twitter and Open Graph

In this example:

components/SocialHead uses the head property to show meta for both Twitter and Open Graph social sharing using props.

pages/mountains/slug.vue uses the SocialHead component passing the mountain's title, description and image as the values for props. It also uses the head tag to set the canonical link.

nuxtconfig.js shows the head tag with default meta for social sharing for when the the SocialHead component is not used as well as the canonical link.

Learn more about the options available for head, in the vue-meta documentation.

Learn more about meta tags in the Features book in the Meta Tags and SEO chapter.

Loading CodeSandbox...
   

Kontributor