Override SEO Elements with JavaScript

Sitebee

Technical SEO
Staff member
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 is override the existing page title on a webpage.
Code:
<script>
document.title = "This is the overriden Page Title"
</script>

Override the Meta Description


This JS snippet overrides the existing meta description.
Code:
<script>
$('meta[name=description]')
.attr('content', 'This is the overriden Meta Description');
</script>

Override the Canonical Tag


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).
Code:
<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).
Code:
<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).
Code:
<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).
Code:
<script>
document.getElementById("LinkId").href = "https://mynewlink.com";
document.getElementById("LinkId").innerHTML = "New Anchor Text";
</script>

Override Telephone Click to Call


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