Debugging Meta Tags On Localhost

#webdev

The Problem

Meta tags are useful machine parse-able tags that live in the header of your website. As their name might suggest these tags provide extra metadata about your site. That is, data about your data...

Their usefulness (aside from providing extra metadata about your site) is largely derived from their use on social media. Whenever you see a link shared with a nice preview image and description this information is getting pulled from the meta tags embedded on the site.

The only slightly annoying thing about meta tags is testing them on your local machine, which is imperative if you don't want to do live debugging in production.

The reason this is difficult is because your machine is not (typically) accessible to the internet, particularly from localhost, so the sites that you might want to check them against simply can't pull the relevant information to generate the previews you are after.

The Solution

We need a quick and easy solution to make the website we are hosting locally accessible on the internet without worrying about building it or hosting it elsewhere, or even port forwarding. To do that we are going to use a product called ngrok. This tool provides "...secure introspectable tunnels to localhost...". In short we can give our running localhost server a short lived, temporary url to test our meta tags against.

Make sure you have your meta tags set up on your website already. If you don't know where to start you can scroll down to the section "Altering (Or Making) Tags" and then come back.
Download ngrok and follow the setup instructions. (You will need an account but they have a free tier).
Spin up your local web server.
Start ngrok on the same port as the server you are running. For my local Ghost CMS that is port 2368.
Copy the URL from the command line and paste it into your web browser.
You should see the same web server you had running on localhost. 👍

Testing the Tags

There are a couple of ways to do this, and I used both of them, to be sure they were working as I intended.

Use a website that parses meta tags for you, I have had good luck with both metatags.io and heymeta.
You can DM yourself on Twitter, or even post your link to yourself in Slack to the Slackbot, and then unfurl the URL.

There are a few "gotchas" that I noticed with both of these methods.

I am not sure if the above sites cache results locally, but when I was consistently changing the default image for my meta tags I had to test in an incognito window. Otherwise I would often receive the same result over and over.
If, like me, you are checking your meta tags because a previous share left for a lackluster link preview, just note that in applications like Twitter (which preview the link before you send it) are likely to show your old preview. You are going to want to actually send it properly which seems to resolve whatever caching occurs on the link preview.
I wanted to use fully qualified asset links to be safe (e.g. https://site/path/to/image) rather than relative (e.g. ./path/to/image). Because of this quirk I made sure my static assets were available on my production domain before I did the test. If relative links work for you though please let me know so I can update this part of the post.

Altering (Or Making) Tags

If your meta tags aren't quite right, or you aren't even sure where to start the two sites mentioned above (metatags.io and heymeta) allow you to edit the tags directly in the browser and generate the result. This lets you quickly iterate on your design without having to worry too much about the code or missing important tags.

When you're done close down ngrok, push to production and pat yourself on the back.