web-dev-qa-db-fra.com

Comment puis-je obtenir que Google indexe le contenu écrit dans la page avec JavaScript?

J'ai n site Web qui se concentre sur les tableaux et les graphiques. Les graphiques sur le site sont dessinés à l'aide de JavaScript, mais contiennent des mots clés que je souhaiterais indexer.

Par exemple, voici une capture d'écran d'un graphique de notre site:

enter image description here

Les mots-clés pour les étiquettes sont uniquement présents sur la page en code JavaScript. Quelque chose comme ça:

<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>

J'aimerais que toutes les étiquettes du graphique soient indexées dans Google:

  • "Montant recueilli par l'association SLA"
  • "Dollars"
  • "2013"
  • "2014"

Je sais qu'ils ne sont pas indexés actuellement, car nous utilisons la fonctionnalité de recherche personnalisée de Google pour la recherche sur les sites. Nos utilisateurs se sont plaints du fait que la recherche sur le site ne trouve pas le texte utilisé comme étiquettes de graphique.

Comment faire en sorte que Google indexe ce contenu écrit dans la page à l'aide de JavaScript?

4

Si Google n'indexe pas les mots contenus dans les scripts, ceux-ci doivent être ajoutés au code HTML où Googlebot les récupère. Pour que toutes les données ne soient pas dupliquées, elles peuvent être supprimées du script. Le JavaScript peut extraire le texte du document HTML et l'utiliser.

Le texte de la page peut être masqué via CSS. Cela ne doit pas être considéré comme occultant car le texte est présenté aux utilisateurs dans le graphique.

Le code pour les données dans le graphique ressemble maintenant à ceci:

<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>

Maintenant, le code JavaScript permet de trouver ces données à l'aide de jQuery et de les formater dans des tableaux que le logiciel de cartographie peut utiliser.

Bien que les données soient initialement masquées par CSS, j'ai également ajouté une option permettant aux utilisateurs de la visualiser:

chart with table data ( source )

3

Voici quelques options:

1) Mettez à jour vos balises Meta pour inclure les informations du graphique.

2) Écrivez du contenu qui explique le graphique en détail.

3) Utilisez quelque chose comme Swiftype pour votre recherche interne. Vous pouvez faire des requêtes personnalisées ou ajuster le poids d'éléments tels que titre, extrait, balises et bien plus encore.

Honnêtement, je voudrais juste faire tous les 3 ou au moins les deux premiers.

0
dasickle