Angular 4: actualiza las metaetiquetas dinámicamente para Facebook(gráfico abierto)

facebook-graph-api facebook-opengraph

Question

¿Cómo agregamos / actualizamos metaetiquetas dinámicamente para que sean seleccionadas por el diálogo de compartir Facebook / Whatsapp?

Actualicé mi aplicación angular 2 a angular 4 para usar el servicio Meta para agregar / actualizar metaetiquetas dinámicamente una vez que obtenemos los datos en el componente de la API.

Hasta ahora en mi componente, tengo

this.metaService.updateTag({ property: ''og:title'', content: pageTitle });
this.metaService.updateTag({ property: ''og:url'', ''www.domain.com/page'' });
this.metaService.updateTag({ property: ''og:image'', content: coverUrl, itemprop: ''image'' });
this.metaService.updateTag({ property: ''og:image:url'', content: coverUrl, itemprop: ''image'' });
this.metaService.updateTag({ property: ''og:image:type'', content: ''image/png'' });

Estoy usando updateTag porque ya he agregado etiquetas estáticas con valores predeterminados. Este código actualiza con éxito los valores de las metaetiquetas cuando los inspecciono.

Sé que tiene sentido que las herramientas de depuración de Facebook / Whatsapp no ​​ejecuten javascript, por lo que probablemente nunca se ejecutarán en su entorno.

Estoy usando https://developers.facebook.com/tools/debug/ y siempre recoge los valores de etiqueta predeterminados, lo que tiene sentido.

Mi pregunta es, ¿cuál es el camino para que Facebook / Whatsapp recoja los valores de etiqueta actualizados dinámicamente? Estoy usando Angular 4 y cargando todos los datos a través de llamadas API, por lo que no es posible obtener ningún tipo de datos antes de que se cargue la página y se ejecute el script.

Answer 1

¡Open Graph OG Tags debe estar dentro del código fuente!

Debe proporcionar una página html estática que contenga las etiquetas de gráficos abiertos como og: image og: title y og: description en el código fuente html, ya que facebook, twitter y compañía simplemente raspan el html simple sin procesarlo a través de javascript. Angular actualiza dinámicamente el dom a través de js y, por lo tanto, los rastreadores solo obtienen el index.html inicial.

Hay varias formas de servir un html que contenga etiquetas de gráficos abiertos y resolver su problema:

• Representación del lado del servidor con angular universal
• usa un proxy que represente tu página
• sobrescribir index.html sobre la marcha reemplazando etiquetas og
• sirviendo páginas html estáticas (no estoy seguro si esto es compatible con angular)

¿Supongo que ya usas algo como ngx-meta para agregar etiquetas og?

Angular Universal - Representación del lado del servidor con metaetiquetas en Angular 2/3/4/5

Supongo que la representación del lado del servidor es la forma más adecuada de resolver su problema. Para esto, puede alojar un servidor de nodo o utilizar, por ejemplo. AWS Lambda. La desventaja de esto es que su aplicación debe estar alojada activamente y ya no puede ser servida estáticamente. De todos modos, esta parece ser la mejor manera, ya que también mejora el SEO. Angular Universal es el término para buscar:

• Angular Universal
• Placa de caldera de arranque universal angular
• PWA universal angular con renderizado en el lado del servidor sin servidor con aws lambda boilerplate

Preformación universal angular en la construcción

También puede representar previamente rutas específicas en el proceso de compilación y servir angular como una aplicación estática con múltiples archivos index.html previamente procesados. Si solo tiene pocas rutas estáticas, esto funciona perfectamente bien. Pensando en rutas más genéricas con partes dinámicas, esta no es la solución. Ir para la representación del lado del servidor. La placa angular universal angular también contiene un ejemplo para esto. Ver prerender.ts

Soluciones alternativas

Entrega previa de Angular con un proxy para proporcionar etiquetas OG

Si desea evitar la implementación del servidor / representación previa durante el proceso de compilación (la configuración de angular universal a veces es una molestia para las aplicaciones estructuradas que no son buenas), puede intentar usar un servicio de proxy que prescriba su página. Echa un vistazo a, por ejemplo. prerender.io .

Sobrescribir index.html

Redirija todas las solicitudes a un script que sobrescriba las etiquetas og:. P.ej. El uso de PHP y .htaccess para sobrescribir etiquetas og también es posible con entornos modernos. P.ej. podría usar cloudfront / api gateway y una función lambda. Sin embargo, no he visto un ejemplo para esto.

Caché de Facebook y depuración de gráficos abiertos

Tenga en cuenta que las memorias caché aún pueden haber almacenado en caché la información del gráfico abierto desde su primer rastreo. Asegúrese de que su código fuente sea el último y que todos los cachés, servidores proxy inversos como nginxx, cloudfront estén borrados.

Use Facebook Debugger para depurar cachés de gráficos abiertos y borrar caché de gráficos abiertos de Facebook

Answer 2

A partir de 2018/19 y si su objetivo principal es SEO (o probablemente más "SMO" - Optimización de redes sociales - ya que Googlebot hace un gran trabajo al evaluar JavaScript pero la mayoría de los bots de redes sociales no lo hacen) su solución SSR de elección tal vez debería no sea Angular Universal sino algo que use un navegador sin cabeza.

Esto caería dentro de la categoría "proxy" de la respuesta de Manuel, pero como todavía no los he visto publicados aquí, dos (y media) soluciones realmente geniales:

Rendertron

Este es mantenido por el equipo de Google Chrome y es simplemente un excelente punto final para renderizar su aplicación y devolverla.

Rendora

Al igual que Rendertron, pero este tiene el middleware (es decir, dónde y cómo decide qué solicitudes se procesan y cuáles no) ya está incorporado y también viene con algunas características más avanzadas pero prácticas como el almacenamiento en caché. Por lo tanto, está realmente muy cerca de su objetivo de "configuración cero necesaria" e incluso más fácil de configurar que Rendertron.

Puppeteer

Nuevamente mantenido por el equipo de Google Chrome (y realmente utilizado por Rendertron) Puppeteer proporciona una API de alto nivel basada en nodos para Chrome sin cabeza. Entonces, si los proyectos anteriores son dos rígidos para usted, probablemente podrá implementar una solución de adaptación con Puppeteer, pero obviamente será más trabajo que simplemente usar Rendertron o Rendora.

En comparación con Angular Universal, estas soluciones tienen la gran ventaja de que el proyecto de su aplicación puede permanecer completamente independiente de la herramienta SSR utilizada (incluso podría estar utilizando cualquier otra tecnología además de Angular). Y esto obviamente no solo le brinda más flexibilidad para su propio código, sino también para sus opciones de paquete, ya que no tiene que preocuparse si son compatibles con Angular Universal o no. Su desventaja podría ser una pequeña sobrecarga de rendimiento, pero si solo apuntas a bots, esto probablemente no importará. Y si usa el almacenamiento en caché de Rendora, esto puede no ser cierto y puede tener un aumento de rendimiento. Sin embargo, si eso podría ser comparable al aumento de rendimiento que puede lograr con Angular Universal, no lo sé. Pero tenga en cuenta que cuando hablamos sobre el aumento del rendimiento de SSR, siempre hablamos sobre el tiempo de carga de la primera página de todos modos. Por lo general, la importancia de esto no es demasiado alta ya que sus usuarios interactuarán mucho más con su aplicación después de su primera carga. Si no lo hacen y usted tiene principalmente usuarios anónimos que solo revisan una página y luego se van, probablemente no estaría creando una PWA sino una página web clásica en primer lugar ...

tl; dr solo echa un vistazo a Rendora y Rendertron, pueden ser lo que estás buscando y llevarte allí de manera fácil y rápida.

Answer 3

En angular 6, la metaetiqueta dinámica no se refleja en index.html

Entonces, la única forma de obtener meta contenido dinámico con la ayuda de .htaccess.

Si desea renderizar contenido dinámico que necesita, tome la ayuda de .htaccess.

RewriteCond% {HTTP_USER_AGENT} facebookexternalhit / 1.1 | Twitterbot | Pinterest | linkedinbot | WhatsApp | Viber | SkypeUriPreview | Google. * Snippet [NC, OR]

Para más información:

https://gist.github.com/thoop/8072354

https://www.winhelp.info/create-browser-whitelist-with-htaccess.html

Answer 4

Pruebe esto (usando la API de fb: v2.12):

FB.ui({
  method: ''share_open_graph'',
  action_type: ''og.shares'',
  action_properties: JSON.stringify({
    object : {
      ''og:url'': ''url'', // your url to share
      ''og:title'': ''title'',
      ''og:site_name'':''site_name'',
      ''og:description'':''description'',
      ''og:image'': ''image Url'',//
      ''og:image:width'':''250'',//size of image in pixel
      ''og:image:height'':''257''
    }
  })
}, function(response){
  console.log("response is ",response);
});

Answer 5

Si está utilizando Angular 4, ¿por qué no crear las páginas del lado del servidor con Angular Universal? De esa manera, puede construir programáticamente sus etiquetas HEAD antes de que el navegador cargue la página

https://universal.angular.io/