The 3 best tools I use to validate the meta tags present on my websites

#seo #webdev

It is very important to validate and verify how your article or new web page will be displayed when shared.

When a page on the web is shared — be it on Facebook, Twitter, Linkedin, Instagram, whatsapp, etc. — usually there is some kind of preview of it in the application it is being shared (a title, text snippet, description of what it is about, image or whatever is available). When you are the author of this content, it is extremely important to have a lot of control over the information being displayed, as other people share links to your content.

Here we will see the main (in my not so humble opinion) tools available for validating and creating meta tags for your website. By the way, the tools that will be mentioned are the ones I use whenever I post new content and I'm not entirely sure how some platforms will display them. 🧐

Hey Meta

One of the most important things when adding tags to your website header is to focus mainly on the most essential ones. For social sharing, the most important are title and description. Many services that allow you to share links will use these tags to create cards to preview your content. Even if they have specific tags, like Facebook and Twitter, whenever they don't find their tags, services will look for the generic description and title to know what to display in the share.

One tool that does a great job with these tags is Hey Meta. In it, you can put any url to be checked and it will show which meta tags it found in its scan or, if possible, try to guess which one should be present. This tool also provides an easy and practical way to add the essential tags on your website from a 'template' that they generate for you on the platform based on your content.

Facebook debugger

The company Meta, formerly known as Facebook, developed the Open Graph protocol and Facebook uses it to display its cards view on sharing links. In this way, the Open Graph became a social sharing standard available on the web and this is stated on its home page:

While there are many different technologies and schemes that can be combined, there is no single technology that provides enough information to richly represent any given webpage on the social graph. The Open Graph protocol builds on these existing technologies and gives developers something to implement.

As mentioned earlier, Facebook and other networks that use their own meta tags will fall back to base tags if they don't find their own or Open Graph tags (OG tags). However, as also mentioned, OG has become a standard for social sharing, and as such, it becomes important to implement at least the primary OG tags on any page you make available on the internet. The main ones are: og:type, og: title, og:description, og:image and og:url.

Since Facebook is the strongest in this field, it has also taken it upon itself to provide developers with a great tool to validate OG tags from any URL. This application provides a way to validate and preview how your pages will appear when shared on Facebook.

Twitter card validator

Like Facbeook, Twitter also has its own separate protocol. Tags for building the Twitter card on its content are only used by the social network, as most other platforms assume OG tags or native tags as the main focus for obtaining data from the associated url.

The biggest advantage and the main focus of using Twitter cards is having more control over how the card will represent your page on the platform and, for that, the social network has a huge list of options to be included. Due to it being platform specific, it is not a problem to stick to native meta tags and OG tags as Twitter will continue to use the available OG and/or native tags. Here you can check which OG tags present on your page are found and returned by twitter.

Anyway, Twitter tags are great to use if you want more control over what will appear when you share your page, as the platform has developed a twitter URL validator to help you verify how your content will appear to users when shared.

These were the three main tools I use and I find it extremely interesting to verify the information present in my meta tags whenever I publish new content. Of course, there are other very good ones, mainly more complete viewers, but I choose them because Hey Meta helps me to generate the tags in a reliable way and I always use the other two to validate their operation and make adjustments if necessary.

Use these tools to gain greater control over your content's views when shared. If you know of any other good tools that could complement it, I would be very happy if you share it with me below!

I hope this post helped you find what you were looking for! 💙