SEO Twitter and Open Graph

In this example we create a component to add our Twitter and Open Graph tags for when sharing on social media.

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.