Friday, February 22, 2013

Change meta tag content using Javascript?

Instead of server side rendering, can I dynamically change meta tag content using Javascript or jQuery? The answer is yes and no.

Why yes?
Literally, jQuery can change meta tag content like below:
$('meta[name=author]').attr('content', 'new_name');
$('meta[name=og\\:url]').attr('content', 'new_url');

Some browsers and plugins parse meta elements and change their behavior for different values.
Viewport definition for mobile devices
<meta name="viewport" content="width=device-width, initial-scale=1.0">

iPhone: Switch off phone number parser
<meta name="format-detection" content="telephone=no">

Google Chrome Frame
<meta http-equiv="X-UA-Compatible" content="chrome=1">

Some user agents use the description for bookmarks
<meta name="description" content="this is description">

Why no?
Search engine (e.g. Googlebot), Social indexer (e.g. Facebook Scrapper, twitterbot) always get the meta elements that are in the source HTML, never observe meta tag added or changed with client side JavaScript. Search engines will ignore javascript to alter the meta values. Facebook scrapper sees crawled page the same way that search engine robots do, so changing open graph meta tags with Javascript will be invisible to the Facebook linter either. The solution is to do server side rendering with correct meta tags.

No comments:

Post a Comment