Was this helpful? Support me via buymeacoffee.com and help me create lots more great content!

Buy me a coffee ☕

Validating Schema.org and Open Graph Tags in your development environment

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 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 Schema.org 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 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 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 localtunnel.me 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 chrisshennandev.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 ServerAliasfor chrisshennandev.localtunnel.me 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
  ServerAlias chrisshennandev.localtunnel.me

  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>
      ....
  </Directory>
</VirtualHost>

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 chrisshennandev.chris.laptop.internal -s chrisshennandev -p 80

You should now see a message stating

Your URL is: https://chrisshennandev.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.

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 with the process of pushing code to stage (or worse, to live) in order to test it.

Originally published at https://chrisshennan.com/blog/validating-schema-org-and-open-graph-tags-in-your-development-environment