OpenGraph auf Ajax-Basierte Website
Ich habe eine Website, die Komplett auf Ajax-Basis (Hash-Navigation).
Gibt es eine Möglichkeit zu aktualisieren, Open Graph meta-tags für ajax-basierte websites mit Javascript?
(Wenn ich auf einen link Klicken, die Tags, und dort Werte Ändern sollte)
InformationsquelleAutor der Frage C.E. | 2012-01-17
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nicht. Open Graph markup vorhanden sein muss, auf HTML-Seiten, die sind GETable mit reinem HTTP.
Dies ist, weil, wenn ein Benutzer interagiert mit einer OG-Objekt (wie eine Aktion durchführt, etc) Facebook führt eine HTTP-GET auf der OG-URL, und erwarten, um zu sehen, OG-tags zurückgegeben, die im markup.
Die Lösung ist das erstellen von canonical-URLs für jedes Ihrer Objekte. Diese URLs enthalten grundlegende HTML-markup einschließlich der OG-tags.
Anfragen auf diese URLs, wenn Sie sehen, dass der eingehende useragent-string mit 'facebookexternalhit' dann machen Sie den HTML-Code. Wenn Sie nicht, Sie dienen 302, die umleitet, um Ihre ajax-URL. Auf der ajax-URLs, wie Sie Tasten und alle OG-Aktionen, die Sie veröffentlichen sollten zeigen Sie auf die kanonische URL-Objekt
Beispiel:
Als Benutzer, bin ich auf http://yoursite.com/#!/Künstler/monet. Klicken auf einen like-button, oder zu veröffentlichen, eine Aktion, aber der like-button ist der "href" - parameter oder die URL des Objekts an, wenn Sie post die Aktion sollte ein web-hittable kanonische URL für das Objekt - in diesem Fall vielleicht http://yoursite.com/artists/monet
Wenn ein Benutzer mit einem browser trifft http://yoursite.com/artists/monet sollten Sie leiten Sie Sie auf http://yoursite.com/#!/Künstler/monetaber wenn die eingehende useragent sagt, es ist Facebook ' s Abstreifer, Sie gerade zurück markup steht für den Künstler Monet.
Realen Welt Beispiele finden Sie unter Deezer, Rdio und Mog, die alle nutzen diese design-Muster.
InformationsquelleAutor der Antwort Simon Cross
Etwas mehr Untersuchungen führen zu folgenden Ergebnissen:
Lassen Sie uns sagen Sie, dass Sie aus einer Anwendung mit einem Hashwert, der wie folgt aussieht:
Dem Facebook scraper rufen Sie Ihre url ohne die
/#/artists/monet
Teil. Dies ist ein problem, denn Sie haben keine Möglichkeit zu wissen, welche Informationen Sie haben, zu analysieren in dermeta og: tags
.Dann versuchen Sie das gleiche mit der vorgeschlagenen url als Simon sagt:
Nun, werden Sie bemerken, dass die Facebook-Spachtel ist unter Wahrung der google ajax-Spezifikationen und es wird konvertieren Sie die
#!
zu?_escaped_fragment_=
also die URL sieht so aus:Können Sie check this out für sich selbst mit dem facebook debugger: https://developers.facebook.com/tools/debug
/#/
Teil/#!/
?_escaped_fragment_=
Skript
Oder zusammengefasst: verwenden Sie immer
/#!/
(hashbang) deeplinks 😉InformationsquelleAutor der Antwort polyclick
Ich lief ein kurzer test, scheint zu funktionieren. Abhängig von der Tatsache, das FB-Abstreifer nicht mit JavaScript.
Als die meisten meiner Seiten sind statische Single-Page-Apps mit keinen server-Logik, die ich erzeugen kann, das statische Seiten schnell mit tools wie Grunt und Gulp.
Teilen Sie http://wh-share-test.s3-website-eu-west-1.amazonaws.com/test
Facebook wird kratzen Sie die test-Seite meta-tags, wenn ein Benutzer klickt auf den link das JS leitet weiter auf /#/test-für meine single page app zu reagieren und zeigt die richtige Ansicht.
Scheint hacky, aber Sie funktioniert;
InformationsquelleAutor der Antwort Will Hancock