Question 232233 in SEO Question posted in
Some basic information to get you started with this can be found here.

Seo – How to insert specific strings from page into meta tags with JavaScript?

I need this for SEO purposes. A small amount of pages on the website I’m working on, get generated dynamically, but their meta data is very generic – even though 5 of theses (different) pages have relatively different content, they will have the same title and description, which I’m trying to avoid.

I want to insert specific content from a page, into it’s meta tags via JavaScript.

The page looks something like this:

<html>
<head>
  <title>This is the current title i want to replace</title>
  <meta name="description" content="This is the current description i want to replace.">
</head>
<body>
  <h1>Post Title</h1>
  <div class="intro">
    <p>Intro text goes here</p>
  </div>
  <div class="content">
    <p>Content goes here</p>
    <p>More content</p>
    <p>Even more content</p>
  </div>
</body>
</html>

I’m looking to inject the content of:

".intro" ("Intro text goes here" in this example) -> into the meta description of the page`

and

"h1" ("Post Title" in this example) -> into the meta title of the page

to make the end result look something like this:

<head>

<title>Post Title</title>

<meta name="description" content="Intro text goes here.">

</head>

As my JavaScript skills are limited, this is the only way i managed to change the page’s title and meta descritpion for now:

document.title = "Post Title";
document.getElementsByTagName('meta')["description"].content = "Intro text goes here.";

Obviously this is too static for the purpose, and doesn’t pull any data from the content of the page.

How do i amend the two lines of code above, in order for it to inject the desired strings into the meta title and description?

Tags:

2

Answers


  1. 0

    According to this, at least Google will spider your page with a headless browser that respects JS

    Webmaster: does inserting meta elements into the head using js effect seo

    Dynamic META tags in HTML5 and Javascript/jQuery

    you can do this to change the description. It is however recommended to do all SEO preparations on the server

    <html>
<head>
  <title>This is the current title i want to replace</title>
  <meta name="description" content="This is the current description i want to replace.">
  <script>
  window.addEventListener("DOMContentLoaded", () => { // the rest of the page has loaded
    const metaDesc = 
    document.querySelector("meta[name=description]")
    metaDesc.content = document.querySelector(".intro p").textContent;
    console.log(metaDesc.outerHTML); // show the tag for testing purposes
  })
  </script>
</head>
<body>
  <h1>Post Title</h1>
  <div class="intro">
    <p>Intro text goes here</p>
  </div>
  <div class="content">
    <p>Content goes here</p>
    <p>More content</p>
    <p>Even more content</p>
  </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    I’ll avoid commenting on best SEO practices (since the comments address this pretty well) and just address the code part of your question.

    You just need to reference that meta element and adjust the content attribute.

    <!doctype html>
<html>
  <head>
    <title>Post Title</title>
    <meta name="description" content="Intro text goes here.">
  </head>
  <body>
  
    <!-- Keep this <script> just prior to the closing body tag.
         so that it runs after all the page HTML is parsed. -->
    <script>
      // Get a reference to the meta element:
      const meta = document.querySelector("meta[name='description']");
      
      console.log(meta);  // For testing
      meta.content = "Something new";  // Set this to whatever value you need.
      console.log(meta);  // For testing      
    </script>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search