Comment tester open graph sur localhost

Question

J'ai fait beaucoup de recherches et n'ai pas trouvé de réponse définitive à cela. Y a-t-il un moyen de tester l'open graph en localhost? Je n'ai aucun problème à utiliser l'API graphique en localhost.

J'ai changé l'URL de mon site web dans les paramètres de l'application et j'ai même essayé de configurer un domaine dans mon fichier hosts, mais le linter du débogueur pour l'open graph essaie d'utiliser le domaine réel au lieu de mon localhost et lorsque j'utilise directement locahost, le linter échoue complètement à se connecter.

Est-ce que quelqu'un a des solutions de contournement pour cela?

Answer 1

Utiliser un proxy local est la bonne solution. ngrok n'a pas fonctionné pour moi non plus.

Un outil similaire qui a fonctionné avec le débogueur de Facebook est localtunnel ✅

npm install -g localtunnel
lt --port 8000
# ou en utilisant npx sans installer localtunnel
npx lt --port 8000

Génère une URL qui ressemble à quelque chose comme https://.localtunnel.me/. En utilisant cette URL dans le débogueur open graph de Facebook, cela a fonctionné pour moi jusqu'au 18 octobre 2017. J'ai seulement dû appuyer sur le bouton Fetch new scrape information.

Answer 2

Il est très simple de tester Open Graph dans n'importe quel environnement local en utilisant Chrome ou Firefox avec des plugins. J'en ai utilisé un pour rapidement montrer dans chrome comment Open Graph apparaît à l'utilisateur pour tester les résultats. Voici une citation sur ce que cela fait.

Cette extension montre comment les gens verront votre site sur les réseaux sociaux les plus populaires. Cette extension est destinée aux professionnels qui créent du contenu médiatique.

Pour vérifier les métadonnées de votre site ou article, il suffit de l'ouvrir dans Chrome et de cliquer sur l'icône de l'extension. Vous pouvez également ajouter manuellement une URL.

Voici un lien direct vers le plugin (Chrome)
Module complémentaire Firefox

Answer 3

Vous pouvez utiliser ngrok pour créer très facilement un sous-domaine public aléatoire qui redirige vers votre serveur web local, même à travers les NAT ou pare-feu.

Téléchargez simplement ngrok et exécutez ./ngrok http 8080 (en supposant que 8080 est le port http de votre serveur web local).

Cela créera un sous-domaine aléatoire comme http://38a84a97.ngrok.io/ qui redirige vers votre serveur web local et que vous pouvez utiliser avec Facebook pour tester vos balises open graph.

Answer 4

Comme approche un peu plus simple, vous pouvez utiliser une extension de navigateur comme https://socialsharepreview.com/browser-extensions - qui affichera vos cartes sociales directement dans le navigateur (ce qui pourrait bien sûr échouer si vous ne les avez pas configurées correctement côté serveur :))

Answer 5

Pour tester Open Graph (et les cartes Twitter), j'ai également dû exposer localhost (Docker) à Facebook et Twitter. J'ai utilisé Serveo

Cela fonctionne très bien pour cela, pas besoin d'installer quoi que ce soit car cela fonctionne avec le transfert de port ssh.

$ ssh -R 80:localhost:3000 serveo.net

Ensuite, accédez à l'URL donnée, et voilà.