samples pwa ejemplos codelab apps app html seo metadata single-page-application progressive-web-apps

html - pwa - progressive web apps samples



¿Cómo maneja los metadatos HTML en Progressive Web Apps(PWA)? (3)

Creo que su respuesta se refiere a cómo los sitios de redes sociales y las arañas de los motores de búsqueda consumen su contenido. Si bien Google puede analizar muchos sitios de SPA, en los últimos meses se les ha dado seguimiento a esas pautas. Puede crear un trabajador de servicios muy complejo para realizar sus actividades de ''spa'', pero se le da un mejor servicio al concentrarse en que su contenido sea pre-renderizado en el servidor tanto como sea posible para los sitios de SEO y redes sociales. Piénselo de esta manera, el almacenamiento en caché de los trabajadores de servicios puede reemplazar o hacer nativa la mayor parte de lo que hemos estado haciendo con los SPA en los últimos 7 años.

Estoy tratando de entender cómo manejar los metadatos en la sección principal de mi html al escribir una aplicación web progresiva (PWA). Por metadatos, quiero decir:

Shell de aplicación de una sola página

Todos los metadatos anteriores son diferentes para cada página en la aplicación. El uso de un único shell de aplicación html perdería todo lo anterior. Puede haber alguna indicación de que estoy equivocado here y que los motores de búsqueda ahora ejecutan JavaScript. Si es así, ¿cómo funciona esto? ¿Utilizaría AJAX para recuperar el encabezado HTML en cada navegación del lado del cliente? ¿Funcionaría esto para todos los motores de búsqueda? ¿Cuales son las desventajas?

Representación del lado del servidor

Con esta opción, cada página se representa en el servidor con sus propios metadatos personalizados. Podría utilizar la estrategia de almacenamiento en caché "Primero la red" o "Más rápido primero". La desventaja de este enfoque es que pierde algo de rendimiento porque el shell de su aplicación no se almacena en caché en el lado del cliente y no se carga al instante, lo que le da al usuario algo que ver de inmediato.

¿Pregunta?

Ambas opciones parecen opuestas entre sí. Puede tener un buen rendimiento o buenos metadatos con mejoras en sus experiencias de SEO y para compartir páginas. ¿Cuál es el término medio feliz? ¿Hay un enfoque mejor de ambos mundos?

Actualizar

Encontré this problema relacionado con GitHub del proyecto faro de Google.

Por favor, use la etiqueta meta de abajo para Progressive Web App (PWA), está funcionando para mí.

Por favor agregue metas debajo de su archivo de índice.

<meta name="full-screen" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-title" content="Your App Name"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

También por favor agregue el icono de la aplicación para Iphone:

<link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicon/57x57.png" /> <link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicon/72x72.png" /> <link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicon/114x114.png" /> <link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicon/144x144.png" /> <link rel="apple-touch-icon" href="assets/img/favicon/92x92.png" />

Después de agregar estas metas, abra la URL de su sitio en safari y seleccione Agregar a la pantalla de inicio.

Se mostrará su sitio web en la aplicación con título e icono de la aplicación.

Sí, Google ejecuta javascript de acuerdo con esta publicación de blog de búsqueda de tierra . También de acuerdo con este experimento práctico, Google hace contenido AJAX, pero a diferencia de las páginas procesadas por el servidor, lleva más tiempo indexar el contenido dinámico.

Con respecto a su pregunta, si realiza la representación del lado del servidor en todas y cada una de las páginas, entonces el SEO será bueno, pero el shell de la aplicación no se almacenará en caché. Pero si está creando una aplicación de una sola página, puede renderizar su primera página en Server Side y dejar que Javascript haga el trabajo en el resto de la navegación. Puede agregar metadatos dinámicamente a las páginas en cada navegación. Mira cómo lo trata walmart .

De lo contrario, puede hacer una llamada AJAX en cada página para cargar metadatos, pero llevará un tiempo que la página se indexe o puede que tenga que activar un nuevo rastreo desde las herramientas para webmasters de Google, pero eso no significa que su contenido no sea va a ser indexado.