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.

Ember.js: Build a Markdown component with ShowdownJs

With the help of ShowdownJs and HighlightJs you can build an Markdown component with syntax highlighting.

ShowdownJs is an easy to use Markdown to HTML converter, it can be used in both client side (browser) or server side (with nodejs).

HighlightJs is an JavaScript library for syntax highlighting on the web. It supports 189 languages and 94 styles.

Let’s build component for rendering markdown with ShowdownJs and HighlightJs.