Meta In Body

Name: Meta In Body
Author: thedaviddias

thedaviddias/frontendchecklist

1 installs
73.4k repo stars
Updated June 18, 2026
thedaviddias/frontendchecklist

Scans the HTML for meta tags placed in the body instead of the head, where crawlers ignore them, and moves them back into head.

About

Detects meta tags injected into the document body by CMS plugins or scripts, where directives like noindex or canonical are silently ineffective. A developer uses it when auditing HTML document structure for misplaced tags.

Crawlers only process meta tags found in head, not body
Refactor script injection to target document.head

Meta In Body by the numbers

1 all-time installs (skills.sh)
Ranked #1,710 of 1,879 Marketing & SEO skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/thedaviddias/frontendchecklist --skill meta-in-body

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/thedaviddias/frontendchecklist/meta-in-body.svg)](https://skillselion.com/skills/thedaviddias/frontendchecklist/meta-in-body)

Installs	1
repo stars	★ 73.4k
Last updated	June 18, 2026
Repository	thedaviddias/frontendchecklist ↗

What it does

Scans the HTML for meta tags placed in the body instead of the head, where crawlers ignore them, and moves them back into head.

Files

SKILL.mdMarkdownGitHub ↗

Meta Tags in Body

Meta tags placed in the document body are ignored by search engines and most browsers—directives like noindex or canonical-url are silently ineffective, causing pages to be indexed or de-indexed unexpectedly.

Quick Reference

All <meta> tags must appear inside <head>, never inside <body>
Browsers may ignore or move misplaced meta tags, making them ineffective
Crawlers like Googlebot only process meta tags found in <head>
Validate with HTML validator or inspect parsed DOM to confirm placement

Check

Parse the HTML and check whether any <meta> elements appear outside <head>—i.e., inside <body> or after the </head> closing tag. Flag each misplaced tag by name/property.

Fix

Move all <meta> tags into the <head> section before </head>. If they are injected by a script after the DOM is built, refactor the injection to target document.head instead of document.body.

Explain

Meta tags are document-level metadata and must live in <head>. When placed in <body>, they fall outside the metadata model of the document—search engines and browsers do not honour them, so directives like noindex or canonical-url will have no effect.

Code Review

Parse the rendered HTML and check the DOM structure. Find all <meta> elements. For each one, traverse up the parent chain — if any ancestor is <body> or if the element appears after </head> in the source, flag it. Pay special attention to: meta name='robots', meta name='description', meta property='og:*', and link rel='canonical' placed in body.

---

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/seo/meta-in-body

Meta Tags in Body

Detects meta tags incorrectly placed in document body

Priority: high · Difficulty: beginner · Time: 5 min

--- The <meta> element is a metadata element defined in the HTML specification as valid only within <head>. Placing meta tags in <body> makes them invisible to search engines and may trigger HTML parse errors.

Code Examples

<!-- ✅ Good: All meta tags inside <head> -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="robots" content="index, follow" />
  <meta name="description" content="Page description here." />
  <meta property="og:title" content="Page Title" />
  <link rel="canonical" href="https://example.com/page" />
  <title>Page Title</title>
</head>
<body>
  <!-- page content only -->
</body>
</html>

<!-- ❌ Bad: meta tags scattered in <body> -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Page Title</title>
</head>
<body>
  <meta name="robots" content="noindex" />   <!-- IGNORED by Google -->
  <meta property="og:title" content="..." /> <!-- IGNORED by Facebook -->
  <div id="content">...</div>
</body>
</html>

Why It Matters

Why This Happens

CMS plugins inject meta tags via JavaScript after the DOM loads, targeting document.body
Template includes are assembled in the wrong order
Dynamic rendering injects tags with innerHTML into a container inside <body>
Copy-pasted snippets are added to the wrong section of a template

Fixing JavaScript Injection

// ❌ Bad: injecting into body
document.body.innerHTML += '<meta name="robots" content="noindex">';

// ✅ Good: inject into head
const meta = document.createElement('meta');
meta.name = 'robots';
meta.content = 'noindex';
document.head.appendChild(meta);

Framework-Specific Notes

Next.js: Use the metadata export or ` component from @unhead/vue`.

WordPress: Use wp_head action hook; never wp_footer or manual body injection.

Detection

# Check rendered HTML for meta tags outside <head>
# Look for <meta> tags that appear after </head> or inside <body>
curl -s https://example.com/ | grep -o '<body.*<meta[^>]*>' | head

Use the W3C Markup Validator or browser DevTools → Elements tab to inspect where meta tags are actually rendered in the DOM.

Exceptions

Utility or intentionally noindex pages may keep minimal metadata when richer search presentation is not a goal.
Template-driven pages can look repetitive in isolation; confirm the fully rendered production output before flagging duplication or omission.
If a page is intentionally redirected or excluded from indexation, resolve that crawlability decision before treating metadata polish as the primary issue.

Standards

Use these references as the standard for the final search-facing HTML, metadata, and crawl behavior.
Check the implementation against HTML Living Standard: The meta element before treating the rule as satisfied.
Check the implementation against MDN: <meta> — The metadata element before treating the rule as satisfied.

Verification

Automated Checks

Inspect rendered HTML and HTTP headers to confirm the expected metadata or crawlability signal is present.
Test the affected URL with Google Search Console or equivalent tooling where relevant.
Re-crawl a representative page set after deployment.