How to Add SEO Keywords in HTML (With Copy-Paste Code)

How to Add SEO Keywords in HTML (With Copy-Paste Code)

Last reviewed: July 2026

To add SEO keywords in HTML, place your primary keyword inside five elements: the <title> tag, the <meta name="description"> tag, one <h1> and a couple of <h2> headings, the alt attribute on relevant images, and your JSON-LD structured data. Most guides tell you where keywords go. This one shows the actual markup, so you can paste it into your page source and edit the words.

That is the whole difference here. You already know a keyword belongs in the title. What trips people up is what the tag looks like in the raw HTML, how much text goes inside it, and where it sits in the document. Below is the code for each element, a wrong-vs-right version, and one full head block you can copy.

Where SEO keywords go in the HTML (the five slots)

Five HTML elements carry keyword weight that search engines read directly. Get the keyword into each of these once, in natural language, and you have covered the on-page markup that matters. The table maps the element to the tag and to how much text belongs inside it.

HTML elementTagKeyword ruleLength guide
Page title<title>Primary keyword near the front50-60 characters
Meta description<meta name="description">Keyword once, plus a reason to click120-155 characters
Main heading<h1>Exactly one, contains the keywordOne per page
Subheadings<h2>, <h3>Keyword or variant in 1-2 of themAs needed
Image alt<img alt="">Describe the image, keyword if it fitsUnder ~125 characters
Structured data<script type="application/ld+json">Keyword in headline/name fieldsValid JSON-LD

Note what is not on the list: the <meta name="keywords"> tag. Google confirmed years ago it ignores that tag for ranking, and it can hand a keyword list to competitors who view your source. Leave it out. The rest of this guide takes each live slot and shows the code.

Title tag: the highest-value keyword slot in your HTML

The <title> element lives in the document <head> and is the strongest single on-page keyword signal. Put your primary keyword near the front, keep it under about 60 characters so it does not truncate in results, and add one differentiator. Here is the raw markup.

<head>
  <title>How to Add SEO Keywords in HTML: Real Code Examples</title>
</head>

The keyword sits at the start, a colon separates the promise, and the whole string reads like something a human wrote. Compare a stuffed version against a clean one.

WrongRight
<title>SEO keywords HTML, add keywords HTML, HTML SEO keywords tags</title><title>How to Add SEO Keywords in HTML: Real Code Examples</title>

The left version repeats the phrase three times and reads like a robot. Search engines often rewrite titles like that in the results page, so you lose control of what shows. The right version earns the click and still contains the keyword once. If you want the strategy behind which words to pick, our title tag optimization guide covers the writing side.

Meta description: keyword plus the reason to click

The meta description does not directly move rankings, but it controls the snippet under your title and drives click-through. Write it as a <meta> tag inside the <head>, include the keyword once so it bolds when it matches the query, keep it to roughly 120-155 characters, and end on a benefit. Here is the markup.

<meta name="description"
      content="See the exact HTML for SEO keywords: title tag, meta
      description, headings, image alt, and JSON-LD. Copy-paste code.">

The name="description" attribute is what search engines read; the text lives in content. Do not confuse it with the dead <meta name="keywords"> tag. One keyword mention is enough. Repeating it inside 150 characters looks spammy and buys nothing.

Headings: one keyword-bearing H1, then supporting H2s

Headings give search engines the outline of your page. Use exactly one <h1> containing the primary keyword, then work the keyword or a close variant into one or two <h2> tags where it reads naturally. The heading hierarchy should nest, H2s under the H1, H3s under an H2, with no skipped levels.

<h1>How to Add SEO Keywords in HTML</h1>

<h2>Where SEO keywords go in the HTML</h2>
  <h3>Title tag</h3>
  <h3>Meta description</h3>

<h2>Adding keywords to image alt attributes</h2>

One thing I check on every audit: pages that ship two <h1> tags because a theme wraps the logo in one. Search engines cope, but a single, keyword-carrying H1 removes the ambiguity. Do not force the exact phrase into every subhead. A variant in two of them is plenty. For which headings actually influence rankings, see our on-page tag optimization breakdown.

Image alt attributes: keywords search engines read on media

Search engines cannot see an image, so the alt attribute on the <img> tag is how they read it. Write a plain description of what the image shows, and if your keyword fits that description honestly, include it. Keep it under about 125 characters and never list keywords.

<img src="seo-html-title-tag.png"
     alt="HTML head section showing an SEO keyword inside the title tag">

Here is the wrong-vs-right, because this is where stuffing shows up most.

WrongRight
alt="seo keywords html, html seo, add keywords, seo tags"alt="HTML head section showing an SEO keyword inside the title tag"

The right version helps a screen-reader user and a search crawler equally, which is the test that alt text is doing its job. Decorative images that carry no meaning should use an empty alt="" so assistive tech skips them.

JSON-LD structured data: keywords in machine-readable fields

Structured data hands search engines and AI systems a labeled version of your page. The recommended format is JSON-LD, a <script> block you drop into the <head> or <body>. It does not touch your visible HTML. Put your keyword in the headline or name field, matching your H1, so the machine reading and the human reading agree.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to Add SEO Keywords in HTML",
  "datePublished": "2026-07-04",
  "dateModified": "2026-07-04",
  "author": {
    "@type": "Person",
    "name": "Christoph Olivier"
  }
}
</script>

Two rules keep this safe. The headline must describe content that actually exists on the page, or you risk a structured-data penalty. And the JSON must validate, one stray comma breaks the whole block. Run it through Google’s Rich Results Test before you ship. Structured data is also how AI search systems cite your content, so this slot is worth more in 2026 than it was two years ago.

The full head block, ready to paste

Here is every keyword-bearing element assembled into one document head. Swap the words for your own keyword, keep the structure, and you have the on-page HTML handled.

<head>
  <meta charset="utf-8">
  <title>How to Add SEO Keywords in HTML: Real Code Examples</title>
  <meta name="description"
        content="See the exact HTML for SEO keywords: title tag, meta
        description, headings, image alt, and JSON-LD. Copy-paste code.">
  <link rel="canonical"
        href="https://example.com/how-to-add-seo-keywords-in-html/">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "How to Add SEO Keywords in HTML",
    "datePublished": "2026-07-04"
  }
  </script>
</head>
<body>
  <h1>How to Add SEO Keywords in HTML</h1>
  <img src="example.png"
       alt="HTML head section with an SEO keyword in the title tag">
</body>

I added the <link rel="canonical"> tag because it prevents duplicate-URL problems from diluting the keyword signal you just placed. It does not hold a keyword, but it protects the ones that do.

How much keyword is too much in the HTML

There is no keyword-density target to hit. Modern search engines read language, not ratios. The practical rule: one natural mention per element, then stop. If the same phrase appears in your title, meta, H1, every H2, and three alt attributes verbatim, that pattern reads as manipulation, not relevance.

Use variants instead of the exact phrase everywhere. “Add SEO keywords in HTML” in the H1, “keyword placement in your markup” in an H2, “tags that carry keyword weight” in the body. Same topic, natural writing. This is the same principle behind our wider keyword placement map, which covers the where-and-why. This page covers the exact code. If keywords are still your bottleneck, our growth consulting team can audit your markup, or book a consultation to walk through your pages.

Frequently asked questions

Where exactly do I put SEO keywords in HTML?

Put your primary keyword in five HTML elements: the <title> tag and <meta name="description"> inside the <head>, one <h1> plus one or two <h2> headings, the alt attribute on relevant <img> tags, and the headline field of your JSON-LD structured data. One natural mention per element is enough.

Does the meta keywords tag still work for SEO?

No. Google confirmed it ignores the <meta name="keywords"> tag for ranking, and Bing treats stuffing it as a spam signal. Anyone viewing your page source can also read your target keyword list. Leave the tag out entirely and put keyword effort into the title, headings, alt text, and structured data instead.

Can I add keywords to HTML without knowing how to code?

Often, yes. Most content platforms and WordPress SEO plugins give you form fields for the title tag, meta description, and image alt text, then write the HTML for you. You type the words; the CMS generates the markup. You only need to touch raw HTML for custom structured data or when a template hard-codes a second H1 you have to remove.

How many times should a keyword appear in the HTML?

Once per element, in natural language. There is no density percentage to hit; modern search engines read meaning, not repetition. Aim for the keyword in the title, one H1, one or two subheadings, and the structured data, using close variants elsewhere. Repeating the exact phrase in every tag reads as stuffing and can suppress the page.

What is JSON-LD and do I need it for keywords?

JSON-LD is a structured-data format, a <script type="application/ld+json"> block that labels your page for search engines and AI systems. You are not required to use it, but placing your keyword in its headline or name field reinforces the topic in machine-readable form and can earn rich results. Validate it with Google’s Rich Results Test before publishing.