Utiliser PushState et Precomposition
La façon actuelle (2015) de procéder consiste à utiliser la méthode JavaScript pushState.
PushState modifie l'URL dans la barre de navigation supérieure sans recharger la page. Supposons que vous ayez une page contenant des onglets. Les onglets masquent et affichent le contenu, et le contenu est inséré dynamiquement, soit en utilisant AJAX, soit en définissant simplement display: none et display: block pour masquer et afficher le contenu d'onglet correct.
Lorsque les onglets sont cliqués, utilisez pushState pour mettre à jour l'URL dans la barre d'adresse. Lorsque la page est rendue, utilisez la valeur dans la barre d'adresse pour déterminer l'onglet à afficher. Le routage angulaire le fera automatiquement pour vous.
Précomposition
Il existe deux façons d'accéder à une application de page unique (SPA) PushState
- Via PushState, où l'utilisateur clique sur un lien PushState et le contenu est AJAXé.
- En appuyant directement sur l'URL.
Le coup initial sur le site impliquera de frapper l'URL directement. Les hits suivants seront simplement AJAX dans le contenu lorsque le PushState met à jour l'URL.
Les robots collectent des liens à partir d'une page, puis les ajoutent à une file d'attente pour un traitement ultérieur. Cela signifie que pour un robot, chaque hit sur le serveur est un hit direct, ils ne naviguent pas via Pushstate.
La précomposition regroupe la charge utile initiale dans la première réponse du serveur, éventuellement en tant qu'objet JSON. Cela permet au moteur de recherche de rendre la page sans exécuter l'appel AJAX.
Il existe des preuves suggérant que Google pourrait ne pas exécuter les demandes AJAX. Plus à ce sujet ici:
https://web.archive.org/web/20160318211223/http://www.analog-ni.co/precomposing-a-spa-may-become-the-holy-grail-to-seo
Les moteurs de recherche peuvent lire et exécuter JavaScript
Google a été en mesure d'analyser JavaScript depuis un certain temps maintenant, c'est pourquoi ils ont initialement développé Chrome, pour agir comme un navigateur sans tête complet pour l'araignée Google. Si un lien a un attribut href valide, la nouvelle URL peut être indexée. Il n'y a plus rien à faire.
Si un clic sur un lien déclenche en outre un appel pushState, l'utilisateur peut naviguer sur le site via PushState.
Prise en charge des moteurs de recherche pour les URL PushState
PushState est actuellement pris en charge par Google et Bing.
Google
Voici Matt Cutts répondant à la question de Paul Irish sur PushState for SEO:
http://youtu.be/yiAF9VdvRPw
Voici Google qui annonce la prise en charge complète de JavaScript pour l'araignée:
http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html
Le résultat est que Google prend en charge PushState et indexera les URL PushState.
Voir aussi la récupération des outils Google pour les webmasters en tant que Googlebot. Vous verrez que votre JavaScript (y compris Angular) est exécuté.
Bing
Voici l'annonce de Bing de la prise en charge des jolies URL PushState datée de mars 2013:
http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/
N'utilisez pas HashBangs #!
Les URL Hashbang étaient un vilain point d'arrêt obligeant le développeur à fournir une version pré-rendue du site à un endroit spécial. Ils fonctionnent toujours, mais vous n'avez pas besoin de les utiliser.
Les URL Hashbang ressemblent à ceci:
domain.com/#!path/to/resource
Cela serait associé à une méta-étiquette comme celle-ci:
<meta name="fragment" content="!">
Google ne les indexera pas sous cette forme, mais extraira une version statique du site de l'URL _escaped_fragments_ et l'indexera.
Les URL Pushstate ressemblent à n'importe quelle URL ordinaire:
domain.com/path/to/resource
La différence est qu'Angular les gère pour vous en interceptant la modification de document.location en les traitant en JavaScript.
Si vous souhaitez utiliser les URL PushState (et vous le faites probablement), supprimez toutes les anciennes URL et métabalises de style de hachage et activez simplement le mode HTML5 dans votre bloc de configuration.
Tester votre site
Les outils Google pour les webmasters contiennent désormais un outil qui vous permettra de récupérer une URL en tant que google et de rendre JavaScript comme Google le rend.
https://www.google.com/webmasters/tools/googlebot-fetch
Génération d'URL PushState en angulaire
Pour générer de vraies URL en angulaire plutôt qu'en # préfixées, définissez le mode HTML5 sur votre objet $ locationProvider.
$locationProvider.html5Mode(true);
Du côté serveur
Puisque vous utilisez de vraies URL, vous devrez vous assurer que le même modèle (plus du contenu précomposé) est envoyé par votre serveur pour toutes les URL valides. La manière de procéder variera en fonction de l'architecture de votre serveur.
Plan du site
Votre application peut utiliser des formes de navigation inhabituelles, par exemple le survol ou le défilement. Pour garantir que Google est en mesure de gérer votre application, je suggérerais probablement de créer un plan du site, une simple liste de toutes les URL auxquelles votre application répond. Vous pouvez le placer à l'emplacement par défaut (/ sitemap ou /sitemap.xml), ou en informer Google à l'aide des outils pour les webmasters.
C'est quand même une bonne idée d'avoir un plan du site.
Prise en charge du navigateur
Pushstate fonctionne dans IE10. Dans les navigateurs plus anciens, Angular retombera automatiquement sur les URL de style de hachage
Une page de démonstration
Le contenu suivant est rendu à l'aide d'une URL pushstate avec précomposition:
http://html5.gingerhost.com/london
Comme on peut le vérifier, sur ce lien , le contenu est indexé et apparaît dans Google.
Desservant les codes d'état des en-têtes 404 et 301
Étant donné que le moteur de recherche frappera toujours votre serveur pour chaque demande, vous pouvez diffuser des codes d'état d'en-tête depuis votre serveur et vous attendre à ce que Google les voie.