Gatsby Central
Posts
Snippets

Meta Tags in Gatsby

2 min read

You want to set social meta tags. Or you want to set a page <title> tag. How does Helmet work?

tl;dr - Use<Helmet> just like <head> in both the layout and every page component.

What are meta tags?

Meta tags are special tags in HTML. They are not displayed on the page. They tell search engines and social media sites about the page.

The most common is the page title. The aptly named <title> tag! Then there are description tags. Self explanatory, a description of the page.

Social meta tags

Social meta tags are specifically for social media sites. These tags are read by sites like Facebook and Twitter. They are usually read when somebody posts a link to your site. They tell Facebook or Twitter what to display as a summary of your page.

Here's an example of a simple Twitter card. This is built from the page's social meta tags.

Twitter card example

Why do I care?

Two reasons. SEO and social.

The SEO benefits of good meta tags are pretty limited. The <title> tag is what appears on the search result page. It's important to have an appropriate title tag for each page.

Social media tags are more important. When users share links to your pages. You can provide an image to go with your content. You can make your videos available directly inside social sites. You will get better social engagement with good meta tags.

What do meta tags look like?

Here's a simple example of simple meta tags in plain HTML.

<html>
<head>
  <title>GatsbyCentral</title>
  <meta name="description" content="The Community for Gatsby Developers" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@GatsbyCentral" />

This will generate a Twitter card like so.

Gatsby Central twitter card

Meta tags in Gatsby

Gatsby is based on React. Helmet is a package to manage meta tags in React. Gatsby uses Helmet.

Helmet is very easy to get started with.

First, import helmet like so:

import { Helmet } from "react-helmet";

Now create a <Helmet> block inside your render() function like so:

return(
  <div>
    <Helmet>
      <title>Gatsby Central</title>
    </Helmet>
    ...
  </div>
)

Layouts and pages

Helmet will automatically merge meta tags. Set your default tags in your layouts. Override them in your page components. You can use <Helmet> in any component.

With the example above in a layout, you could add this to a page:

<Helmet>
  <title>Meta Tags in Gatsby</title>
</Helmet>

This title will overwrite the layout title.

Rating: 5.0 - 5 Reviews
Is this post useful to you? Please give us a rating!

Subscribe

Want regular updates on Gatsby and its awesomeness? Subscribe here. No spam, promise. Full details on privacy.

We use MailChimp as our marketing automation platform. By clicking "Submit" to submit this form, you acknowledge that the information you provide will be transferred to MailChimp for processing in accordance with their Privacy Policy and Terms.

Share

If you'd like to share this post, here are some handy links to make that easier.

Post last updated: March 13, 2018

Comments

Feedback? A point to make? Express yourself via the comment form below.

Don't forget to check the captcha. Otherwise we won't receive your comment.

Be the first to post a comment on this post

© chmac Ltd - PrivacyCommunity