wake-up-neo.net

Angular 4 - Meta-Tags dynamisch für Facebook aktualisieren (Diagramm öffnen)

Wie können Meta-Tags dynamisch hinzugefügt/aktualisiert werden, damit sie vom Facebook/Whatsapp-Freigabedialog ausgewählt werden?

Ich habe meine Anwendung für die Anwendung "2" auf "Winkel 4" aktualisiert, um den Meta-Dienst zum dynamischen Hinzufügen/Aktualisieren von Meta-Tags zu verwenden, sobald die Daten in der Komponente von der API abgerufen wurden.

So weit in meiner Komponente habe ich

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

Ich verwende updateTag, weil ich bereits statische Tags mit Standardwerten hinzugefügt habe. Dieser Code aktualisiert die Metatagswerte erfolgreich, wenn ich sie einchecke.

Ich weiß, dass es sinnvoll ist, dass Facebook/Whatsapp-Debugger-Tools kein Javascript ausführen, sodass es wahrscheinlich nicht in ihrer Umgebung ausgeführt wird. 

Ich verwende https://developers.facebook.com/tools/debug/ und es werden immer die Standard-Tag-Werte übernommen, was sinnvoll ist.

Meine Frage ist, was ist der Weg, damit Facebook/Whatsapp die aktualisierten Tag-Werte dynamisch aufnimmt? Ich verwende Angular 4 und lade alle Daten über API-Aufrufe. Es ist also nicht möglich, Daten abzurufen, bevor die Seite geladen und das Skript ausgeführt wird.

13
Mirza Ali Baig

Open Graph OG-Tags müssen im Quellcode sein!

Sie müssen eine statische HTML-Seite bereitstellen, die die geöffneten Diagramm-Tags wie og: image og: title und og: description im HTML-Quellcode enthält, da Facebook, Twitter und Co. ein einfaches Scraping der einfachen HTML-Dateien ohne sie durch Javascript darstellen. Angular aktualisiert den Dom dynamisch durch js, und daher erhalten die Crawler nur die erste index.html. 

Es gibt mehrere Möglichkeiten, eine HTML-Datei mit geöffneten Graphen Tags bereitzustellen und Ihr Problem zu lösen:

  • Serverseitige Wiedergabe mit eckigem Universal
  • verwenden Sie einen Proxy, der Ihre Seite darstellt
  • index.html im laufenden Betrieb überschreiben, um die Tags zu ersetzen
  • statische HTML-Seiten bereitstellen (nicht sicher, ob dies von eckig unterstützt wird)

Ich nehme an, Sie verwenden bereits etwas wie ngx-meta , um og Tags hinzuzufügen.

Angular Universal - Serverseitige Wiedergabe mit Meta-Tags in Angular 2/3/4/5

Ich denke, serverseitiges Rendering ist der beste Weg, um Ihr Problem zu lösen. Dazu können Sie einen Knotenserver hosten oder z. AWS Lambda. Der Nachteil dabei ist, dass Ihre App aktiv gehostet werden muss und nicht mehr statisch bereitgestellt werden kann. Wie auch immer, dies scheint der beste Weg zu sein, da es auch die SEO verbessert. Angular Universal ist der Begriff, nach dem gesucht werden soll:

Angular Universal Prerendering am Bau

Sie können auch bestimmte Routen im Erstellungsprozess vorrenderieren und als statische App mit mehreren vorgerenderten index.html-Dateien dienen. Wenn Sie nur wenige statische Routen haben, funktioniert dies perfekt. Wenn Sie sich generischere Routen mit dynamischen Teilen vorstellen, ist dies keine Lösung. Gehen Sie für das serverseitige Rendern. Die eckige Universalheizplatte enthält dazu auch ein Beispiel. Siehe prerender.ts

Alternativlösungen

Prerendering Angular mit einem Proxy zur Bereitstellung von OG-Tags

Wenn Sie vermeiden möchten, dass Sie serverseitig/Vorrendering während des Erstellungsprozesses implementieren (das Einrichten von angle universal ist manchmal für nicht gut strukturierte Apps ein Problem.) Sie können versuchen, einen Proxy-Service zu verwenden, der Ihre Seite vorrendert. Schauen Sie sich z. prerender.io

Index.html überschreiben

Leiten Sie alle Anforderungen an ein Skript weiter, das die og: -Tags überschreibt. Z.B. Mit PHP und .htaccess können Sie Tags überschreiben dies ist auch in modernen Umgebungen möglich. Z.B. Sie können Cloudfront/API-Gateway und eine Lambda-Funktion verwenden. Habe noch kein Beispiel dafür gesehen.

Facebook-Cache und Open Graph-Debugging

Beachten Sie, dass Zwischenspeicher möglicherweise noch die geöffneten Diagramminformationen aus ihrer ersten Durchforstung zwischengespeichert haben. Stellen Sie sicher, dass Ihr Quellcode der neueste ist, und alle Caches, Reverse-Proxies wie nginxx und cloudfront werden gelöscht.

Verwenden Sie Facebook Debugger , um offene Diagrammcaches zu debuggen und den Facebook-Opengraph-Cache zu löschen 

11
Manuel

Versuchen Sie folgendes (mit 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);
});

Wenn Sie Angular 4 verwenden, können Sie die Seiten-Serverseite nicht mit Angular Universal erstellen. Auf diese Weise können Sie Ihre HEAD-Tags programmgesteuert erstellen, bevor die Seite vom Browser geladen wird

https://universal.angular.io/

3
Dean Chalk

Ab 2018/19 und wenn Ihr Hauptziel SEO ist (oder wahrscheinlich eher "SMO" - Social Media Optimization - da der Googlebot bei der Bewertung von JavaScript großartige Arbeit leistet, die meisten Social Media Bots dies jedoch nicht tun), sollte Ihre SSR-Lösung Ihrer Wahl dies vielleicht tun nicht Angular Universal, sondern etwas, das einen kopflosen Browser verwendet.

Dies würde unter die "Proxy" -Kategorie von Manuels Antwort fallen, aber da ich sie hier noch nicht gepostet habe, sind zweieinhalb wirklich großartige Lösungen:

Rendertron

Dieser wird vom Google Chrome) -Team selbst verwaltet und ist einfach ein großartiger Endpunkt, um Ihre App zu rendern und zurückzugeben.

Rendora

Ähnlich wie Rendertron, aber dieses hat die Middleware (d. H. Wo und wie Sie entscheiden, welche Anforderungen gerendert werden und welche nicht) bereits integriert und verfügt auch über einige erweiterte, aber praktische Funktionen wie Caching. Daher ist es wirklich sehr nah an seinem Ziel "Keine Konfiguration erforderlich" und noch einfacher einzurichten als Rendertron.

Puppenspieler

Erneut gepflegt vom Google Chrome) -Team (und tatsächlich von Rendertron verwendet) Puppeteer stellt eine knotenbasierte High-Level-API für kopfloses Chrome zur Verfügung. Wenn die vorherigen Projekte also zwei für Sie schwierig sind, werden Sie es wahrscheinlich sein in der Lage, eine passende Lösung mit Puppeteer zu implementieren, aber es wird offensichtlich mehr Arbeit sein als nur mit Rendertron oder Rendora.

Gegenüber Angular Universal haben diese Lösungen den großen Vorteil, dass Ihr App-Projekt gegenüber dem verwendeten SSR-Tool völlig unabhängig bleibt (Es könnte sogar jede andere Technologie als Angular verwenden.) Und dies gibt Ihnen natürlich nicht nur mehr Flexibilität für Ihren eigenen Code, sondern auch für Ihre Paketauswahl, da Sie sich keine Sorgen machen müssen, wenn es sich um Angular Universalkompatibel oder nicht. Ihr Nachteil könnte ein geringer Performance-Overhead sein, aber wenn Sie nur auf Bots abzielen, spielt dies wahrscheinlich keine Rolle. Und wenn Sie das Caching von Rendora verwenden, ist dies möglicherweise nicht einmal der Fall, und Sie haben möglicherweise tatsächlich eine Leistungssteigerung. Aber wenn das mit der Leistungssteigerung vergleichbar sein könnte, die Sie mit Angular Universal erreichen können, weiß ich nicht. Aber denken Sie daran, dass wir, wenn wir über die Leistungssteigerung von SSR sprechen, immer nur über die sprechen Die Zeit bis zum Laden der ersten Seite ist sowieso nicht allzu hoch, da Ihre Benutzer interaktiv sind Nach dem ersten Laden der App können Sie noch viel mehr mit der App tun. Wenn dies nicht der Fall ist und Sie hauptsächlich anonyme Benutzer haben, die nur eine Seite überprüfen und dann verlassen, würden Sie wahrscheinlich nicht in erster Linie eine PWA, sondern eine klassische Webseite erstellen ...

schauen Sie sich einfach Rendora und Rendertron an, sie sind möglicherweise das, wonach Sie suchen, und bringen Sie ganz einfach und schnell dorthin.

1
Jey DWork

In Winkel 6 spiegelt Dynamisches Meta-Tag nicht in index.html wider

Nur so erhalten Sie dynamische Meta-Inhalte mit .htaccess.

Wenn Sie dynamischen Inhalt rendern möchten, benötigen Sie .htaccess.

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

Für mehr Information:

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

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

0
khushali