Grouping Common Meta Tags

Learn about grouping the meta tags through a component and how to organize the codebase.

At this point, we may want to add many other meta tags to our website to improve its SEO performance. The problem is that we could easily end up creating huge page components containing basically the same tags. For that reason, it’s common practice to create one or more components (depending on our needs) to handle most of the common head meta tags.

Let’s say that we want to add a blog section to our website. We may want to add support for open graph data, Twitter cards, and other metadata for our blog posts, so we could easily group all this common data inside a PostHead component.

We create a new file, components/PostHead.js, with the following script:

Get hands-on with 1200+ tech skills courses.