Sponsored By: Password Angel - Share passwords, API keys, credentials and more with secure, single-use links.

Validating and Open Graph Tags in your development environment

Validating tags, open graph tags and testing how sites like Facebook, Twitter and LinkedIn will treat a link from your site has always been difficult to test in development.

Some tools have allowed you to copy and paste HTML and although it is not necessarily the most convenient way to do things, it did allow you to progress. Other tools require you to enter a URL that is crawlable in order to perform the validation but while the code changes reside in your development environment it can be rather challenging to make these available for testing and generally there have been 3 options available to you:

  • Commit and push your changes up to an externally facing stage site and either disable password restrictions or whitelist the IP address of the validation service you were using
  • Commit and push your changes up to live, test, fix any issues and rinse and repeat several times till it works correctly.
  • Configure your firewall to temporarily allow external traffic through to your development machine Options 1 & 2 are not great because your commit log ends up with several "tweaking markup" and option 3 is probably only available to freelancers and will most likely not be viable in a commercial setting.

The Solution: Using localhost

These days this is less of a problem with tools like which allow you to easily share a web service on your local development machine without messing with DNS and firewall settings. Boiled down, only 2 commands are generally required and to get you up and running.

1) Install Localtunnel globally (requires NodeJS) to make it accessible anywhere:

npm install -g localtunnel

2) Use the command-line interface to request a tunnel to your local server (this assumes you already have your web server configured and running on port 80):

lt -p 80

This will provide you with a random subdomain (i.e. which will allow external traffic to access your development site. The subdomain will change each time your run this but if you need a fixed URL, allows you to request a subdomain using the -s option, i.e.

lt -p 80 -s chrisshennandev

The one thing to bear in mind is that it is a request for a subdomain and you are not guaranteed to get it so it would be wise to use one that means something but is unique enough that it should not conflict with any requests from other users.

If you are developing using https://localhost then that should be everything you need, but if like me you have a development URL which you use (i.e. https://chrisshennandev.chris.laptop.internal) then there are a couple of additional steps you need to follow to get it up and running properly.

The Solution: Using a Development URL

For the rest of the article, I have made the following assumptions

  • You already have a development site configured
  • You have a development URL set up to point to your development site
  • You are using Apache2 as your web server If you are unsure of any of these assumptions, please let me know in the comments and I will try my best to assist.

For this example I will use chrisshennandev.chris.laptop.internal as the URL of my existing development site and I want to request as the URL from In order to achieve this, I need to follow these additional steps.

1) Add ServerAlias to your VirtualHost configuration

Your apache configuration is probably already listening on port 80 so the only change should be to include a ServerAliasfor in your VirtualHost configuration and so it might look like the following:

<VirtualHost *:80>
  DocumentRoot /data/sites/i/chrisshennandev.chris.laptop.internal/web

  ServerName chrisshennandev.chris.laptop.internal

  ErrorLog log/chrisshennandev.chris.laptop.internal-error.log
  CustomLog log/chrisshennandev.chris.laptop.internal-access.log combined

  <Directory /data/sites/i/chrisshennandev.chris.laptop.internal/web>

2) Restart Apache2

Once the VirtualHost configuration has been updated with the server alias you need to restart apache.

Mac OSX - sudo apachectl restart

Ubuntu - sudo service apache2 restart

3) Start

lt -l chrisshennandev.chris.laptop.internal -s chrisshennandev -p 80

You should now see a message stating

Your URL is:

Now you can validate your and open graph tags with the structured data testing tool from Google and continually tweak them until you are happy, all before you make a single commit.


With you can allow external access to any of your development sites within minutes and remove the excessive git commit log messages associated with the process of pushing code to stage (or worse, to live) in order to test it.

Enjoyed this article?

Thank you for reading this article! If you found the information valuable and enjoyed your time here, consider supporting my work by buying me a coffee. Your contribution helps fuel more content like this. Cheers to shared knowledge and caffeine-fueled inspiration!

Buy me a coffee

Originally published at

Subscribe to my newsletter...

... and receive the musings of an aspiring #indiehacker directly to your inbox once a month.

These musings will encompass a range of subjects such as Web Development, DevOps, Startups, Bootstrapping, #buildinpublic, SEO, personal opinions, and experiences.

I won't send you spam and you can unsubscribe at any time.