Add meta tags for social media with HtmlWebpackPlugin

Social media meta tags are <meta> tags in the <head> of your web page that control how URLs
are displayed when shared on social media.

If you are using webpack you can use the meta option from the HtmlWebpackPlugin to add the
social meta meta tags to your web page:

// webpack.config.js

// ... 
new HtmlWebpackPlugin({
  meta: {
    'description': { name: 'description', contnet: '...' },
    'keyword': { name: 'keywords', content: '...' },
    'og:title': { property: 'og:title', content: '...' },
    'og:description': { property: 'og:description', content: '...' },
    'og:type': { property: 'og:type', content: 'website' },
    'og:url': { property: 'og:url', content: '...' },
    'og:image': { property: 'og:image', content: '...' },
    'twitter:card': { name: 'twitter:card', content: 'summary_large_image' },
    'twitter:title': { name: 'twitter:title', content: '...' },
    'twitter:description': { name: 'twitter:description', content: '...' },
    'twitter:image': { name: 'twitter:image', content: '...' }
  }
})
// ...

Blog

Add meta tags for social media with HtmlWebpackPlugin

Dezmerean Robert

Join Our Newsletter. No Spam, Only the good stuff.

Related