How to dynamically update Meta tags (OG) using JavaScript

Tags: , , ,

This is my first question here in the Stack community. I know it has been asked earlier, but I wanted to know how to do it specifically just using JS (I’m not a coder by education).

This is something what I am trying to do:

var pageTitle = document.getElementsByTagName('h1');
document.getElementById("demo").innerHTML = pageTitle[0].innerHTML;
<title>Update meta tag dynamically</title>
<meta property="og:title" content="id=demo"/>
        <h1>First header</h1>

I know the that’s not how to use tags, just to show you what I want to do.

PS: We can’t run anything at the back-end, so it has to be in the code.

This is something else that I found, but it doesn’t work either:

<meta name="description" content="Old">
<script type='text/javascript'>
$(document).ready(function() {
    var metaTitle = document.getElementsByTagName('h1');
    // Just replacing the value of the 'content' attribute will not work.
    $('head').append( '<meta name="description" content"$metaTitle">' );


Finally, cracked the code. Here it is for any future wanderers:

Source: stackoverflow