Disons que j'ai une page /pets
avec 4 onglets dessus:
L'onglet Tous affiche tous les animaux domestiques au chargement de la page .
Chacun des 3 autres onglets contient une liste de chiens/chats/hiboux, respectivement - chargés d'Ajax en cliquant. Chaque onglet possède également un bouton "Charger plus" pour obtenir les N prochains résultats.
La page actuellement indexée par Google est /pets
. Ce que je voudrais, c’est de garder cette page d’aperçu avec les onglets, mais aussi d’assurer l’indexation des 3 pages d’animaux de compagnie spécifiques (surtout parce qu’elles comportent des liens vers des pages de détail des animaux de compagnie).
Ce que je pensais de:
/pets
et de simplement lier les 3 onglets à différentes URL: /pets/dogs
, /pets/cats
et /pets/owls
, mais son affichage ne semble pas convivial. onglets, qui sont en fait des liens./pets
avec les onglets et Ajax, mais aussi avoir des pages dédiées (voir le point 1) pour les 3 types d'animaux domestiques. Ensuite, je créerais peut-être une page supplémentaire "À propos de" avec des liens internes vers /pets/dogs
, /pets/cats
et /pets/owls
, afin qu'ils puissent être explorés. Dans ce cas, cependant, je ne suis pas sûr qu'il existe un danger de dupliquer le contenu.Je ne voudrais pas sacrifier l'expérience utilisateur pour le référencement, ce qui complique la recherche d'une solution.
Laquelle des 2 options ci-dessus vous semble meilleure?
Ou peut-être, si vous avez de l'expérience avec de telles pages à onglets: Quelle autre solution proposeriez-vous?
C'est un problème très courant auquel nous sommes confrontés ces jours-ci. Ceci peut être facilement résolu comme suit:
Si vous voulez avoir la même page/pets mais aussi conduire/pets/cats,/pets/dog to index séparément, alors, idéalement, ils devraient exister séparément, c'est-à-dire que s'ils sont ouverts par un client http avec une URL distincte, ils devrait répondre de manière indépendante.
Le contenu renseigné via ajax ou via backend devrait être identique, c'est-à-dire que quelqu'un ouvrant/pets/dogs dans les résultats de la recherche ou en cliquant sur un onglet de/pets (via ajax) doit être identique pour éviter les pénalités liées à la recherche et mieux indexation.
C'est juste que, un comportement d'application plus convivial ou une seule page est simulé sans perdre l'indexation seo pour ce contenu
Pour que cela se produise w.r.t. robot d'exploration et pour vous d'avoir une seule page de gestion qui effectue les opérations suivantes:
modifications du backend
1) Au niveau de l’application, configurez votre serveur pour diriger les appels:/pets /,/pets/dogs,/pets/cats. . . sur une seule fonction
2) Cette fonction enverra les informations/données requises dans la même vue (de l'onglet analysé) et l'activera.
Exemple ,
si/pets/est reçu, alors le serveur doit envoyer le contenu de/all à afficher pour le rendre explorable et définir tout onglet comme onglet actif
si/pets/dogs est reçu, alors le serveur doit envoyer le contenu de/all/dogs à afficher pour le rendre explorable et définir l'onglet chien comme onglet actif
. .
modifications du front-end
Désormais, si l'utilisateur sélectionne un onglet dans Front-end, vous devez l'ajouter dans l'historique et activer les pixels d'analyse nécessaires pour suivre les vues de page séparées (vues de page virtuelles).
if(history && history.pushState)
{
var pageUrl = $("#page-"+page).attr("href");
pageUrl = pageUrl.replace("https://","//").replace("http://","//");
history.pushState(null,null,pageUrl);
}
Et modifiez également le contenu de la page via ajax et définissez l'onglet comme onglet sélectionné.
Maintenant, même si l'utilisateur actualise la page, son état doit rester identique. Voici comment fonctionne ce concept.