Web Stories are coming to WordPress!

The first public beta is now available (for the adventurous) to install & test.

More info here: https://t.co/KYUwyF8h8j pic.twitter.com/55qKNX1c4s

— Paul Bakaus (@pbakaus) July 1, 2020

El plugin que ha desarrollado Google será de código abierto y está todavía en estado de beta, pero si quieres puedes descargarlo ya desde aquí y así instalarlo en tu web para empezar a trastear sus posibilidades.

¿Qué son las Google Web Stories?

Es un nuevo tipo de publicación heredado de plataformas como Instagram, Whatsapp o Tik Tok, con el que compartir lo que quieras de una forma rápida y muy dinámica. Puedes usar imágenes, vídeos y textos y combinarlos como quieras.

El aspecto esta enfocado totalmente a dispositivos móviles, con un formato vertical que se adapta perfectamente a las pantallas de los smartphones en el que sólo es necesario un golpe de dedo para ir avanzando o retrocediendo en las diferentes diapositivas de contenido.

Ventajas

• Una nueva forma de generar contenido.
• Perfectamente diseñado para mobile, el dispositivo más utilizado por la mayoría de usuarios para navegar.
• Al contar con tecnología AMP, las Web Stories cargan muy rápido y consumen muy pocos recursos.

Inconvenientes

• El contenido debe partirse en varias diapositivas y no puede contar con mucho texto.
• Al estar todavía en fase beta, se echan en falta algunos detalles o funciones.

¿Cómo hacer Web Stories en WordPress?

Una vez hemos descargado el archivo .zip de su web oficial, llamado ‘web-stories’, tendremos que instalarlo. Esto se hace desde Plugins > Añadir Nuevo. Escogemos el archivo desde la ventana que aparecerá, esperamos unos segundos, y después haremos clic en el botón para activarlo.

Automáticamente te aparecerá una nueva sección en el sidebar del panel de usuario, justo debajo de ‘Comentarios’, llamada ‘Stories’. Tiene tres subsecciones.

Dashboard

Desde aquí podrás ver las diferentes Web Stories que has ido creando hasta ahora. Podrás renombrarlas, duplicarlas, editarlas o eliminarlas con sólo desplegar el menú de cualquiera de ellas.

Puedes ver sólo las que tengas en borradores o las publicadas yendo a sus respectivas pestañas de navegación.

Si quieres empezar a crear una Web Story desde aquí, tienes también la opción de ‘Explore Templates’ desde donde podrás coger una plantilla ya diseñada como base para tu futura publicación.

All Stories

Esta sección te va a resultar muy familiar, ya que es exactamente igual que las de ‘Entradas’ o ‘Páginas’. Un listado con las diferentes Stories que has ido creando.

Como antes, podrás editarlas, eliminarlas, clonarlas… con un par de clics. También verás información como la fecha de creación o el autor o autora.

Add new

La sección más importante, por supuesto. Cuando hagas clic en ella para crear una nueva publicación aparecerá una nueva interfaz especialmente diseñada para crear Web Stories.

Si estás familiarizadx con los Stories de Instagram te resultará todo muy intuitivo ya que, a excepción de los Stickers y alguna función más (por ahora), el resto de elementos están también aquí. Básicamente puedes crear:

• Texto
• Imágenes
• Formas Geométricas

Y en cada uno de dichos elementos tienes opciones tales como color, transparencia, tipo de letra, tamaño, rotación… y un montón más de posibilidades de personalización con las que poder ajustar hasta el más mínimo detalle tus Stories en WordPress.

En realidad, muchas de estas opciones las podrás activar simplemente arrastrando el ratón tras seleccionar la esquina de cualquier elemento, de manera muy similar a como funcionan estas publicaciones en las apps mobile. Muy intuitivo.

Para hacerlo todo más rápido, han incluido un botón con el que clonar el Story que acabes de diseñar y añadirlo como nueva diapositiva en la misma publicación. Una manera muy fácil de hacer un hilo de Stories de manera rápida.

Así de bien luce el nuevo editor de Stories para WordPress

Cómo embeber los Stories en posts de WordPress

Por ahora si quieres embeberlo la solución pasa por poner un código como éste (cambiando la URL del ejemplo por la de tu Google Web Story:

<!– wp:web-stories/embed {«url»:»https://carlosortega.page/stories/story-de-ejemplo/»,»title»:»Tu Story para WordPress»,»poster»:»»} –>
<div class=»wp-block-web-stories-embed alignnone»><a href=»https://carlosortega.page/stories/story-de-ejemplo/»>Tu Story para WordPress</a></div>
<!– /wp:web-stories/embed –>

Aunque te recomiendo simplemente pegar la URL de la publicación sin más, y te generará un link como el siguiente al Story ¡Se ve realmente bien en móvil!

https://carlosortega.page/stories/palomitas/

Cosas a tener en cuenta para mejorar tus Web Stories

• Si pones un vídeo en el que alguien está hablando, es muy recomendable poner subtítulos.
• Si pones texto, el tamaño mínimo recomendado es de 24px
• No pongas demasiado texto por diapositiva, siempre puedes poner un enlace a un post con más información.
• Intenta no poner más de un enlace por Web Story.
• Puedes añadir marcado schema para datos estructurados en las Web Stories
• Haz el contenido lo más dinámico y atractivo posible, que sea muy visual y se mueva, pero con gusto.
• El editor tiene unas pequeñas marcas para delimitar la ‘zona de seguridad’, intenta que el contenido clave esté dentro.
• Aunque el número de slides puede ser el que quieras, recomiendan entre 10 y 30 como media por cada Web Story.

¿Cómo afectan al SEO las Web Stories?

Pues sinceramente, no lo sabemos.

Es un formato que hasta ahora era prácticamente exclusivo de las redes sociales, y estimar cómo va a impactar en los resultados de búsqueda de Google u otros buscadores es a día de hoy difícil.

Las Web Stories no cuentan con muchos de los elementos on-page necesarios como para apostar por ellas en una lista de resultados convencional. Pero esto cambia de un día para otro, y John Mu ya avisa:

https://twitter.com/JohnMu/status/1278388087396147203?s=20

Y según la documentación oficial, las Google Web Stories pueden aparecer en nuevos módulos de Google como:

• Resultado único
• Vista de cuadrícula
• Carrusel de Web Stories
• Google Imágenes
• Discover
• Carrusel de noticias destacadas
• Carrusel de hosts

Resultado único

Vista de cuadrícula

Carrusel de Web Stories

Google Imágenes

Discover

Así que os animo a todxs a probar las Stories en WordPress, porque en esta vida hay que probar nuevas experiencias. Y porque muchas veces, el que primero llega, coge los mejores sitios.

Os leo como siempre en los comentarios y nos vemos en el siguiente post, ¡saludos!

WEB PRESENTACIÓN DE GOOGLE WEB STORIES

https://google.github.io/web-stories-wp/beta/

SITE OFICIAL

https://amp.dev/about/stories/

DOCUMENTACIÓN OFICIAL SOBRE GOOGLE WEB STORIES

https://developers.google.com/search/docs/guides/enable-web-stories

https://amp.dev/documentation/guides-and-tutorials/start/create_successful_stories/

https://stories.google/

En mi caso hablé de qué mirar a la hora de contratar un hosting, las ventajas de utilizar una CDN, plugins que podemos instalar para mejorar diferentes aspectos a nivel WPO y cómo configurarlos, así como la mejor manera de optimizar las imágenes y algunas cosas más.

Si no pudiste verla y quieres echarle un ojo, la adjunto a continuación:

Como siempre, cualquier duda, comentario o sugerencia es más que bienvenida justo debajo, en la sección de comentarios

No hay más que ver la velocidad a la que se está descargando Rank Math desde su lanzamiento, aumentando mes a mes, para comprobar que realmente estamos ante una alternativa real a la hora de mejorar el SEO de nuestra web.

Descargas de Rank Math desde su lanzamiento

Análisis Rank Math

Rank Math es un plugin SEO para WordPress. Con él podremos configurar cosas como qué queremos indexar en Google y qué no, cómo lucirán nuestras URL’s en Google o analizar sobre la marcha si estamos trabajando correctamente nuestros posts para posicionar por determinada palabra clave.

WordPress no tiene por defecto apenas configuraciones para definir este tipo de cosas, por lo que instalar un plugin SEO es básicamente imprescindible si queremos optimizar el seo onpage de nuestras páginas.

Cómo descargar e instalar Rank Math

Podemos descargar el plugin desde dos sitios para después subirlo a través de FTP o WordPress:

• El repositorio de WordPress: https://wordpress.org/plugins/seo-by-rank-math/
• La página web del desarrollador: https://rankmath.com/wordpress/plugin/seo-suite/

También podemos instalarlo directamente desde la sección Plugins > Añadir nuevo en el backend de nuestro sitio WordPress. Bastará con poner ‘Rank Math’ en el buscador y hacer clic en ‘Instalar ahora’ cuando nos aparezca el plugin.

Puedes instalar Rank Math fácilmente desde el repositorio de WordPress

En cualquier caso, recuerda activarlo para poder utilizarlo. Es una tontería, pero a veces estos detalles se nos pasan a todos.

Cómo configurar Rank Math paso a paso

Una vez activado el plugin, necesitaremos crear una cuenta gratuita en la web de Rank Math para poder activarlo y empezar la configuración inicial.

El plugin nos avisará si detecta otro plugin SEO instalado para evitar conflictos

Una vez registrados, entraremos directamente en el configurador inicial para establecer las bases SEO de nuestra web antes de poder entrar en detalles. Es importante comentar que no es imprescindible utilizar este configurador ya que más adelante podremos modificar cualquier detalle desde el panel de control del plugin en WordPress. De todas maneras, es una buena manera de dejar las principales funciones establecidas para después poder entrar más en detalle si fuera necesario. Los diferentes pasos son:

Paso 1: Importación de configuraciones en otros plugins SEO

Para ponernos fácil el cambiar de plugin, Rank Math nos permite conservar todas las configuraciones que tuviéramos en el plugin SEO que utilizábamos hasta ahora (ejem, ejem Yoast) para no tener que empezar de cero.

El propio importador detectará qué plugin se estaba utilizando e importará todo con un simple clic. Después desactivará dicho plugin para evitar conflictos.

Paso 2: Características principales de nuestra web

En este segundo paso nos pedirá tres datos sencillos sobre el sitio: qué tipo de web es (blog, empresa, comunidad, ecommerce…), una imagen con nuestro logo y la imagen a mostrar por defecto al compartir nuestros artículos en redes sociales. En este último caso, si un post ya cuenta con su propia imagen destacada personalizada no se utilizará la predefinida.

Paso 3: Verificación y vinculación con Search Console

Para poder vincular la página con nuestro Search Console, y así contar con mayor información de datos con los que poder optimizar después la web, bastará con conseguir hacer clic en ‘Get Authoritation Code’. De esta manera escogeremos nuestra cuenta Gmail y después la cuenta de Search Console a vincular.

Paso 4: Activación y configuración de sitemap

En caso de no contar con algún otro plugin de generación de sitemaps, o de querer simplemente empezar a utilizar el de Rank Math, podrás hacerlo en este paso.

Bastará con activar la opción de Sitemaps. Para poder personalizarlo más, podremos configurar detalles como el crear un sitemap para imágenes.

También podremos decidir si enviamos (o no) las entradas, páginas o alguna taxonomía en concreto como categorías o etiquetas. La cantidad y nombre de las taxonomías disponibles variarán según la plantilla y plugins instalados en la web.

Paso 5: Configuraciones adicionales

En este (pen)último paso podremos tocar opciones bastante interesantes y que aportan un valor añadido al ser cosas que otros plugins SEO no permiten configurar.

Podremos decidir si indexamos o no páginas de categorías y etiquetas vacías, establecer todos los enlaces externos como ‘nofollow’ por defecto o decidir si queremos que estos se abran automáticamente en nuevas pestañas para evitar que los usuarios abandonen nuestra web al hacer clic en dichos enlaces.

Son detalles que pueden tocarse individualmente enlace por enlace pero muy de agradecer al permitirnos dejarlo todo automatizado en Rank Math con un par de opciones.

Paso 6: Finalizando las configuraciones iniciales (o no)

Y con esto tendríamos lista la configuración inicial de Rank Math. O no.

Si queremos afinar todavía un poco más, podremos hacer clic en el botón de Setup Advanced Options para habilitar un par de pasos más con nuevas configuraciones. Si por el contrario no quieres complicarte demasiado, puedes acceder al panel de control del plugin desde el botón de Return to dashboard. Escoge tu propia aventura.

Paso 7: Errores 404 y redirecciones

Wow, tenemos un alma aventurera por aquí. Si te has animado a llegar a este nuevo paso podrás activar o desactivar dos módulos extra de Rank Math. El monitorizador de errores 404 y el gestor de redirecciones. Hablaremos de ellos más adelante.

Paso 8: Miscelánea

Y ahora sí, el paso final. Aquí encontraremos opciones como autocompletar el ALT de las imágenes cuando no cuenten con uno o diferentes configuraciones para el marcado de datos estructurados de las entradas y páginas del sitio. Cosas que también veremos más en detalle después.

Características y funciones del plugin SEO Rank Math

Y ahora sí, llegamos a la chicha. Vamos a desgranar las diferentes secciones de Rank Math y detallaremos que podremos hacer con cada una de ellas para mejorar el SEO de nuestro WordPress.

Dashboard

En el dashboard encontraremos listados los diferentes módulos opcionales del plugin. Algunos vendrán ya activados por defecto o no en función de qué marcamos en el configurador inicial, mientras que otros como el de AMP vienen desactivados siempre por defecto.

Según si activamos unos u otros, dispondremos de más funcionalidades con las que afinar el SEO de la web, y veremos que aparecen nuevas secciones en el sidebar de nuestro WordPress.

Los módulos que podremos decidir activar serán:

• Monitorizador de 404’s
• AMP
• Contador de links
• SEO local y Knowledge Graph
• Redirecciones
• Rich Snippets (Datos estructurados)
• Administración de roles
• Search Console
• Análisis SEO
• Sitemaps
• WooCommerce

Podremos activar o desactivar módulos en función de lo que necesite nuestra web

Ajustes generales

En esta primera sección tendremos varias pestañas desde las que configurar multitud de parámetros SEO, son las siguientes:

Enlaces

Podremos definir si queremos eliminar el directorio de categoría de las URL’s, eliminar las stopwords de las mismas o determinar si los enlaces externos serán ‘nofollow’, entre otras cosas.

Imágenes

Aquí podemos escoger auto-rellenar los atributos ALT y TITLE de las imágenes que no cuenten con ellos. Podremos incluso establecer patrones para determinar cómo se generarán dichos atributos.

Migas de pan (Breadcrumbs)

Tenemos la opción de activar el marcado HTML de las migas de pan en nuestra web, así como un shortcode y código PHP con el que insertarlas a nivel de usuario.

Webmaster Tools

Desde esta pestaña podremos validar nuestro sitio en casi cualquier buscador con sólo introducir el código correspondiente. Podremos hacerlo en:

• Google
• Bing
• Baidu
• Alexa
• Yandex
• Pinterest
• Norton Safe Web

Editar robots.txt

Una manera sencilla de modificar nuestro archivo robots.txt sin salir de WordPress.

Editar .htaccess

Igualmente, también podremos editar nuestro .htaccess. Al ser un archivo delicado, Rank Math nos pedirás marcar una casilla de verificación mientras nos advierte de las consecuencias que puede traer hacer un mal uso de esta pestaña. Más vale prevenir que curar.

Monitorizador de 404’s

Desde esta pestaña configuraremos ciertas preferencias para qué URL’s rastrear y cuales no en la sección de monitorización que veremos más adelante.

Redirecciones

Nos permite establecer redirecciones automáticas así como alguna función más como el status code a devolver. Podremos gestionar este tema mucho mejor en su correspondiente sección.

Search Console

Si no lo has hecho en la configuración inicial, podrás vincular tu WordPress con su cuenta de Search Console desde aquí.

Otros

En esta última pestaña hay detalles como el permitir a Rank MAth hacer un seguimiento de como utilizas el plugin o alguna configuración sobre RSS.

Titles y metas

En esta sección configuraremos todo lo relacionado con el metadata de la web. Desde index o nofollows en URL’s, pasando por los titles y metadescriptions o el OpenGraph.

Configuraciones metadata generales

Desde aquí podremos establecer cosas tan generales como indexar o no la web al completo o establecer que los titles de todas las URL’s aparezcan siempre en mayúsculas.

SEO local

Para mejorar el SEO local, aquí podremos rellenar todos los campos relacionados con nuestra persona/negocio:

• Nombre
• Logo
• Web
• Email
• Dirección
• Teléfono
• …

Rank Math nos facilitará admás un shortcode por si queremos mostrar toda esa información en la web de manera sencilla.

Social metadata

Aquí indicaremos las URL’s de nuestros diferentes perfiles en redes sociales para vincularlos:

• Facebook
• Twitter
• Google+ (R.I.P.)
• Pinterest
• Google Places
• Yelp
• …

Página de inicio

En esta pestaña estableceremos todo lo relacionado con el metadata de la home de nuestra web.

Formato de archivos

Podremos definir la estructura de los titles y metadescriptions de las páginas de archivos, así como si queremos que indexen, tenga atributo follow…

Autores

Lo mismo pero para las páginas de archivo de los autores de los diferentes artículos de la web.

Páginas varias

Lo mismo también pero para páginas más difíciles de catalogar como URL’s de resultados de búsqueda, páginas de error 404 o paginaciones, por poner algunos ejemplos.

Taxonomías

Aquí podremos definir también la configuración metadata de las diferentes taxonomías que tengamos en nuestro sitio. Desde las obligadas entradas, páginas y medios al resto que pudieran aparecer.

Archivos

Lo mismo que en la anterior pestaña pero para las diferentes tipologías de archivos: de categorías, de etiquetas…

Ajustes de sitemap

Desde aquí podremos ajustar al milímetro nuestros sitemaps en caso de haber activado previamente dicho módulo en Rank Math.

• Es posible limitar el número de enlaces a almacenar por sitemap (generándose más sitemaps si fuera necesario para incluir todas las URL’s).
• Podemos crear un sitemap para las imágenes.
• Establecer hacer un ping automático a Google y Bing cada vez que un sitemap se actualice.
• Incluir o excluir determinadas taxonomías o archivos.
• Incluir o excluir determinados post o páginas concretos.

Sitemaps al gusto

Administración de roles

Un sencillo apartado desde el que podremos establecer a golpe de clic a qué funciones tendrán acceso los diferentes usuarios en base a su rol: administrador, editor, autor…

Monitorización de errores 404

Interesante sección en la que el plugin nos listará las diferentes URL’s que están dando error 404 (página no encontrada), así como el número de peticiones que se han hecho para verla y la hora de la última de ellas. De esta manera podemos detectar desde URL’s caidas a posibles ataques a nuestro sitio y poner remedio.

Tendremos la opción también de realizar acciones en lote como eliminar las URL’s listadas o bien redirigirlas en bloque.

Gestor de redirecciones

Buenísimo gestor de redirecciones desde el que marcar dónde redirigir qué. A diferencia de muchos plugins similares, Rank Math va más allá de la clásica 301 y nos abre todo un abanico de posibilidades como las 307 o las 410. Todo un punto a favor.

No sólo eso, si no que si eres de los míos y te da manía no tener todas tus redirecciones bien listaditas en el archivo .htaccess, este maravilloso plugin SEO te da la opción de exportar dichas redirecciones para poder añadirlas allí.

301, 302, 307, 410, 451… tú decides que status code asignar a cada URL

Vinculación con Search Console

Si habías vinculado tu WordPress con Search Console, en esta sección tendrás toda la información que necesites sin tener que abandonar la web. Muy útil.

Análisis SEO

Desde aquí podrás pedir que Rank Math haga un checkeo rápido de toda la web y te asigne una puntuación sobre 100. También te mostrará un listado con todos los puntos aprobados y los que necesitan mejorar.

Soy consciente del noindex general en la web, que no cunda el pánico

Google Indexing API

Indexa las URL’s de tu web prácticamente al momento gracias a la Indexing API de Google. Ten en cuenta que esta función fue creada (y debería ser utilizada) únicamente para URL’s de ofertas de trabajo o streamings. A día de hoy funciona con páginas de cualquier temática, pero no es para lo que fue creada y va en contra de las guidelines de Google. Hay que tenerlo en cuenta y a partir de ahí usarla o no valorando que puede haber cierto riesgo en ello.

Si finalmente decides probarla, tendrás que descargar el plugin desde aquí, ya que se instala de manera independiente al plugin principal de Rank Math.

Una vez instalado y activado, nos aparecerán dos nuevas secciones: Indexing API Settings e Indexing API Console.

Indexing API Settings

Aquí simplemente introduciremos el código de nuestra API una vez creada siguiendo los pasos del tutorial de Rank Math (prometo crear uno yo mismo en cuanto tenga algo de tiempo). De esta manera ya tendremos activa la función de indexación automática para los tipos de URL que queramos. Por defecto, entradas y páginas.

Bastará con publicar o actualizar cualquier URL de los tipos marcados para que el plugin la envíe a indexar mediante la API automáticamente.

Indexing API Console

Si aún así en cualquier momento queremos notificar a Google manualmente, podemos introducir hasta 100 URL’s en bloque para solicitar su indexación, actualizar el rastreo debido a que hemos realizado modificaciones o incluso pedir su desindexación de los resultados de búsqueda.

Importar y exportar configuración

En esta última sección el plugin nos permite configurar cómo exportar nuestra configuración actual para poder importarla en otros WordPress y al revés. Podremos exportar todo o sólo algunos módulos, para hacerlo todo más flexible.

También tendremos la posibilidad de realizar backups para tener una copia de seguridad por si queremos ponernos a experimentar con el plugin y la cosa se nos va de las manos…

Yoast vs Rank Math ¿Vale la pena cambiar Yoast SEO por Rank Math?

Si te has leido las más de 2000 palabras de este post y has visto todas las capturas, ahora puede que todavía te estés haciendo la pregunta del millón: ¿Tengo que cambiar Yoast por Rank Math como plugin SEO en mi WordPress?

Pues en mi modesta opinión y visto lo visto… SÍ.

Opinión final sobre Rank Math

Rank Math ofrece todo lo que ofrece a día de hoy Yoast y lo hace de manera más accesible. El plugin SEO por excelencia parece haberse ido enrevesando con los años, escondiendo demasiado ciertas funciones o complicando otras. Rank Math da la sensación de hacerlo todo más fácil.

No sólo eso, si no que añade más funciones, complementa con más detalles las que comparte con su competencia… y encima te ofrece total flexibilidad. Si no necesitas un módulo lo desactivas. Si prefieres usar otro plugin para algo en concreto, sin problema.

Eso sumado a lo fácil que te pone el realizar el cambio desde tu anterior plugin SEO con el importador automático de configuraciones, hacen para mí de Rank Math una apuesta segura y todo un soplo de aire fresco para el SEO en WordPress.

Así que, ahora que tienes toda la información… ¿Te animas a probarlo? ¿Tienes alguna duda o experiencia? Cuéntanoslo en los comentarios

Eso son muchos WordPress… muchas webs que van a poder convertirse en Progressive Web Apps (de las que ya comentamos sus muchas ventajas hace poco) de manera muy fácil y en menos de diez minutos. Para ello lo único que necesitaremos será instalar y configurar un par de plugins gratuitos.

PLUGINS NECESARIOS PARA QUE TU WORDPRESS SEA UNA PWA

Los dos plugins que usaremos son Super Progressive Web Apps y OneSignal. Vamos a pasar a verlos un poco en detalle y a ver cómo los tendremos que configurar.

SUPER PROGRESSIVE WEB APPS

Este plugin es básico para lo que queremos, ya que se encargará de hacer tu web instalable e instalará el service worker que se encargará de ejecutar todas las características propias de una Progressive Web App. Lo único que tendremos que hacer para dejarlo funcionando correctamente es instalarlo y acceder a la sección de WordPress que te aparecerá en SuperPWA > Settings. Aquí tendremos varios campos a rellenar:

Application Name

El nombre de la PWA. Generalmente querrás poner el nombre de tu blog/empresa.

Application Short Name

Aquí pondremos el nombre que queramos que aparezca bajo el icono una vez instalada la PWA en cualquier dispositivo. Sería el equivalente al nombre de las Apps. No debe ser muy largo.

Description

Una pequeña descripción sobre lo que trata tu web.

Application Icon

El icono que queramos que aparezca una vez instalada la PWA, así como en el faldón superior que aparece cuando miras con el smartphone cuántas aplicaciones tienes abiertas en ese momento. Puedes poner transparencias si es una imagen .png.

Splash Screen Icon

Cuando accedes a la PWA aparece una pantalla de carga inicial de X color con un icono. Aquí defines qué icono será. Generalmente se pone el mismo que en el apartado anterior.

Background Color

El color de fondo, obviamente.

Theme Color

Aquí puedes especificar el color principal de tu Progressive Web App. Suele utilizarse para el faldón superior que comentaba en el Application Icon y algún detallito más.

Start Page

La URL que servirá de página de inicio una vez accedas haciendo clic en el icono. Puedo o NO coincidir con la home por defecto de la web. En Digital Growth por ejemplo, no es coincide, ya que la PWA utiliza como URL de inicio nuestra página del blog.

Offline Page

Aquí tenemos que poner la URL que queremos que cargue cuando el usuario no tiene conexión a Internet ni acceso a la versión cacheada de la Start Page.

Orientation

Por último, en este campo definimos si queremos que la PWA cargue siempre en vertical u horizontal. También puedes dejarlo a la elección del usuario.

Una vez rellenemos toda la información, podremos comprobar que todo está correctamente configurado con los checks que te mostrará el propio plugin.

IMPORTANTE: Recuerda que es obligatorio que la web esté montada sobre HTTPS para que la PWA sea válida.

Puedes descargar el plugin ‘Super Progressive Web Apps’ desde aquí:
https://wordpress.org/plugins/super-progressive-web-apps/

ONESIGNAL

Hay una funcionalidad típica de las PWA que el plugin anterior no tiene, y son las notificaciones Push. De hecho no lo tiene porque como los mismos desarrolladores comentan, vieron que ya había un claro referente en este tema con OneSignal, con lo que prefirieron hacer su plugin totalmente compatible a ellos en lugar de implementar de cera dicha característica.

Así pues, éste será el segundo plugin que necesitaremos. Lo instalamos y accedemos a la nueva sección que veremos en el sidebar de nuestro WordPress: OneSignal Push. Nos pedirá dar un par de pasos antes de poder configurar nada:

• Darnos de alta como usuarios en su página web, donde entre otras cosas tendremos el panel de control desde el que podremos ver cuántos seguidores tenemos o la efectividad de nuestras notificaciones.

• Crear las Web Push App para los diferentes sistemas que quieras. Esto es necesario para que el plugin ‘tenga permiso’ para enviar las notificaciones a los usuarios. Las podrás crear desde la propia web de OneSignal, una vez hayas iniciado sesión.

Una vez hecho esto tendremos que ir a ‘OneSignal Push’ en nuestro WordPress y poner también las ID y API en la pestaña ‘Configuration’ (si pones el ratón sobre el símbolo ‘?’ verás dónde encontrarlas de forma muy sencilla). Tambien tendremos que confirmar que nuestra web está en HTTPS.

Para terminar, en los campos siguientes el plugin nos dará algunas opciones a la hora de qué mensajes mostrar al usuario, a qué URL irán al hacer clic o qué imagen aparecerá en sus dispositivos al recibir la notificación.

IMPORTANTE: Este plugin sólo enviará notificaciones push cuando publiquemos un nuevo post en la web. Si lo que queremos es poder enviarles notificaciones en momentos determinados como promociones o cualquier otra cosa ajena al blog necesitaremos instalar también el plugin OneSignal Sender.

Puedes descargar el plugin ‘OneSignal’ desde aquí:
https://es.wordpress.org/plugins/onesignal-free-web-push-notifications/

CÓMO CONFIRMAR QUE NUESTRA WEB ES UNA PWA

Ahora que hemos instalado y configurado todo, queremos asegurarnos de qué todo funciona como debería. Para eso usaremos la herramienta de auditoría de Google: Lighthouse. Tiene una extensión para Chrome, pero no es realmente necesaria al ser una herramienta integrada en el propio navegador.

Entra a tu web (una vez seguidos todos los pasos de este post) y con el botón derecho haz clic y ves a ‘Inspeccionar’. Una vez se abra el panel que verás, ves a la pestaña ‘Audits’, haz clic en el botón ‘Perform an audit…’ y marca únicamente la casilla de ‘Progressive Web App’. Finalmente ‘Run audit’ y… esperamos.

Para cuando acabe debería mostrarte la puntuación sobre 100, los procesos no superados y los que sí. Algo como esto:

Bueno, parece ser que tenemos por ahí una URL en HTTP que nos está incordiando un poco… pero ¡eh! ¡no está mal! 82/100 

Y así es como podemos subir el nivel de nuestra web en WordPress adaptándola a las nuevas tendencias, en concreto a las Progressive Web Apps. Ah, este tipo de webs no son incompatibles con otras mejoras como AMP, al contrario, si las combinas todavía conseguirás mejores resultados.

Como siempre, cualquier duda, comentario o sugerencia podéis escribir en la sección de comentarios o comentármelo por Twitter. ¡Hasta la próxima!

QUÉ ES UNA PROGRESSIVE WEB APP

Las Progressive Web Apps, más cariñosamente conocidas como PWA’s, son sitios que combinan lo mejor de las webs y lo mejor de las apps. Más adelante veremos las ventajas que supone a la hora de navegar por ella. Pero sobretodo, para Google, una PWA debe siempre poder ser descrita con estas tres características fundamentales.

FIABLE

Una Progressive Web App debe ser accesible, total o parcialmente, aún y sin conexión. El usuario nunca tiene que ver a nuestro querido y odiado downasaur. Es sin duda una de las principales ventajas de este tipo de web.

Nuestro querido Downosaur se encamina a una nueva extinción…

RÁPIDA

Debe ser rápida, cargar casi al instante, dando una gran sensación de inmediatez. Además una PWA responde rápido y con suavidad a cualquier interacción por parte de usuario: un click en un enlace, en un botón, un scroll…

CAUTIVADORA

También tiene que sentirse nativa, tener lo que se llama el ‘look & feel’ de una app. Hemos de sentir al navegar por ella que es algo desarrollado desde un principio para mobile, sin elementos que nos saquen de esta inmersión como barras de navegador, cursores, webs cortadas por un lado o letras demasiado pequeñas.

VENTAJAS DE LAS PROGRESSIVE WEB APPS

Antes decíamos que una PWA coge conceptos y características de las apps, lo que le da algunos ‘superpoderes’ que hasta ahora no eran posibles en una web mobile.

INSTALABLE

Podremos instalar la web en nuestro smartphone, añadiendo su icono y nombre en el escritorio como si se tratara de una app más. Esto mejorará tanto la visibilidad como la inmediatez de acceso en futuras visitas. Además al tratarse realmente de una web, no necesita ocupar espacio en el propio dispositivo y se instalará casi al instante.

SE ACTUALIZA AUTOMÁTICAMENTE

Tampoco será necesario estar pendiente de futuras actualizaciones para descargarlas. La propia PWA se encargará de ver qué versión tienes y de actualizar automáticamente y en un segundo planocualquier nuevo elemento o modificación que haya podido haber.

ACCESIBLE SIN CONEXIÓN

Gracias a las funciones de pre-cacheo de las Progressive Web App, la navegación es siempre posible (y rápida) independientemente de la calidad de conexión en ese momento. Se acabó el quedarnos sin poder usar la web al entrar en un túnel o caerse Internet.

NOTIFICACIONES PUSH

Una de las funciones más llamativas y claramente heredada de las apps, la posibilidad de mandar notificaciones Push al smartphone aún y cuando estos no tienen la PWA abierta. Es una manera de poder atraer la atención del usuario para que vuelva a navegar por nuestra web.

NATIVA

Como ya hemos comentado, al disponer de icono en el escritorio, cargar con un splashscreen, mostrarse a pantalla completa y sin ningún tipo de elemento de navegador… todo esto da una sensación de app enorme, de ser algo desarrollado nativamente para mobile.

ENLAZABLE

Otra ventaja frente a las apps ya que, al tratarse de una web, todas las URL’s son perfectamente enlazables y fáciles de compartir.

Sensación al utilizar una PWA

ELEMENTOS PRINCIPALES

Vale, ahora ya sabemos qué funciones principales tiene una Progressive Web App pero ¿cómo es posible que haga esas cosas? Bueno, vamos a ver los diferentes actores que encontramos en cualquier PWA. Algunos imprescindibles y otros más optativos.

APPLICATION MANIFEST

Imprescidible. El Application Manifest es un archivo en formato .json en el que definiremos muchas de las características de aspecto visual y de usabilidad de la PWA. Por ejemplo, podremos especificar cosas como:

• El nombre de la PWA
• El icono que se mostrará cuando sea instalada
• La página de inicio una vez hagamos clic en el icono
• El color principal
• Si preferimos que sea visualizada en vertical u horizontal
• Si queremos que se vean más o menos elementos del navegador al navegar por ella
• Una breve descripción sobre qué trata la web
• El idioma principal

Este archivo se llamará generalmente manifest.json (aunque puedes ponerle otro nombre) y deberá estar alojado en la raíz del dominio si lo que queremos es que toda la web sea una Progressive Web App. Si por el contrario sólo queremos que una parte de la página sea PWA, el App Manifest debería alojarse en la raíz del directorio escogido.

SERVICE WORKER

Imprescindible. El gran motor de las PWA y motivo principal de la mayoría de sus características. Un Service Worker es un JavaScript peculiar, ya que no actúa únicamente en una URL, sino en toda la web. Una vez entramos en la Progressive Web App, se registra y activa, quedando activo entre el usuario y el servidor siempre en segundo plano, incluso aunque cerremos la web.

Al estar siempre activo, reacciona a los diferentes eventos que le llegan tanto del servidor como del usuario. Estos eventos pueden ser principalmente de tres tipos.

• Fetch: Peticiones del usuario para descargar elementos del servidor.
• Push: Peticiones del servidor para enviar notificaciones al usuario.
• Sync: Sincronización de datos.

Según reciba peticiones de uno u otro evento, irá activando diferentes funciones: cacheo, sincronización en segundo plano, notificaciones push, entrega de la versión cacheada de la web si el usuario no tiene conexión en el momento que hace las peticiones…

Importante tener en cuenta que, debido a que los Service Worker capturan mucha y muy comprometida información de esta comunicación entre el navegador y el servidor, la navegación en una Progressive Web App debe ser siempre bajo HTTPS. Necesitamos una navegación cifrada y segura para evitar problemas.

DISEÑO RESPONSIVE

Imprescindible. Hoy en día parece ya algo de cajón, pero una web tiene que poder visualizarse correctamente en cualquier tipo de dispositivo, sea cual sea sus medidas y resolución. Por tanto, el diseño responsive es básico, más si tenemos en cuenta la naturaleza mobile de una PWA.

Se ha hablado mucho y muy bien de cómo y por qué de este tema, con lo que no diremos mucho más aquí.

API DE GEOLOCALIZACIÓN

API necesaria si queremos poder pedir acceso a la geolocalización del usuario. También para esto necesitaremos tener una web segura en HTTPS.

API MEDIA

Por último, con esta otra API tendríamos acceso a las funciones nativas del dispositivo como pueden ser la cámara o el micrófono.

¿CÓMO INSTALAR UNA PWA EN EL MÓVIL?

Para instalar en la pantalla de nuestro smartphone una Progressive Web App, los usuarios tendrán dos formas de hacerlo.

A TRAVÉS DEL BOTÓN QUE TE MOSTRARÁ EL NAVEGADOR

La manera más directa y que facilitará que tus usuarios se instalen la web, aunque para que el navegador muestre este faldón o ‘prompt’ de instalación, la PWA tendrá que cumplir unos mínimos:

• Un manifest.json con al menos el nombre, nombre corto, página de inicio e icono de 192×192.
• Un service worker registrado en la web.
• Navegación segura a través de HTTPS.
• Recibir al menos dos visitas con un mínimo de 5 minutos de espacio entre ellas.

Si cumplimos estos requisitos veremos algo así:

A TRAVÉS DEL MENÚ DEL NAVEGADOR

Si en cambio no cumplimos esos mínimos o el usuario no acepto instalar la PWA cuando el navegador le mostró el aviso, la opción que nos queda es hacerlo desde el propio menú del navegador. Dando al icono de los tres puntitos y después a ‘Añadir a pantalla de inicio’.

NAVEGADORES COMPATIBLES

En la siguiente imagen puedes ver la lista de compatibilidad de los diferentes navegadores con los Service Workers, aunque si necesitas más información sobre funciones específicas puedas mirar aquí.

CONCLUSIONES Y EJEMPLOS

En resumidas cuentas, las PWA’s parecen haber llegado para quedarse, ya que parecen un paso muy lógico a la hora de seguir evolucionando las webs hacia el mundo mobile. En 2014 fue el gran momento de adaptarse, parece que 2018 será el de mimetizarse casi completamente gracias a las Progressive Web Apps y las mejoras que imaginamos irán añadiéndose a lo largo de los próximos meses. Estaremos atentos para contároslo todo.

Si queréis ver ejemplos de páginas que ya se han pasado a PWA, podéis ver un buen puñado de ellos en la web de pwa.rocks.

Las páginas de error 404 son las que te aparecen de manera automática cuando por diferentes motivos la URL a la que habías intentado acceder tiene alguno de los siguientes problemas:

• Es una URL que ya no existe.
• Es una URL que nunca existió.
• Es una URL que ha cambiado.
• No estás escribiendo bien la URL.

Es importante intentar tener los menos errores 404 posibles, por diferentes motivos. El primero y más obvio es que el usuario se encuentra de golpe frustrado y ‘perdido’ en nuestra web, con lo que lo más fácil será que la abandone. Y aquí es donde viene el problema para nosotros, ya que a nivel SEO ese nivel de abandonos aumenta el porcentaje de rebote de la web, empeorando nuestro posicionamiento a medio plazo.

Aqui te dejamos información útil que Google nos proporciona para y porque evitar errores 404.

Así que, por si alguna vez nos encontramos con errores de este tipo, cosa muy habitual en mayor o menor medida, lo mejor es configurar una página de error 404 amigable y que incite al usuario a seguir navegando por nuestra web. ¿Cómo? estos podrían ser buenas ideas a tener en cuenta:

Vigila que esté en el mismo idioma que el resto de la web

Una cosa muy lógica pero que suele pasar. El motivo es que por ignorancia o pereza no se optimiza la página de error 404 y se deja la que viene por defecto con la plantilla de WordPress o similar. Plantillas que suelen venir por defecto en inglés y con una página 404 bastante precaria. Hay que vigilar esto.

Así pues, antes de nada, asegurarnos que la página de error 404 está en el idioma que toca.

Intenta que el usuario no se ‘asuste’

Casi el punto más importante ya que es el que evitará en gran medida el abandono de la web. Seguramente muchas veces navegando por ahí te has encontrado con algo muy parecido a esto:

Y muy probablemente tu reacción habrá sigo la de pensar que la web está fallando, o que simplemente no tienes ganas de preguntarte por qué no va, y te vas a otra página. Justamente esto es lo que debemos intentar evitar.

Elimina cualquier palabra de ERROR en la página con letras gigantescas, números 404 que podrían leerse desde el lavabo, exclamaciones y demás síntomas de alarma. Explica de manera natural que la página que busca parece que no está disponible y que puede deberse a X o Y motivos y listo. Sin mayores aspavientos ni elementos que puedan espantar al usuario.

Intenta reconducir nuevamente al usuario dentro de la web

Otro punto clave. Hemos conseguido (con el apartado anterior) que el usuario no salga corriendo, ahora hemos de invitarle a seguir navegando por nuestra web.

Una idea para lograrlo puede ser por ejemplo añadir accesos claros y bien visibles a las secciones más importantes de la página, como categorías principales si hablamos de un e-commerce o los diferentes servicios que ofrece tu empresa. Es algo bastante genérico y que muy posiblemente le sirva como punto de reenganche al usuario para intentar encontrar lo que buscaba.

Innova. Sorprende. Haz una página de error 404 diferente.

Aprovecha que es una página ‘diferente’ dentro de tu web, casi secreta, y da rienda suelta a tu imaginación. Una página de error 404 simpática o diferente evitará en gran parte esa sensación de frustración del usuario al no encontrar lo que buscaba, y nos dará unos instantes preciosos para intentar evitar su abandono.

En resumen: capta la atención del usuario, evita alarmarle e intenta reconducirlo de nuevo a otra sección de la página. Estos tendrían que ser los pilares fundamentales en los que basar una buena página de error 404.

Como siempre, espero que te haya sido útil el artículo y, si tienes cualquier duda, sugerencia o comentario, nos leemos más abajo ¡hasta pronto!