How to dynamically update Meta tags (OG) using JavaScript

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;

<html>
<head>
<title>Update meta tag dynamically</title>
<meta property="og:title" content="id=demo"/>
</head>
    <body>
        <h1>First header</h1>
    </body>
</html>

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">
<h1>New</h1>
<script type='text/javascript'>
$(document).ready(function() {
    var metaTitle = document.getElementsByTagName('h1');
    // Just replacing the value of the 'content' attribute will not work.
    $('meta[name=description]').remove();
    $('head').append( '<meta name="description" content"$metaTitle">' );
});
</script>

Answer

Finally, cracked the code. Here it is for any future wanderers: https://github.com/idaljot/meta-tag-auto-update/blob/master/meta-tag.htm

Advertisement

Answer