Article

Localtunnel: Easily validate your Schema.org and Open Graph Tags

Validating Schema.org 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 convenience way to do things, it did allow you to progress.  Other tools require you to enter a URL which is crawlable in order to perform the validation but while the code changes reside in your development environment it can be a 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 a externally facing stage site and either diasable 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 Schema.org markup" and option 3 is probably only available to freelancers and will most likely not be viable in a commerical setting.

The Solution: Using localhost

These days this is less of a problem with tools like localtunnel.me 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 localtunnel.me subdomain (i.e. https://fuwishwdsv.localtunnel.me) 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, localtunnel.me allows you to request a subdomain using the -s option, i.e.

lt -p 80 -s insidetheagencydev

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 localtunnel.me users.

If you are developing using http://localhost then that should be everything you need, but if like me you have a development URL which you use (i.e. http://insidetheagency.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 are 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 insidetheagency.chris.laptop.internal as the URL of my existing development site and I want to request insidetheagencydev.localtunnel.me as the URL from localtunnel.me.  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 ServerAlias for insidetheagencydev.localtunnel.me in your VirtualHost configuration and so it might look like the following:

Github Gist Placeholder

2) Restart Apache2

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

Mac OSX - sudo apachectl restart

Ubuntu - sudo service apache2 restart

3) Start localtunnel.net

lt -l insidetheagency.chris.laptop.internal -s insidetheagencydev -p 80

You should now see a message stating

Your url is: https://insidetheagencydev.localtunnel.me

Now you can validate your Schema.org 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.

localtunnelme.jpg

Conclusion

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

How do you validate your markup in development?  Please ask any questions below and all comments are greatly received.

me.jpeg

I am a web developer specialising in web driven applications using PHP, MySQL, Symfony and Zend and I am currently working for the The Drum in Glasgow, Scotland.

Most days I can be found frantically coding away with EuroDance in my ears and consuming what I hope to be a never ending supply of coffee... happy days!

Want more like this?

Keep up-to-date with latest news from Inside the Agency using any of the following services

Advertisement

Digital Ocean

Chris's Reading List

www.thoughtworks.com

BFF @ SoundCloud

Our friends at SoundCloud embarked on a journey a few years ago that changed their system and moved it from a monolithic Rails application towards an ecosystem of microservices. Read more

The Drum

The Drum

Google'€™s AMP is bringing some much needed speed to mobile but the transition won'€™t be easy for publishers

A week after launching, the Google-led Accelerated Mobile Pages (AMP) initiative has raised more questions than answers for publishers... Read more

SitePoint

SitePoint

Quick Tip: How to Permanently Change SQL Mode in MySQL

MySQL 5.7 introduced some awkward changes for older codebases and tends to break apps. Here's how to temporarily (or permanently) lower the strictness level Read more

SitePoint

SitePoint

How to Build Your Own Dependency Injection Container

Andrew Carter builds a Dependency Injection container from scratch, showing you how that rocket science is really just fireworks strapped to lego figures! Read more

AuthorityLabs

AuthorityLabs

13 Reasons Your Organic Traffic is in Decline | It's Not a Penalty

The landscape of search engine optimization has changed drastically in the last 3-4 years. Even as it changes, a lot stays the same. It has been very challenging to see a multitude of friends and colleagues approach me with problems that often seem beyond repair with clients that they have worked with for years. Read more

TechCrunch

TechCrunch

WordPress Sites Now Support Google’s AMP To Make Mobile Pages Load Much Faster

Google has some big plans when it comes to making the web faster on your mobile phone. The company just added AMP-enabled pages in its mobile search results... Read more