Skip to content
Browse all guides

Issue #212 · critical

Issue 212

What is this issue?

This issue checks whether your page's title tag and meta description are present in the initial server-rendered HTML response, not just added later by JavaScript.

Modern websites often use JavaScript to dynamically inject metadata like titles and descriptions after the page loads. However, search engine crawlers may not execute JavaScript or may not wait for it to finish. For this check to pass:

  • The title tag must be present in the raw HTML returned by the server
  • The meta description tag must be present in the raw HTML returned by the server
  • Both must be inside the <head> section of the HTML
  • The title and description should not be empty

Example: When a crawler fetches your page, it should immediately see <title>My Page Title</title> and <meta name="description" content="My page description"> in the HTML source code, not have them added later by JavaScript.

Why does it matter?

Having metadata in server-rendered HTML is critical for:

  • Indexability: Search engines need to see metadata in the initial HTML to understand and index your page properly
  • Rankings: Title tags are a primary ranking factor, and meta descriptions influence click-through rates
  • Crawlability: Crawlers with limited JavaScript execution will miss metadata that's only added by JavaScript
  • AI Search / AEO: AI systems need to access metadata in the initial HTML response to understand page content

When title and meta description are only added by JavaScript:

  • Search engines may see missing or incorrect metadata
  • Your pages may appear in search results with generic or incorrect titles/descriptions
  • Crawlers may generate their own snippets from page content, which may be less effective
  • Some search engines or crawlers may not see the metadata at all

Resolving this issue improves your SEO health score by ensuring search engines can reliably access your page metadata.

How to fix it

  1. Check your pages: Use "View Source" (not Inspect Element) to see if your title and meta description are in the initial HTML response.

  2. Move metadata to server-side: Ensure your server-side templates or SSR (Server-Side Rendering) framework generates the title and meta description in the initial HTML.

  3. Avoid client-side only injection: Don't rely solely on JavaScript frameworks (like React, Vue, or Angular) to inject metadata after page load.

  4. Use SSR frameworks properly: If using Next.js, Nuxt, or similar frameworks, use their built-in metadata/head management features that render to server HTML.

  5. Test with crawlers: Use tools like Google's Rich Results Test or fetch as Google to verify metadata is visible to crawlers.

  6. Validate placement: Ensure metadata is inside the <head> section, not in the <body>.

  7. Check for duplicates: Make sure you have only one title tag and one meta description tag per page.

  8. Test your changes: Recrawl your pages to confirm metadata is now present in the server-rendered HTML.

Examples

Example 1: Server-rendered metadata

Scenario: A page with metadata in the initial HTML response.

Passes because:

  • Title tag is present in the raw HTML
  • Meta description is present in the raw HTML
  • Both are inside the <head> section
<head>
  <title>My Page Title</title>
  <meta name="description" content="This is my page description" />
</head>

Example 2: JavaScript-injected metadata

Scenario: A page that relies on JavaScript to add metadata.

Fails because:

  • Metadata is not in the initial HTML response
  • Crawlers that don't execute JavaScript won't see the metadata
  • Search engines may see missing or incorrect metadata
<!-- Initial HTML response -->
<head>
  <!-- No title or meta description -->
</head>
<body>
  <script>
    // JavaScript adds metadata after page load
    document.title = "My Page Title";
    const meta = document.createElement("meta");
    meta.name = "description";
    meta.content = "This is my page description";
    document.head.appendChild(meta);
  </script>
</body>

Corrected version: Move metadata to server-side rendering.

Example 3: Empty metadata

Scenario: A page with empty title or meta description.

Fails because:

  • Title or meta description is present but empty
  • Search engines have no meaningful metadata to use
<head>
  <title></title>
  <meta name="description" content="" />
</head>

Corrected version:

<head>
  <title>My Page Title</title>
  <meta name="description" content="This is my page description" />
</head>

How PixyScan detects this

PixyScan identifies JavaScript-rendering metadata issues through these steps:

  1. Fetches the raw HTML: PixyScan sends an HTTP request and captures the raw HTML response from the server (after following redirects).

  2. Does NOT execute JavaScript: The system only analyzes the raw HTML—it doesn't run JavaScript or render the page in a browser.

  3. Extracts metadata: PixyScan parses the raw HTML to find:

    • The <title> tag in the <head> section
    • The <meta name="description"> tag in the <head> section

  4. Checks for issues: The system evaluates:

    • Is the title tag present in the raw HTML?
    • Is the meta description present in the raw HTML?
    • Are they inside the <head> section?
    • Are they empty or just whitespace?
    • Are there duplicate meta description tags?

  5. Flags JavaScript-dependent metadata: PixyScan triggers issues when metadata is missing from the raw HTML, indicating it might only be added by JavaScript.

The detection specifically checks the server response before any JavaScript execution—this is what search engine crawlers typically see first.

References