Skip to content

Instantly share code, notes, and snippets.

@Robert-96
Last active October 24, 2022 19:30
Show Gist options
  • Save Robert-96/e7a57356ab4ec7d1aea50aba04bfde76 to your computer and use it in GitHub Desktop.
Save Robert-96/e7a57356ab4ec7d1aea50aba04bfde76 to your computer and use it in GitHub Desktop.
Add meta tags for social media with HtmlWebpackPlugin

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: '...' }
  }
})
// ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment