OpenGraph sur Ajax Site web

J'ai un Site qui est Entièrement Basée sur Ajax (Hachage de Navigation).

Est-il un moyen pour actualiser Open Graph meta-tags pour l'ajax de sites web à l'aide de Javascript?
(Quand je clique sur un lien, les Tags, et il y a des valeurs qui doivent Changer)

OriginalL'auteur C.E. | 2012-01-17

  1. 52

    Pas. Open Graph de balisage doivent être présents sur les pages HTML qui sont accessibles via pure HTTP.

    C'est parce que lorsqu'un utilisateur interagit avec un OG objet (comme, effectue une action, etc) Facebook va effectuer un HTTP GET sur l'OG URL, et s'attendre à voir OG tags retourné dans le balisage.

    La solution est de créer des URLs canoniques pour chacun de vos objets. Ces URLs contiennent des balises HTML, y compris OG balises.

    Sur les demandes de ces Url, si vous voyez les entrants useragent chaîne de caractères contenant 'facebookexternalhit", alors vous afficher le code HTML. Si vous ne le faites pas, vous servir un 302 qui redirige vers votre URL ajax. Sur l'Url ajax, votre comme des boutons et tout OG actions que vous publiez doivent pointer vers l'URL canonique de l'objet

    Exemple:

    En tant qu'utilisateur, je suis sur http://yoursite.com/#!/artistes/monet. Je clique sur un bouton, ou de publier une action, mais le bouton "like" de href paramètre, ou l'URL de l'objet lorsque vous validez l'action doit être un web hittable URL canonique de l'objet - dans ce cas, peut-être http://yoursite.com/artists/monet

    Lorsqu'un utilisateur à l'aide d'un navigateur hits http://yoursite.com/artists/monet vous devez rediriger vers http://yoursite.com/#!/artistes/monet, mais si le nouveau useragent dit que c'est le Facebook du grattoir, vous avez juste retour de balisage qui représente l'artiste Monet.

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

    Super bien écrit de la réponse!
    Grand grand merci pour votre réponse!
    Une grande réponse, mais ce qui se passe lorsque l'utilisateur copie/colle ` yoursite.com/#!/artistes/monet " dans le facebook de la boîte? À mon humble avis de grattage échoue parce qu'ils ne savent pas qu'ils ont le copier/coller de l'url canonique.
    Fait quelques recherches sur mon propre commentaire, les résultats ci-dessous 😉
    C'est une erreur! @bitshiftcop réponse est juste - c'est possible (d'ailleurs validé sur mon propre)

    OriginalL'auteur Simon Cross

  2. 32

    Un peu plus de l'enquête conduisent à des constats suivants:

    Disons que vous faites une demande avec un hachage qui ressemble à ceci:

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

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

    Puis essayer la même chose avec la suggestion de l'url que Simon dit:

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

    Maintenant, vous remarquerez que l'Facebook grattoir est le respect de la google ajax spécifications et il vous permet de convertir les #! à ?_escaped_fragment_= donc l'URL ressemble à ceci:

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

    Vous pouvez le vérifier par vous-même avec le facebook du débogueur: https://developers.facebook.com/tools/debug

    • télécharger le script php de votre serveur
    • aller à l'facebook débogueur
    • entrez l'url avec le /#/ partie
    • cliquez sur "Voir exactement ce que nos grattoir voit pour votre URL" - aucun fragment de hachage
    • entrez l'url de nouveau avec /#!/
    • cliquez sur "Voir exactement ce que nos grattoir voit pour votre URL" - fragment de hachage a été tourné vers

      ?_escaped_fragment_=

    Le script

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

    Ou résumées: toujours utiliser /#!/ (hashbang) liens profonds 😉

    Merci pour ce complément d'info. Vraiment utile avec w de problème, je suis en train de travailler sur.
    Cette réponse doit être marqué comme le droit de réponse(!)
    et Yaron-je ajouter un commentaire à la réponse de Simon, je vous serais reconnaissant si vous pouviez préciser si la réécriture redriect avec hashbang est nécessaire et si la mise en place est suffisante pour l'indice de og:tags html des objets correspondant à des visualisations de D3 d'objets JSON - sinon i ll ouvrir une autre question.
    C'est déjà obsolète webmasters.googleblog.com/2015/10/...

    OriginalL'auteur polyclick

  3. 0

    J'ai couru un test rapide qui semble fonctionner. Personne à charge sur le fait que le FB racleur de ne pas exécuter JavaScript.

    Comme la plupart de mes sites sont statiques Single Page Apps avec pas de serveur logique, je peux générer des pages statiques rapidement avec des outils tels que Grunt et Gulp.

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

    Facebook se gratter la page de test des balises meta, lorsqu'un utilisateur clique sur le lien de la JS redirige vers /#/test pour mon single page app de réagir et de présenter la vue correcte.

    Semble hacky mais fonctionne; 

    <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>

    OriginalL'auteur Will Hancock