¿Cómo configurar social meta tags para aplicaciones en AngularJs ó ReactJs con Nginx?


Si estas construyendo una aplicación en ReactJs ó AngularJs querrás que los usuarios puedan compartir  a través de redes sociales  con twitter card o facebook Card, Algo como esto:

Como se puede ver muchas redes sociales permiten leer mas que el titulo y la imagen de la pagina estándar. Esto se logra mediante el uso de meta tags especiales en la cabecera HTML

Sin embargo cuando se crea  una aplicación en AngularJs o ReactJs y cambiamos los meta tags de forma dinamica obtenemos el siguiente resultado:

La solución

La solución  básicamente es detectar el user-agent del lado del servidor para que cada vez que entre el bot de facebook, twitter o google a escanear nuestro enlace, en vez de mostrar nuestra aplicación web ejecutamos otra aplicación para generar los tags y compartir de forma correcta.

¿Como configurar nginx?

server{
    server_name exampledomain.com;
    listen              80;
    root /home/ubuntu/projects/myproject/build;
    index  index.html;
 
    location / {
        try_files $uri  /index.html;
    }
 
    ##todas las rutas que contengan la siguiente estructura ejemplo /herelss/single/postid198384324234234
    location ~ ^/[0-9a-z]+/single/[0-9a-z]+{
        try_files $uri @prerender;
    }
 
    location @prerender {
        set $prerender 0;
        ##detectamos los  agentes de google, facebook, twitter y slack
        if ($http_user_agent ~* "googlebot|facebookexternalhit|twitterbot|slackbot-linkexpanding" ) {
            set $prerender 1;
        }
 
        if ($args ~ "_escaped_fragment_|prerender=1") {
            set $prerender 1;
        }
        if ($http_user_agent ~ "Prerender") {
            set $prerender 1;
        }
        if ($prerender = 1){
            ## si detectamos el user-agent ejecutamos nuestra aplicacion "php,node.js, ruby, etc.."
            proxy_pass http://127.0.0.1:1339;
        }
        if ($prerender = 0){
            ##si no es el user agent mostramos nuestro archivo index.html
            rewrite .* /index.html break;
        }
    }
}

Gracias por leer y compartir este tutorial cuentame que te parecio y que podemos mejorar aqui algunos libros que me han ayudado a mejorar las buenas practicas a la hora de programar.