How to update web page title in real time?

Question

I have a web page that implements a set of tabs, each tab showing different content. The click of the tab does not refresh the page, but hides/shows the content on the client side.

There is now a requirement to change the page title based on the tab selected on the page (for SEO reasons). Is this possible? Can someone provide a solution to dynamically modify the page title via javascript without reloading the page?

Answer 1

I want to say hello to you from the future :) Recent events:

1. Google can now run the javascript code on your website¹
2. People now use tools like React.js, Ember, and Angular to run complex javascript tasks on pages, and Google can still index them¹
3. You can use html5's history API (pushState, react-router, ember, angular) so that you can set a separate URL for each tab you want to open and Google will index it¹

So, to answer your question, you can safely change the title and other meta tags via javascript (if you want to support non-Google search engines, you can also add something like https://prerender.io stuff), just make them accessible as separate URLs (otherwise how would Google know they are different pages and show them in search results?). Changing SEO-related tags after a user clicks on something is simple:

if (document.title != newTitle) {
    document.title = newTitle;
}
$('meta[name="description"]').attr("content", newDescription);

Just make sure you don't block CSS and javascript from loading in robots.txt, and you can use the Fetch as Google service in Google Webmaster Tools.

1: http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

Answer 2

UPDATE: Based on comments and references on SearchEngineLand, most web crawlers will index the updated titles. The answer below is outdated, but the code still applies.