OpenGraph sur le site Web basé sur Ajax

J'ai un site Web, entièrement basé sur Ajax (Hash Navigation).

Existe-t-il un moyen de rafraîchir les méta-tags Open Graph pour les sites Web basés ajax en utilisant Javascript? (Quand je clique sur un lien, les balises, et les valeurs doivent changer)

Non. Le marquage Open Graph doit être présent sur des pages HTML GETable avec HTTP pur.

C'est parce que lorsqu'un utilisateur interagit avec un objet OG (comme, effectue une action, etc.), Facebook effectuera un HTTP GET sur l'URL OG et s'attend à voir les étiquettes OG renvoyées dans le balisage.

La solution consiste à créer des URL canoniques pour chacun de vos objets. Ces URL contiennent un balisage HTML de base, y compris des balises OG.

Sur les demandes de ces URL, si vous voyez la chaîne d'utilisateur entrant contenant 'facebookexternalhit', vous rendez le HTML. Si vous ne le faites pas, vous utilisez un 302 qui redirige vers votre URL ajax. Sur les URL ajax, vos boutons similaires et toutes les actions OG que vous publiez devraient pointer vers l'objet URL canonique

Exemple:

En tant qu'utilisateur, je suis sur http://yoursite.com/#!/artists/monet . Je clique sur un bouton similaire ou publie une action, mais le paramètre href du bouton "like" ou l'URL de l'objet lorsque vous publiez l'action devrait être une URL canonique Webable pour l'objet – dans ce cas, peut-être http: // votre site .com / artistes / monet

Lorsqu'un utilisateur utilisant un navigateur frappe http://yoursite.com/artists/monet, vous devriez les rediriger vers http://yoursite.com/#!/artists/monet , mais si l'agent utilisateur entrant dit que c'est le grattoir de Facebook, vous Juste retourner le balisage qui représente l'artiste Monet.

Pour les exemples du monde réel, voir Deezer, Rdio et Mog qui utilisent tous ce modèle de conception.

Un peu plus d'enquête conduit aux résultats suivants:

Disons que vous avez fait une application avec un hash qui ressemble à ceci:

http://yoursite.com/#/artists/monet

Le grattoir Facebook appellera votre url sans la partie /#/artists/monet . C'est un problème parce que vous n'avez aucun moyen de savoir quelles informations vous devez analyser dans la meta og: tags .

Ensuite, essayez la même chose avec l'URL suggérée que Simon dit:

 http://yoursite.com/#!/artists/monet

Maintenant, vous remarquerez que le grattoir Facebook respecte les spécifications google ajax et convertiront le #! À ?_escaped_fragment_= alors l'URL ressemble à ceci:

 http://yoursite.com/?_escaped_fragment_=/artists/monet

Vous pouvez vérifier cela avec le débogueur facebook: https://developers.facebook.com/tools/debug

Télécharger le script php sur votre serveur
Aller au débogueur facebook
Entrez l'url avec la /#/ part
Cliquez sur "Voir exactement ce que notre scraper voit pour votre URL" – aucun fragment de hash
Entrez l'URL à nouveau avec /#!/
Cliquez sur «Voir exactement ce que notre scraper voit pour votre URL» – le fragment de hash a été tourné vers
?_escaped_fragment_=

Le script

 <html> <head> <title>Scraping</title> </head> <body> <? print_r($_SERVER); ?> </body> </html>

Ou résumés: utilisez toujours /#!/ (Hashbang) déséteint;)

J'ai fait un test rapide qui semble fonctionner. Selon le fait que le scraper FB n'exécute pas JavaScript.

Comme la plupart de mes sites sont des applications de page unique statiques sans logique de serveur, je peux générer rapidement des pages statiques avec des outils tels que Grunt et Gulp.

Si vous partagez http://wh-share-test.s3-website-eu-west-1.amazonaws.com/test

Facebook grattera les méta-tags de la page de test, lorsqu'un utilisateur clique sur le lien que le JS redirige vers / # / test pour que mon application de page unique réagisse et présente la vue correcte.

Il semble hacker mais travaille;

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>This is a shared item</title> </head> <body> <h1>This is a shared item page.</h1> <script> var path = window.location.pathname; window.location = '/#' + path; </script> </body> </html>