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

Recent articles

Behind the Paywall - An Insider Point of View

Over the years, a number of publishers have tried their hand at implementing a paywall. These efforts have been met with varying degrees of success:

paywall.jpg

The Sun introduced a paywall on the 1st August 2013, partially removed it in the summer of 2015 and removed it completely on the 30th November 2015. The Financial Times introduced its paywall in 2007, however, they chose to relax the paywall in 2015 in an effort to combat sluggish growth and The Times introduced its paywall in 2010, which recent news suggests it be performing well.

Read more

Four things that suck about project management

Project management is not a glamorous job.   The better you are, the less you’re noticed: things just hum along nicely, with no major conflicts or serious misunderstandings.  If you’re diligent, skilled, dedicated and competent, someone else will get credit.  The software, application, website or rebuild you so lovingly slaved over will be attributed to your boss, your client, or – if you’re lucky – to your developers or creatives.

In fact, the only time a project manager can rely on getting any real attention is when things go wrong.  A host of complex issues may be present – problematic management behaviour, shifting requirements, lack of necessary cooperation from the wider business, underinvestment in skill or resource – but the blame is ultimately yours.  You’re the project manager.

Read more

“My boss doesn’t get it.” The puzzle of motivation.

Management roles have traditionally focused on issuing assignments and offering rewards.  For much of the industrial age, this worked well.  In the vast majority of situations, people do work harder if they know they’ll get a financial bonus or more recognition.  Primed with 100 years of business advice, managers feel they have the tools they need to get things done, retain their staff and hit their targets.

carrot.jpg

But when they find themselves at the helm of a team of developers, or a mixed team of designers and developers, managers get confused.  The promise of rewards only goes so far.   Sometimes, incentives fail to generate any interest and may even lead to resistance.  Developers who never voice any dissatisfaction put in their notice and move on without any explanation, leaving you scratching your head.  It’s really confusing, and there are no easy answers. 

Read more

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