how to test open graph on localhost

Question

I've done a lot of research and haven't found a definitive answer to this. Is there anyway to test the open graph on localhost? I don't haven any issues using the graph api on locahost.

I've changed my website url in the app settings and have even tried setting up a domain in my hosts file but the debugger linter for open graph tries to use the actual domain instead of my localhost and when using locahost directly the linter completely fails connecting.

Does anybody have any workarounds for this?

Ginnifer

Answer 1

Using a local proxy is the right solution. ngrok didn't work for me neither.

A similar tool that did work with facebook debugger is localtunnel ✅

npm install -g localtunnel
lt --port 8000
# or using npx without installing localtunnel
npx lt --port 8000

Generates a url that looks something like https://<random_hash>.localtunnel.me/. Using this url in facebook open graph debugger worked for me as of October 18th 2017. I only had to hit Fetch new scrape information button. 🍻

Cool thing about localtunnel is that you can easily host your own localtunnel server with github.com/localtunnel/server so if it ever stops working with localtunnel.me, you can run your own somewhere in the cloud ⛅

Paediatrician

Worked great. The command needed to be "lt -p 8000" in my case. – Olympia

+1. This worked for me when ngrok wouldn't (see the ngrok issue here: github.com/inconshreveable/ngrok/issues/427). In my case, I used Windows PowerShell as admin. – Amboina

I'm back and wish I could upvote again. Windows PowerShell as admin works even for Laravel Homestead projects; just cd to the project folder and then lt --port 8000. The resulting URL in the console worked for me. (Trying to open Git Bash as admin and install npm in that Homestead Vagrant box was not working for me.) – Amboina

Default localtunnel host seems to be down at this moment in time so might be worth trying lt -h "http://serverless.social" -p PORT. – Bridgehead

I launch lt, paste the URL to the facebook debugger and get: "We can't review this website because the content doesn't meet our Community Standards. If you think this is a mistake, please let us know." All I'm running is a simple test page. – Cauline

@Ya Indeed, localtunnel hostname moved to loca.lt and it seems it's not working with Facebook Debugger anymore. I think it's worth trying github.com/localtunnel/server using a public facing url. – Paediatrician

localtunnel is great! I even got it to use my locally running Nginx server, instead of spawning its own simple HTTP server. A good website I found for testing results of OG tags on the major social media sites is: opengraph.xyz – Doeskin

We cannot use local tunner with Facebook Sharing Debugbar as of 2024 because it redirects for password confirmation before using the link. – Distil

Answer 2

You can use ngrok to create a random public subdomain that routes to your local webserver very easily, even through NAT or firewalls.

Just download ngrok and run ./ngrok http 8080 (assuming 8080 is your local webserver http port).

This will create a random subdomain like http://38a84a97.ngrok.io/ that routes to your local webserver and that you can use with Facebook to test your open graph tags.

Salverform

This doesn't seem to work. Used ngrok URL and still got "Error parsing input URL, no data was cached, or no data was scraped" on open graph debugger. – Lisa

Have you tried clicking the Fetch new scrape information button ? – Salverform

That doesn't seem to work either. It just fetches the ngrok url – Easley

Well, this is what you want. If well configured, the ngrok url should mirror your local webserver url. – Salverform

it used to work for me, but no longer does. Idk what the issue it – Hudnall

Ngrok does not work with fb crawler check this: github.com/inconshreveable/ngrok/issues/427 – Grinnell

Wow that's really handy. And it worked for me just fine. – Passably

Answer 3

Its very simple to test Open Graph in any local environment using Chrome or Firefox using plugins. I have used one to quickly show in chrome how the Open Graph looks to the viewer to test results. Here is a quote of what it does.

This extension shows how people will see your site in the most popular social networks This extension is for professionals who creates a media content.

To check meta-information of your site or article just open it in a Chrome and click extension's icon. Also you could add an URL manually.

Here is a direct link to the plugin (Chrome)
Firefox add-on

Vltava

Please don't just post some tool or library as an answer. At least demonstrate how it solves the problem in the answer itself. – Woodenware

I still don't think this deserves downvoting. This is the issue of using stackoverflow, after all, there is no point in helping if your answer is clearly correct and you get downvoted anyway. – Vltava

Just a note: I did not downvote, but links to plugins are usually perceived as spam by the community as most plugin authors will drop by and leave their own plugins, and clutter the site (If the link dies, the answer will become useless). – Woodenware

+1 This plugin is great and solves the OP's problem. Sorry @FrankerZ, it hardly needs any explanation as it is so easy to use...! – Cablegram

I found this to be the easiest solution to test with a localhost server, thanks! Works like a charm in 2021. – Oviparous

Chrome link is dead – Metapsychology

Indeed .. I have updated the link. Thanks. – Vltava

I've seen plenty of antiquated code on SO that is useless to me now, but the code was obviously useful at one point in time. With that being said, this solution is just as viable. – Phycomycete

This plugin doesn't work for me – Phycomycete

Answer 4

As a bit simpler approach you can use a browser extension like https://socialsharepreview.com/browser-extensions - which will show your Social Cards directly in the Browser (which of course might fail, if you wrongly didn't set them serverside :))

Distributor

Answer 5

To test open graph (and Twitter cards) I also had to expose localhost (Docker) to Facebook and Twitter. I used Serveo

It works very well for this, no need to install anything as it works with ssh port forwarding.

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

Then navigate to the url given, and there you go.

Monadnock

I cannot access the url. It gives me blank page – Radiation

Serveo seems to have been taken offline due to phishing issues :/ – Bewitch

The easiest solution I got so far! Thank you! – Francium

Answer 6

There are several tools you can use for serving something up over your localhost, each with varying degrees of functionality.

I prefer (obviously) http://forwardhq.com

Other great options here: http://devblog.avdi.org/2012/04/27/http-forwarding-services-for-local-facebook-development/

Gelation

Answer 7

If anyone is looking to preview the :og tags on while developing on subdomains (using lvh.me) in localhost. You can use https://serveo.net. Simply use following command to forward your local server requests. No installation required.

ssh -R yoursubdomain.serveo.net:80:yoursubdomain.lvh.me:3000 serveo.net

you can put your desired port in place of 3000.

Reference: https://blog.aarvy.me/2019/09/20/expose-local-apps-having-subdomains-to-web/

Warn

Answer 8

You have to setup a public domain which points to your public ip address. Use dynes.org or a similar service and setup your router to forward your port 80.

Circumstantial

Answer 9

I know this is not an option for everyone, but if you're using Netlify, their deploy preview works perfectly for this test

Sassanid

Answer 10

The fastest way is to use https://og.nullnull.dev/ chrome extenstion. It easily creates a public version of the page and you can test the OG using the link on any platform.

Numerary