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>
Finally, cracked the code. Here it is for any future wanderers: https://github.com/idaljot/meta-tag-auto-update/blob/master/meta-tag.htm