You’ve made sure your pages look good and attract customers. But how do your pages look “offsite”?
More specifically, how do your pages look when they get shared on social media sites like Facebook, LinkedIn, Twitter, and Pinterest?
This is how our site, Alertdesk.com, looks:
How Alertdesk.com looks when shared on Facebook.
How did we achieve that? The answer is social tags.
Social tags refer to Open Graph and the Twitter Cards, which are meta tags you place in the
-section of your pages.Setting up social tags can make your pages more eye-catching when shared on social media. Properly set up tags can also help sites like Facebook to better understand what your content is about.
Types of social tags
There are essentially two types of social meta tags – those who work on Twitter and those who work on every other site, roughly speaking.
These two types are called Twitter Card and Open Graph.
Twitter Card, developed by Twitter (who would have guessed?), mainly works on Twitter. By adding it to your pages, users who share your pages on Twitter will have a “card” added to their tweet. You can read more about Twitter cards here.
Open Graph, developed by Facebook, works on a few more sites than just Facebook. LinkedIn and Pinterest, to name a few, also support the Open Graph-format. You can read more about the Open Graph protocol here.
Which tags should you use?
There are many kinds of Open Graph- and Twitter Card tags and attributes. We’re not going to cover them all in this article.
The tags below are the ones you should have to help sites like Facebook and Twitter better understand your content.
Open Graph tags
- og:title – The title of your page (doesn’t have to match your page title).
- og:url – The canonical URL of your page (all shares will go to this URL).
- og:image – The URL of the image you want to appear in your social snippet (recommended resolution 1200×627 px).
- og:description – A description of your page (doesn’t have to match your page’s meta description).
It can also be a good idea to add:
- og:type – The type of content (Article, website, video, etc.).
- og:locale – Your page’s language (Facebook will assume this is “en_US” if no other is set).
Twitter Card tags
- twitter:card – The type of card you want – choose between 4 types.
- twitter:title – The title of your page (doesn’t have to match your page title).
- twitter:description – A description of your page (doesn’t have to match your page’s meta description.
- twitter:image – The URL of the image you want to appear in your social snippet (1:1 aspect ratio – minimum 144×144 px and maximum 4096×4096 px).
Note: For Pinterest, there are a few more Open Graph tags available. You can view Pinterest’s documentation here.
How to set up your tags
If you are using WordPress, several plugins can get the job done. SEO plugins like Yoast SEO and RankMath both have a social feature, where you can customize your Open Graph and Twitter Card data.
Almost all CMS’ either have this functionality natively, like Squarespace, or has some kind of plugin or add-on for it like Magento.
How to view and debug your tags
Sometimes you may need to test and debug your tags. For that, you can use these tools to get the job done:
🤳 Use Alertdesk to check your social tags
In our social & content reports, you can see how your page will look on Facebook and Twitter when shared.
We also check to see if you are missing any of the recommended social tags (the ones mentioned above).
Check your social tags today with Alertdesk. Try us free for 14 days.
Top comments (0)