web-dev-qa-db-fra.com

Angular 4 - Met à jour dynamiquement les balises Meta pour Facebook (Ouvrir le graphique)

Comment pouvons-nous ajouter/mettre à jour des balises méta de manière dynamique afin qu'elles soient sélectionnées par la boîte de dialogue de partage Facebook/Whatsapp?

J'ai mis à niveau mon application angular 2 vers angular 4 afin d'utiliser Meta service pour ajouter/mettre à jour dynamiquement des balises méta une fois que nous avons obtenu les données en composant à partir de l'API.

Jusqu'à présent dans ma composante, j'ai

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' });

J'utilise updateTag car j'ai déjà ajouté des balises statiques avec des valeurs par défaut. Ce code met correctement à jour les valeurs des balises META lorsque je les inspecte.

Je sais qu'il est logique que les outils de débogage de Facebook/Whatsapp n'exécutent aucun code javascript, il ne sera donc probablement jamais exécuté dans leur environnement. 

J'utilise https://developers.facebook.com/tools/debug/ et il prend toujours les valeurs de balises par défaut, ce qui est logique.

Ma question est la suivante: quel est le chemin à suivre pour que Facebook/Whatsapp récupère les valeurs de balises mises à jour de manière dynamique? J'utilise Angular 4 et je charge toutes les données via des appels d'API. Il n'est donc pas possible d'obtenir des données avant le chargement de la page et le script.

angularfacebook-graph-apifacebook-opengraphmeta-tags
13
Mirza Ali Baig

Les étiquettes Open Graph OG doivent être dans le code source!

Vous devez fournir une page html statique contenant les balises de graphe ouvertes, telles que og: image og: title et og: description dans le code source html, puisque Facebook, Twitter et autres ne font que gratter le code HTML sans le rendre en javascript. Angular met à jour dynamiquement le dom par le biais de js. Par conséquent, les robots d'exploration obtiennent simplement le fichier index.html initial. 

Il existe plusieurs façons de servir un code HTML contenant un graphe ouvert Tags et résoudre votre problème:

  • Rendu Serverside avec Universal angulaire
  • utiliser un proxy rendant votre page
  • écraser index.html à la volée en remplaçant les tags og
  • servir des pages html statiques (pas sûr si cela est supporté par angular)

Je suppose que vous utilisez déjà quelque chose comme ngx-meta pour ajouter des tags og?

Angular Universal - Rendu côté serveur avec balises META angulaires 2/3/4/5

Je suppose que le rendu côté serveur est le moyen le plus approprié de résoudre votre problème. Pour cela, vous pouvez héberger un serveur de nœud ou utiliser par exemple. AWS Lambda. Le désavantage avec cela, votre application doit être hébergée activement et ne peut plus être servie de manière statique. Quoi qu'il en soit, cela semble être le meilleur moyen, car il améliore également le référencement. Angular Universal est le terme à rechercher:

Prerendering Universel Angulaire sur construction

Vous pouvez également définir des itinéraires spécifiques à la pré-génération dans le processus de création et utiliser angular en tant qu'application statique avec plusieurs fichiers index.html pré-créés. Si vous n’avez que quelques itinéraires statiques, cela fonctionne parfaitement. Si vous envisagez des itinéraires plus génériques avec des composants dynamiques, ce n'est pas la solution. Optez pour le rendu côté serveur. Le warmplate universel angulaire contient également un exemple à cet effet. Voir prerender.ts

Solutions alternatives

Prérendering Angular avec un proxy pour fournir des balises OG

Si vous souhaitez éviter d'implémenter serveride/prerendering au cours du processus de construction (la configuration d'angular universal peut parfois s'avérer ardue pour les applications peu structurées.), Vous pouvez essayer d'utiliser un service de proxy pour présélectionner votre page. Regardez par exemple. prerender.io . 

Écrasement index.html

Redirige toutes les demandes vers un script qui écrase les og: tags. Par exemple. Utiliser PHP et .htaccess pour écraser les balises og est également possible dans les environnements modernes. Par exemple. vous pouvez utiliser la passerelle cloudfront/api et une fonction lambda. Je n'ai pas vu d'exemple pour cela cependant.

Cache Facebook et débogage de graphes ouverts

Sachez que les caches peuvent toujours avoir mis en cache les informations de graphe ouvertes de leur première analyse. Assurez-vous que votre code source est le dernier et que tous les caches, les proxys inversés tels que nginxx, cloudfront sont effacés.

Utilisez Facebook Debugger pour déboguer les caches de graphes ouverts et vider le cache opengraph de Facebook. 

11
Manuel

Essayez ceci (en utilisant fb API: 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);
});
3
Rainer Larin-Fonseca

Si vous utilisez Angular 4, pourquoi ne pas créer le côté serveur de pages avec Angular Universal - de cette façon, vous pourrez créer par programme vos balises HEAD avant le chargement de la page par le navigateur

https://universal.angular.io/

3
Dean Chalk

Dans angular 6, Meta tag dynamique non reflété dans index.html

Donc, seule façon d'obtenir du contenu dynamique méta avec l'aide de .htaccess.

Si vous souhaitez rendre le contenu dynamique dont vous avez besoin, utilisez l’aide de .htaccess.

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

Pour plus d'informations:

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

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

0
khushali