Become an expert hotel marketer with our free resources.
Cheat Sheet: Social media meta tags for hotel marketers
According to eMarketer, 2017 will see social media advertising spend reaching $36 billion, which will represent 16% of all digital advertising spend around the world. Because of social media’s rising influence in a traveler’s booking journey, we’ll be looking at social media meta tags for hotels to ensure that your hotel is doing everything it can to be well represented across all social media platforms.
What are social media meta tags?
The social media meta/markup tags are lines of code on a website’s <head> section that instruct social media sites how to display the page when shared on a social media platform. This markup, in a broader context, can be used on articles, videos, images, products, reviews, businesses, and more, but in this case, we’re going to be focusing on those that are relevant for hotels and social media platforms.
What these social media tags do is help to make sure that when somebody shares your hotel website on their own social media profile, the website URL is included with a customised line of text (and description in some cases), as well as a custom image (when applicable). One easy way to test whether your hotel website has the right social media tags is simply by copying and pasting any of your URLs on your platform of choice (Facebook for example). You don’t have to hit publish—you can simply see how the page gets rendered.
Defining social meta tags
Unfortunately not all social media platforms use the same tag markup code. For example, Facebook uses a protocol called Open Graph Tags, whilst Twitter has its own markup. To ensure you’ve catering to all platforms, you’re going to need to add a few different codes. The process is going to be different according to the website system or CMS being used. Popular plugins such as Yoast SEO plugin can help to make social media tag setup relatively easy.
Below we’ve broken down these social tags by platform, showing example code for a fictional hotel. It’s worth noting that meta tags (Title and Description tags) should be customised for all pages already, and although these are primarily SEO tags, they’re also used by some social media platforms (Google Plus for example) to control how a page is displayed when shared.
Twitter Meta Code
<!– Twitter Card data –>
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:site” content=”@hotelname”>
<meta name=”twitter:title” content=”The Title Of My Hotel Website”>
<meta name=”twitter:description” content=”My Hotel description goes here”>
<meta name=”twitter:creator” content=”@hotel_publisher”>
<!– Twitter summary card with large image must be at least 280x150px –>
<meta name=”twitter:image:src” content=”http://www.hotelname.com/twitter.jpg“>
Open Graph Code (Facebook)
<!– Open Graph data –>
<meta property=”og:title” content=”The Title Of My Hotel Website” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”http://www.hotelname.com/” />
<meta property=”og:image” content=”http://www.hotelname.com/facebook.jpg” />
<meta property=”og:description” content=”My Hotel description goes here” />
<meta property=”og:site_name” content=”Hotel name” />
<meta property=”article:published_time” content=”2017-01-12T05:59:00+01:00″ />
<meta property=”article:modified_time” content=”2017-01-12T19:08:47+01:00″ />
<meta property=”article:section” content=”Article Section” />
<meta property=”article:tag” content=”Article Tag” />
<meta property=”fb:admins” content=”Facebook numeric ID” />
Everything else
<!– Update your html tag to include the itemscope and itemtype attributes. –>
<html itemscope itemtype=”http://schema.org/Article”>
<!– Place this data between the <head> tags of your website –>
<title>Page Title. Maximum length 60-70 characters</title>
<meta name=”description” content=”Page description. No longer than 155 characters.” />
<!– Schema.org markup for Google+ –>
<meta itemprop=”name” content=”Hotel Name”>
<meta itemprop=”description” content=”This is the page description”>
<meta itemprop=”image” content=”http://www.hotelname.com/google.jpg“>
<!– Twitter Card data –>
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:site” content=”@hotelname”>
<meta name=”twitter:title” content=”The Title of my Hotel Website”>
<meta name=”twitter:description” content=” My Hotel description goes here “>
<meta name=”twitter:creator” content=”@hotel_publisher”>
<!– Twitter summary card with large image must be at least 280x150px –>
<meta name=”twitter:image:src” content=”http://www.hotelname.com/twitter.jpg“>
<!– Open Graph data –>
<meta property=”og:title” content=”The Title Of My Hotel Website” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”http://www.hotelname.com/” />
<meta property=”og:image” content=”http://www.hotelname.com/facebook.jpg” />
<meta property=”og:description” content=”My Hotel description goes here” />
<meta property=”og:site_name” content=”Hotel name” />
<meta property=”article:published_time” content=”2017-01-12T05:59:00+01:00″ />
<meta property=”article:modified_time” content=”2017-01-12T19:08:47+01:00″ />
<meta property=”article:section” content=”Article Section” />
<meta property=”article:tag” content=”Article Tag” />
<meta property=”fb:admins” content=”Facebook numeric ID” />
This code should sit between the <head> </head> tags on your website, at the top of every page that you want to optimise. This code also includes some basic SCHEMA mark-up code, which is another protocol which allows search engines to understand and interpret data about the website/business.
Guidelines for image dimensions and title lengths
Social media platforms typically limit the size of the photo and the number of characters it displays for the text, so it’s important that you format the photo aspect ratio and the text descriptions so that they suit each particular platform. The information below should help for when it comes to deciding on your image dimensions and tag lengths.
Facebook
Images: 1,024 x 512
Title text: Between 60-90 characters
Description text: Best under 200 characters, over 300 characters will be truncated
Twitter Recommendations
Images: 1,024 x 512
Title text: 70 characters
Description text: 200 characters
Please note, these recommended dimensions can and do change, so as always, the best thing to do is to test how the social tags are appearing before you make any big changes. Try it out on a demo/dev server URL first of all before spending time cropping and resizing images for a site-wide rollout.
How to test your social media tags
As mentioned above, it’s important to thoroughly test your hotel websites social media tags, and luckily there are a few tools you can use to do this aside from just copying and pasting the URL onto the social networks of your-choosing.
Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/sharing
Twitter Card Validator: https://cards-dev.twitter.com/validator
Note that your hotel URL needs to be whitelisted for this tool to work; this can be done through tool if your card has been set up correctly and is public accessible.
Does my hotel need social media meta tags?
Simply put, yes. Social media tags are an important element to ensuring that your hotel website displays properly throughout social media channels when it is shared. And with social media playing an influential role in how travellers learn about new hotels, you’ll want to put your best digital face forward across all media channels.
3 thoughts on “Cheat Sheet: Social media meta tags for hotel marketers”
Leave a Reply
Stay on top of hotel distribution and marketing trends.
Sign up for Travel Tripper's newsletter to get the latest news, tips, and resources delivered to your inbox.
subscribe
The main thing i am wondering is . How it impacts the seo? The only thing i know about it is that whenever i put multiple tags to my wordprss post’ all are written under this tag. Why it is important? Can you please tell me?
Hi avoiresoft, thanks for reading. It would be hard to provide an explanation without looking into the code of your site. We recommend you speak with your web developer or agency to discuss any issues you might be having.
i just want to know the tag purpose. If that was a problem i would have contact the admin. Everything is fine. Its a way of wordpress and yoast SEO plugin to put all the tags inside the <meta property="”article:tag”" …. The only thing i want to know the purpose of this tag.
the code i found in my site is:
I JUST WANT TO KNOW THIS TAGS PURPOSE.