web-dev-qa-db-fra.com

Comment gérez-vous les métadonnées HTML dans les applications Web progressives (PWA)?

J'essaie de penser à la gestion des métadonnées dans la section head de ma html lors de l'écriture d'une application Web progressive (PWA). Par métadonnées, je veux dire:

Shell d'une seule page

Toutes les métadonnées ci-dessus sont différentes pour chaque page de l'application. Si vous utilisiez une seule application html, Shell perdrait tout ce qui précède. Certains pourraient indiquer que je me trompe ici et que les moteurs de recherche exécutent maintenant JavaScript. Si oui, comment ça marche? Est-ce que j'utiliserais AJAX pour récupérer la tête HTML à chaque navigation côté client? Cela fonctionnerait-il pour tous les moteurs de recherche? Quels sont les inconvénients?

Rendu côté serveur

Avec cette option, chaque page est rendue sur le serveur avec ses propres métadonnées personnalisées head. Vous pouvez utiliser la stratégie de mise en cache «Network First» ou «Fastest First». L'inconvénient de cette approche est que vous perdez certaines performances car votre application Shell n'est pas mise en cache côté client et ne se charge pas instantanément, ce qui donne à l'utilisateur quelque chose à regarder immédiatement.

Question?

Les deux options semblent opposées. Vous pouvez avoir des performances ou de bonnes métadonnées avec des améliorations de vos expériences de référencement et de partage de pages. Quel est le juste milieu? Y a-t-il une approche du meilleur des deux mondes?

Mettre à jour

J'ai trouvé this un problème lié à GitHub du projet Google Lighthouse.

htmlseometadatasingle-page-applicationprogressive-web-apps
18
Muhammad Rehan Saeed

Yup Google exécute javascript selon ce moteur de recherche land blog post. Toujours selon cette expérience pratique Google rend le contenu AJAX mais, contrairement aux pages rendues par le serveur, l'indexation du contenu dynamique prend plus de temps.

En ce qui concerne votre question, si vous effectuez un rendu côté serveur sur chaque page, le référencement sera efficace, mais l'application Shell ne sera pas mise en cache. Mais si vous construisez une application à une seule page, vous pouvez afficher votre première page côté serveur et laisser Javascript effectuer le travail sur le reste de la navigation. Vous pouvez ajouter des métadonnées dynamiquement aux pages de chaque navigation. Regardez comment walmart le gère.

Sinon, vous pouvez effectuer un appel AJAX dans chaque page pour charger les métadonnées, mais il faudra un certain temps pour que la page soit indexée ou vous devrez peut-être déclencher une nouvelle analyse à partir des outils Google Webmaster, mais cela ne se produit pas. t signifie que votre contenu ne va pas être indexé.

2
Dani Akash

Je pense que votre réponse concerne la manière dont les sites de médias sociaux et les moteurs de recherche consomment votre contenu. Bien que Google puisse analyser de nombreux sites de SPA, ils ont en quelque sorte suivi ces directives ces derniers mois. Vous pouvez créer un agent de service très complexe pour effectuer vos activités de «spa», mais vous feriez mieux de vous concentrer sur avoir votre contenu pré-rendu sur le serveur autant que possible pour les sites de référencement et les réseaux sociaux. Pensez-y de cette façon, la mise en cache du service worker peut remplacer ou rendre native la plupart de ce que nous avons fait avec les SPA 7 dernières années ou plus.

1
Chris Love