A que muchos programadores la primera vez que intentan compartir un link de su aplicación SPA (Single-page application) en alguna red social como puede ser FB se encontraron con el problema que el OG (Open Graph protocol) no funcionaba correctamente o simplemente devolvía la misma información siempre “Los metas del index.html”.
Hoy traigo un tutorial en el cual vamos a solucionar esto realizando una un pequeño script que nos servirá para renderizar la página dependiendo del robot “Crawler” que esté visitando la página.
El objetivo a cumplir es poder renderizar nuestra app JS desde el lado del servidor para ello utilizamos Puppeteer el cual es un paquete que básicamente es un navegador Chrome el cual podemos invocar a nivel de código, y posteriormente agarrar el HTML renderizado y retornarlo.
Comenzamos 💪
Vamos a realiza los pasos del diagrama en el código.
- Visitante. Se puede ver en acción cuando compartimos el link y FB comienza a solicitar los META.
Técnicamente es una petición GET que es igual al siguiente CURL
curl -v --compressed -H "Range: bytes=0-524288" -H "Connection: close" -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" "$URL"2. Detectar. Debemos configurar nuestro archivo de NGINX con el siguiente código. Podemos observar que nuestro archivo contiene un gran número de cabeceras que nos ayuda a detectar el origen del bot.
Observa la condición “$prerender” la cual si se cumple, lo que hace es agarrar la URL de la petición enviarla al servicio de Pre-render.
Ejemplo: http://example.com/post/mi-publicacion-de-ejemplo se concatenaria de la siguiente manera:
https://mi_url_prerender.com/render/http://example.com/post/mi-publicacion-de-ejemplo
2.1 Pre-render. Aquí entra en juego nuestro código.
Creamos un proyecto nuevo de NODE el cual va a requerir los siguientes paquetes.
Procedemos a instalar las dependencias con el comando npm install
Luego creamos un archivo index.js en donde tendremos la funcionalidad.
Ahora procedemos a correr nuestro proyecto con npm start y si todo está bien debemos obtener el siguiente mensaje.
Probemos! abrimos el navegador ingresamos http://localhost:3000/render y luego la URL de la página que queremos pre-renderizar.
Si obtenemos una respuesta el proceso se cumplió con éxito. En algunos casos los recursos no cargan pero no es inconveniente recuerda que esto lo visita un robot lo importante es que los meta tags existan.
Finalmente faltaría dos pasos , subir nuestro script node en un servidor de nuestro gusto.
En nuestro archivo de nginx anteriormente mencionado en el paso (2) colocar la url nuestro script.
MI_URL_SERVICIO_PUPPTER, debe ser remplazada por tu url del script node.
Quiero más
Por supuesto! gracias al apoyo que se ha conseguido por todos ustedes (comentando, suscribiéndote y compartiendo) se agregaron nuevos videos, en esta ocasión iniciamos el curso de testing en angular, curso de node, curso mongo y mucho más
Resultado final!
Aquí dejo unas capturas en varias redes sociales
Whatsapp:
Facebook:
Si tienes dudas puedes contactarme