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.
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>
[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).
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>