Override HTML Elements with JavaScript

Use JavaScript to override common elements that can impact SEO performance within a webpage's HTML contents. Overrides mean that the elements must be present within the HTML markup to be replaced with the new attributes.

Override the Page Title​

The JS snippet below overrides the existing page title on a webpage.

<script>
document.title = "This is the overriden Page Title"
</script>

Override the Meta Description​

This JS snippet overrides the existing meta description.

<script>
$('meta[name=description]')
.attr('content', 'This is the overriden Meta Description');
</script>
   
[HEADING=2]Override the Canonical Tag    [/HEADING]
Use this JS snippet to replace the canonical URL.
      [code] 
<script>
$('link[rel=canonical]')
.attr('href', 'https://mydomain.com/new-canonical-url.html');
</script>

Override the Meta Robots Tag​

This JS snippet will override the meta robots directives (be careful).

<script>
$('meta[name=robots]')
.attr('content', 'index,follow');
</script>

Override the H1 Heading​

This JS snippet is to replace the H1 Heading on a webpage (Might not work very well with multiple H1s on a single URL).

<script>
document.querySelector('h1').innerHTML = 'This is the overriden H1 Heading';
</script>

Override an Image​

Use this JS snippet to override an image (match by class).

<script>
document.getElementById("ImageId").src="/images/newimage.webp";
</script>

Override an Href & Anchor Link​

Use this JS snippet to override a href link and it's anchor text (match by class).

<script>
document.getElementById("LinkId").href = "https://mynewlink.com";
document.getElementById("LinkId").innerHTML = "New Anchor Text";
</script>

Override Telephone Click to Call​

<script>
document.getElementById("PhoneId").href = "tel:123-456-7890";
</script>