reactjs - Beim Teilen in sozialen Medien werden keine Metadaten für die URL angezeigt

Wir haben ein Projekt (Webanwendung) in React .net core erstellt, wobei React für das Rendering auf der Client-Seite verwendet wird.

Wir haben react-helmet verwendet, um Meta-Tags dynamisch zuzuweisen.

Das Problem besteht darin, wenn die App im Browser gerendert wird. Der Browser erhält beim ersten Laden nur das statische HTML, das die von uns gesetzten dynamischen Meta-Tags nicht enthält. Beim Inspizieren erhält man diese Meta-Tags jedoch unter 'Elemente'.

Wenn wir also diese URL für das Teilen in sozialen Medien wie WhatsApp oder Facebook verwenden, werden die Metadaten der URL nicht so angezeigt, wie sie sollten.

Wir haben versucht, nach Lösungen für unser Problem zu suchen, und die offensichtlichste Antwort, auf die wir gestoßen sind, war, stattdessen serverseitiges Rendering auszuprobieren. Das verstehen wir, aber es ist keine Lösung, die wir zu diesem Zeitpunkt ausprobieren können, wenn wir bereit sind, die App auszurollen.

Andere, auf die wir stießen, waren "react-snap", "react-snapshot", aber kein Glück mit react-snap, es erfordert eine Aktualisierung der React-Version auf 16+, die wir durchgeführt haben, aber ich schätze, nicht alle Abhängigkeiten wurden aktualisiert, es gab einen Fehler, der sagte "

hydrate ist keine Funktion

(hydratisieren betrifft das react-dom)

Mit react-snapshot konnten wir die erforderliche Typdefinition nicht finden, die in react .net core erforderlich ist, um ordnungsgemäß zu funktionieren

Bitte informieren Sie über den nächsten wahrscheinlichen Schritt (außer den kostenpflichtigen wie Prerender, etc.)?

Hauptziel: Soziale Anwendungen sollten die Metadaten anzeigen, wenn wir die URL darin einfügen/teilen.

Antwort #1

Prerender ist die einzige Lösung. Ich habe eine Node-Abhängigkeit namens "prerender" verwendet -> https://github.com/prerender/prerender

Es funktioniert, indem ein Webserver aktiviert wird, der HTTP-Anfragen stellt. Einen Wert zu einem Boolean zuweisen: window.prerenderReady=true; auf Ihrer Website teilt Ihrem Server mit, wann die Seite bereit ist, ein „Foto zu machen“, und es gibt das HTML zurück, wenn dies der Fall ist. Sie müssen ein einfaches Skript programmieren, das alle URLs der Website analysiert und diese HTML-Inhalte in Dateien speichert. Laden Sie sie auf Ihren Server hoch und verwenden Sie .htaccess oder Ähnliches, um die Crawler external-hit-facebook, twitterbot, googlebot usw. auf die gerenderte Version zu leiten und die ‚echte Website‘ den anderen User-Agents zu zeigen.

Es hat bei mir funktioniert.

Antwort #2

Die Meta-Tags für Open Graph müssen im HTML vorhanden sein, das an den Client zurückgesendet wird, wenn eine URL abgerufen wird. Browser oder Bots werden nicht warten, bis die App auf der Client-Seite gerendert wird, um zu bestimmen, was die Meta-Tags sind - sie werden nur das ursprünglich geladene HTML betrachten.

Wenn der Inhalt Ihrer Open-Graph-Metadaten dynamisch sein soll (unterschiedlichen Inhalt je nach URL, Gerät, Browser usw. anzeigen), müssen Sie etwas wie react-meta-tags in Ihren Servercode einfügen.

Es sind keine Typdefinitionen für irgendeine der React-Meta-Tag-Bibliotheken verfügbar, aber Sie können Ihre eigenen hinzufügen. Es kann ein wenig knifflig sein, aber schauen Sie sich die offizielle Dokumentation und die von ihnen bereitgestellten Vorlagen an, um loszulegen.

Wenn Sie es nicht dynamisch benötigen, könnten Sie die Tags in die statischen Teile des <head>-Tags in Ihrer index.html einfügen.