For SEO, can content containing keywords be written into the page using JavaScript and still rank well?

Question

We have a list of product summaries that appear on several different product listing sections of our website. Currently, these products are rendered into the HTML, and end up in different caches (page caches, gateway caches, browser caches) for every product listing page (and we have 20+ of these).

If we add or modify a product, we then need to invalidate these caches, and it seems extremely inefficient that all of these caches across the site must then be regenerated.

So I would like to instead serve all product summary information from a single URL, and then have this included using jQuery on each of the specific product listing pages (using the technique described here: https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file#9003363). By doing so, when the product information is changed, only the caches associated with this one URL need to regenerate. The page caches for each of the specific product listing pages could remain valid.

My question is: is this a terrible idea from an SEO perspective?

Assuming for the moment that the jQuery wouldn't be executed by search engines, then all they would see for each of the product listing pages would be the heading and introductory paragraph. This would still allow Google to return the page for searches such as "where can I buy xyz products?" where we have a product search listing that has an introductory paragraph similar to "here you can find all the xyz products we have for sale". But, does Google actually need to then see the results appearing in the HTML itself for any particular SEO benefit?

My intention is that Google will find all of the product description pages at least via sitemap.xml. But must it really see the links to these within their appropriate product listing pages, in pre-rendered HTML?

(I do realise that the implementation I'm suggesting would make the page useless for people who are not running JavaScript).

Answer 1

We had something very similar with dynamic products. We originally had alot of products that were essentially filtered into the shop using js. So essentially we had little to no content. When the page loaded the information then loaded in.

What we had could have been considered as a "templated" file which was duplicated through out the site. Unfortunately, the content was not read at all. We dropped from the 1st page to well below the 10th page in a matter of a month.

We also included all of the information in the sitemap however I wouldn't have thought google would have taken the information from the sitemap as people like to cloak their sites.

What you are essentially doing according to these docs: http://api.jquery.com/load/ is AJAX. Which google doesn't (currently) read.

One of the ways around this is to provide google html snapshots of your site.

1. Legacy method: create static content for each dynamic state Webmasters have used techniques such as HIJAX to serve static content for dynamic state. If you already have this content, or if your app's content does not change frequently, returning static content is still a valid option. However, for AJAX URLs to be displayed in search results rather than static HTML URLs, the main modifications still required are to adopt the #! AJAX URL structure and properly respond to _escaped_fragment_ requests.

2. Much of your content is created by a server-side technology such as PHP or ASP.NET It may be the case that your application uses AJAX for improved interactivity, but much of the content is actually produced with a server-side technology such as PHP or ASP.NET. For example, consider the fictitious movie information application:

Here is the link to the doc's https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot

You will have to generate fragments of the HTML and use their method of fragments to retrieve the data:

// load the html page
  $remote = file_get_contents('index-movies.html');
  $doc = new DomDocument();
  $file = $doc->loadHTML($remote);

  // get the _escaped_fragment_ parameter
  $escapedfragment = $_GET['_escaped_fragment_'];
  // NOTE: VALIDATE PARAMETERS (as always, to avoid security risks)
  $params = getParams($unescapedfragment);

  // you can use the same php script that your JavaScript calls
  $dataToAdd = include('getdata.php');

  // now add it to the right place in the DOM
  $docToAdd = new DomDocument();
  $docToAdd->loadHTML($dataToAdd['summary']);
  $newNode = $doc->importNode($docToAdd->documentElement, true);
  $doc->getElementById('load')->appendChild($newNode);

  // finally, save as HTML
  echo $doc->saveHTML();

There are a few other tips with regards to AJAX and/or js which you should be able to find here: https://developers.google.com/webmasters/ajax-crawling/