How to Add Meta Tags: HTML, WordPress, Shopify

Q: Where do meta tags go in HTML?

Inside the ` ` element, between the ` ` and ` ` tags. The `charset` meta tag should come first, before the ` `, so the browser knows the character encoding before it parses text. Order doesn't matter much for the rest.

Q: How do meta tags work in the Next.js App Router?

Export a `metadata` object (or an async `generateMetadata` function) from a `layout.tsx` or `page.tsx`. Next.js turns it into the right ` ` and ` ` tags server-side. It only works in Server Components, so don't put it in a file marked `"use client"`.

Meta tags all live in the same place, the <head> of your HTML, but how you get them there depends entirely on your platform. On a hand-coded site you type them directly. On WordPress or Shopify you almost never touch HTML; you fill in fields or edit a theme file. On Next.js you export a JavaScript object. Here's how to add meta tags on each, with the real code and menu paths.

Whichever platform you're on, generate the tag block first with our meta tag generator so you have correct, escaped markup to paste or adapt. Then follow the section for your stack.

Raw HTML

If you control the HTML, put the tags between <head> and </head>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title</title>
  <meta name="description" content="A sentence about this page.">
  <link rel="canonical" href="https://example.com/page">
</head>

Two rules trip people up. charset should come first so the browser knows the encoding before it parses the title, and every page needs its own title and description. Copy-pasting the same two across your whole site is one of the most common issues we see in SEO tests. Each page's <title> and canonical URL must be unique to that page.

WordPress without a plugin

WordPress generates the <title> and some tags from the theme, but out of the box it gives you no interface for the meta description or Open Graph tags. You have two honest options.

The clumsy way is editing your theme's header.php and hard-coding tags inside the <head>. Don't. It applies the same description to every page, and you'll lose it on the next theme update.

The better no-plugin route is the wp_head hook. In your child theme's functions.php:

function my_meta_description() {
  if ( is_single() ) {
    $desc = get_the_excerpt();
    echo '<meta name="description" content="' . esc_attr( $desc ) . '">' . "\n";
  }
}
add_action( 'wp_head', 'my_meta_description' );

That pulls each post's excerpt into its description. It works, but you're now maintaining SEO logic in PHP. For most people a plugin is less work and more control.

WordPress with an SEO plugin

Install Yoast SEO, Rank Math, or SEOPress. All three add a meta box below the post editor. The workflow is the same regardless of which you pick:

Edit a post or page.
Scroll to the SEO panel below the content editor (Yoast labels it "Yoast SEO," Rank Math puts a score button top-right).
Fill in the "SEO title" and "Meta description" fields. The plugin shows a live SERP preview and a character meter.
Open the "Social" tab in the same panel to set the Open Graph title, description, and image.
Update the post.

The plugin injects everything into wp_head for you and handles canonical tags site-wide. You never touch HTML. One thing to check: set the site-wide title template under the plugin's settings (usually %%title%% %%sep%% %%sitename%%) so every page gets a sensible default even when you leave the per-post field blank.

Shopify

Shopify splits this into two places depending on how much control you want.

For the built-in fields, open a product, collection, page, or blog post, scroll to Search engine listing at the bottom, and click Edit. You get a page title and meta description field with a Google preview. This is where most Shopify meta editing happens, and for most stores it's enough. The theme handles the canonical and Open Graph tags automatically.

When you need tags the admin doesn't expose, edit the theme. Go to Online Store > Themes > ... > Edit code, and open theme.liquid. Inside the <head> you'll find Shopify's default tags. To add or override, use the object variables:

<title>{{ page_title }}</title>
<meta name="description" content="{{ page_description | escape }}">
<meta property="og:title" content="{{ page_title }}">
<meta property="og:image" content="{{ page_image | image_url: width: 1200 }}">

Shopify's page_title and page_description pull from the Search engine listing fields you filled in, so the two systems connect. Most themes already include an Open Graph block; check before you add duplicates, because two og:title tags is a common Shopify mistake that confuses the Open Graph checker.

Next.js App Router

Next.js (13.4 and up, App Router) generates meta tags from a metadata object you export from a layout.tsx or page.tsx. You don't write <head> HTML at all:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Page title",
  description: "A sentence about this page.",
  alternates: { canonical: "https://example.com/page" },
  openGraph: {
    title: "Headline for the card",
    description: "One sentence for the card.",
    images: ["https://example.com/card.jpg"],
    url: "https://example.com/page",
  },
  twitter: { card: "summary_large_image" },
};

Next.js renders that into the correct <meta> and <link> tags server-side. For pages where the values depend on data (a blog post, a product), export an async generateMetadata() function instead of the static object and return the same shape. The one gotcha: metadata only works in Server Components, so if a file has "use client" at the top, move the export to a parent server layout.

Verify before you move on

After adding tags on any platform, confirm the browser actually receives them, not just that the admin saved them. View source (Ctrl+U) and search for <meta name="description" and og:title. If a value is missing from view-source but visible in the rendered page, it's being injected client-side and scrapers won't see it. Run the live URL through the free SEO analyzer to see the exact tags a crawler reads. If you want a deeper walkthrough of that check, see how to check any page's SEO in your browser.

Frequently Asked Questions

Where do meta tags go in HTML?

Inside the <head> element, between the <head> and </head> tags. The charset meta tag should come first, before the <title>, so the browser knows the character encoding before it parses text. Order doesn't matter much for the rest.

How do I add meta tags in WordPress?

The simplest way is an SEO plugin (Yoast, Rank Math, or SEOPress). It adds SEO title, meta description, and social fields below the post editor and injects the tags for you. Without a plugin you'd edit the theme via the wp_head hook, which is more fragile and applies the same values site-wide.

How do I edit meta tags in Shopify?

For most tags, open a product, collection, or page, scroll to "Search engine listing," and click Edit to set the title and description. For tags the admin doesn't expose, edit theme.liquid under Online Store > Themes > Edit code and use Liquid variables like {{ page_title }}.

How do meta tags work in the Next.js App Router?

Export a metadata object (or an async generateMetadata function) from a layout.tsx or page.tsx. Next.js turns it into the right <meta> and <link> tags server-side. It only works in Server Components, so don't put it in a file marked "use client".

Why don't my meta tags show up after I added them?

Usually one of two reasons: the tag is injected client-side by JavaScript, so it's absent from view-source and invisible to crawlers, or the platform is caching an old version. Check with view-source rather than the rendered page, and clear any page or CDN cache.

How to Add Meta Tags in HTML, WordPress, Shopify, and Next.js