{"data":{"markdownRemark":{"html":"

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

\n
\n

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

\n
\n

What are meta tags?

\n

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.

\n

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

\n

Social meta tags

\n

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.

\n

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

\n

\n \n \n

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.

\n

What do meta tags look like?

\n

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

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

This will generate a Twitter card like so.

\n

\n \n \n \n \n \n

\n

Meta tags in Gatsby

\n

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

\n

Helmet is very easy to get started with.

\n

First, import helmet like so:

\n
import { Helmet } from \"react-helmet\";
\n

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

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

Layouts and pages

\n

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.

\n

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

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

This title will overwrite the layout title.

","excerpt":"You want to set social meta tags. Or you want to set a page tag. How does Helmet work? tl;dr - Use just like in both the layout and…","timeToRead":2,"frontmatter":{"date":"March 13, 2018","path":"/meta-tags-in-gatsby","title":"Meta Tags in Gatsby"}},"relatedPosts":null,"allCommentsJson":null,"allRatingsJson":{"totalCount":5,"edges":[{"node":{"id":"6e9f2342-fcf5-5319-a25e-09bbe64e511a","rating":"5"}},{"node":{"id":"ae1b6b9a-a61c-5f7b-b0bd-2185f21c1f01","rating":"5"}},{"node":{"id":"49671bb9-cd35-5bfc-9d9b-edb7e851e1ea","rating":"5"}},{"node":{"id":"8a4329ac-7df3-5497-b383-38fcda602670","rating":"5"}},{"node":{"id":"a8a6ead6-4086-5cf4-a01e-c47c5a61b976","rating":"5"}}]}},"pageContext":{"tags":[]}}