DEV Community

loading...
Cover image for Add meta tags for social media with HtmlWebpackPlugin

Add meta tags for social media with HtmlWebpackPlugin

robert96 profile image Dezmerean Robert ・1 min read

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: '...' }
  }
})
// ...

Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide