I have a webpage that implements a set of tabs each showing different content. The tab clicks do not refresh the page but hide/unhide contents at the client side.
Now there is a requirement to change the page title according to the tab selected on the page ( for SEO reasons ). Is this possible? Can someone suggest a solution to dynamically alter the page title via javascript without reloading the page?
Make each tab a link with an href that loads the entire page with that tab selected. Then the page can have that title in the tag.
The <title> tag in HTML is used to define the title of HTML document. It sets the title in the browser toolbar. It provides the title for the web page when it is added to favorites.
Use the querySelector() Method to Change the Page Title in JavaScript. We can use the document. querySelector() method to pick elements in a document. The title element can be chosen by giving the title element a selector parameter and retrieving the page's main title element.
Given a web page containing the page title and the task is to change the title of a web page dynamically using JavaScript. Method 1: Using document.title property: The document.title property is used to set or return the current title of the document. The title of the page can be changed by assigning the new title as a string to this property.
Method 1: Using document.title property: The document.title property is used to set or return the current title of the document. The title of the page can be changed by assigning the new title as a string to this property. This will change the title of the website to the preferred title. Hey geek!
Make each tab a link with an href that loads the entire page with that tab selected. Then the page can have that title in the tag. The onclick event handler can still load the pages via ajax for human viewers.
Most crawlers aren't going to support javascript in the first place, so they will take whatever is in the element as the page title. If you want this to be compatible with most of the important crawlers, you're going to need to actually change the title tag itself, which would involve reloading the page (PHP, or the like).
Update: as per the comments and reference on SearchEngineLand most web crawlers will index the updated title. Below answer is obsolete, but the code is still applicable.
You can just do something like,
document.title = "This is the new page title.";
, but that would totally defeat the purpose of SEO. Most crawlers aren't going to support javascript in the first place, so they will take whatever is in the element as the page title.If you want this to be compatible with most of the important crawlers, you're going to need to actually change the title tag itself, which would involve reloading the page (PHP, or the like). You're not going to be able to get around that, if you want to change the page title in a way that a crawler can see.
I want to say hello from the future :) Things that happened recently:
So to answer your question you can safely change title and other meta tags from javascript (you can also add something like https://prerender.io if you want to support non-Google search engines), just make them accessible as separate urls (otherwise how Google would know that those are different pages to show in search results?). Changing SEO related tags (after user has changed page by clicking on something) is simple:
if (document.title != newTitle) { document.title = newTitle; } $('meta[name="description"]').attr("content", newDescription);
Just make sure that css and javascript is not blocked in robots.txt, you can use Fetch as Google service in Google Webmaster Tools.
1: http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With