Search code examples
javascriptjqueryhtmlajaxgoogle-search

Intelligent Ajax Deep Linking for search engines so that Meta data is loaded in HTML instead of DOM

I'm searching for a good way of deep linking together with different meta tags. Currently I have a huge main HTML site and showing the subpages via JavaScript and DOM manipulations.

Let's take my latest project as example (Google Search). There you can see that the meta tags (let's take just the description for simplification) are always the same. But in the DOM I changed it as you can see on the site. But I know Search Engine just take the HTML code and having JS mostly disabled. Here the lines in the JavaScript code that I used to change title, description and keywords.

Example

    $('meta[name=keywords]').attr('content', 'ages,third');
    $('meta[name=description]').attr('content', 'The Third age is where The Hobbit and Lord of the Rings take part.');
    document.title = "Third Age - Arda Maps";

As you can see from the Google search, the title is properly changed, even tho it is done via JavaScript.

So the question is, if there is a way to also change other meta tags like the description via JavaScript in a proper way?

Note #1: I don't want to use PHP. I know PHP would make it way easier via templating.

Note #2: I also know I could just load the different pages via Ajax. But then I would have to mirror them. And as you can see the main html is very big. Mirroring would in this way be contra-productive. Isn't it?

Solution

  • There is no way to edit the meta tags on a Single-Page web application easily for different pages. The only way is via PHP or Node.js to change it on server-side.

    Chaning it on client-side it will just change the DOM what is good for the user as he can see the changes. But search engine will ignore that. Also with the Dublin Core it will not work. Even tho it is designed for just this.

    So currently this is not possible.