4

I have a website that focuses on charts and graphs. The graphs on the site are drawn using JavaScript, but contain keywords that I would like to have indexed.

For example, here is a screenshot of a graph from our site:

enter image description here

Keywords for the labels are only present on the page in JavaScript code. Something like this:

<script>
drawchart({
    categories:['Amount Of Money Raised By The ALS Association']},
    yAxis:{title:{text:'Dollars' }},
    series:[{name: '2013',data:[1700000]},{name:'2014',data: [15600000]}]
});
</script>

I would like to have all the labels on the chart indexed in Google:

  • "Amount Of Money Raised By The ALS Association"
  • "Dollars"
  • "2013"
  • "2014"

I know that they are not being indexed right now because we use Google Custom Search for site search functionality. Our users have complained that site search isn't finding text used as chart labels.

How do I get Google to index this content that is written into the page using JavaScript?

  • Ya, strange I can confirm that Google isn't actually reading the labels of the chart or the data within. – Simon Hayter Oct 8 '14 at 10:21
3

If Google isn't indexing words contained within scripts, then the words need to be added to the HTML where Googlebot does pick up on them. So that all the data isn't duplicated, it can be removed from the script. The JavaScript can pull the text out of the HTML document and use it.

The text in the page can be hidden via CSS. This should not be considered cloaking because the text is shown to users in the chart.

The code for the data in the chart now looks like this:

<div class=charttext>
    <table class=charttabledata><tr>
        <th></th><th>2013</th><th>2014</th>
    </tr><tr>
        <th>Amount Of Money Raised By The ALS Association</th><td>1700000</td><td>15600000</td>
    </tr></table>
    <div class=ylabel>Dollars</div>
</div>

Now the JavaScript has code to find this data using jQuery and format into arrays that the charting software can use.

While the data is initially hidden by CSS, I also added an option for users to view it:

chart with table data (source)

0

Here are a few options:

1) Update your Meta Tags to include the graph info.

2) Write some content that explains the graph in detail.

3) Use something like Swiftype for your internal search. You can make custom queries or adjust weight of things like title, excerpt, tags and much more.

Honestly, I would just do all 3 or at least the first two.

  • Highcharts library is awesome btw! – dasickle Oct 10 '14 at 13:19
  • What meta tags does google index? I believe that the title is the only tag in the head that gets indexed. Even the meta description isn't indexed as far as I know. – Stephen Ostermiller Oct 10 '14 at 13:54
  • You are right. Looks like [robots, description, keywords, revisit-after, generator, verify-v1, googlebot, google-site-verification, mssmarttagspreventparsing, no-cache] are all excluded. – dasickle Oct 10 '14 at 14:06
  • How about using Rich Snippets? – dasickle Oct 10 '14 at 14:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.