Published on

Meta Tags With HtmlWebpackPlugin

Add meta tags for social media with `HtmlWebpackPlugin`.

This article explains how to add social media tags to your webpack project.

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

See also

Get Url Parameters With Javascript

URL Parameters (also known as Query Parameters or Query String) are a set o key-value pairs attached to the end of a URL. They are used to send small amounts of data from page to page, or from client to server via the URL.