Here’s what it looks like when I share a link to the website of my current company on social media (LinkedIn, Twitter, Facebook).
Most people scroll through social media without paying much attention to “uninteresting stuff”, so rather than just seeing a link and ignoring it, try to sell yourself, or your business at first glance. This can also go a long way on your advertisement and marketing journey, as different pages of your website can pass different messages by just sharing a link to that page in particular to the target audience.
Using optimized and targeted messages and images in the opengraph tags is also very important for websites that deal with media (videos, music, podcast, etc) as the cover image for each audio, or video will be shared along with the links.
Now that we have that out of the way, how do we go about adding the right tags for different social media to each of our pages?
REQUIRED META TAGS
There are four required Opengraph meta tag properties for every page:
og:title - The title of the page as you want it to appear.
og:type - The type of your object. Depending on the type you specify, other properties may also be required.
og:image - URL to the image to be displayed.
og:url - The canonical link to the desired page.
Here’s the code that produced the image shared at the beginning of this article
<meta property="og:title" content="Volomn - Hire developers from top African talent pool"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.volomn.com" />
<meta property="og:image" content="https://www.volomn.com/og-image.png" />
<meta property="og:image:type" content="image/png" />
<meta
property="og:image:alt"
content="Volomn - Hire developers from top African talent pool"
/>
This is for the homepage of the website, and the content can be different per page, to target different audiences, for example, a page that will be shared in an ad targeted at developers might have its og:title looking like this:
<meta name="og:title" content="Volomn - Join a pool of developers from Africa and get access to well-paying jobs"/>
And the og:image changed to something more appropriate, this way prospective candidates get the gist without even having to click the link, and can decide if it’s something they’d be interested in. This could potentially save you ad revenue if you are incurring costs per click.
Twitter Cards
While platforms like Facebook, Instagram, WhatsApp, LinkedIn and Pinterest support Opengraph protocol a great deal, Twitter has its preferred protocol, using Twitter Cards, if these aren’t present in a page’s header, Twitter will fall back to using the Opengraph protocol, if present.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:domain" content="volomn.com" />
<meta name="twitter:url" content="https://twitter.com/volomn_" />
<meta
name="twitter:title"
content="Volomn - Hire developers from top African talent pool"
/>
<meta
name="twitter:description"
content="Volomn - Hire developers from top African talent pool, find well paying remote jobs for technologists"
/>
<meta
name="twitter:image"
content="https://www.volomn.com/og-image.png"
/>
All the tags above can be excluded in order to reduce unnecessary duplication since Twitter will fall back to the Opengraph tags anyway. Except for the twitter:card property which gives information about the page, and the attribution properties like twitter:domain and twitter:url which is used to attribute the link to the account of the author and the website’s Twitter account if there’s one.
The possible content values for the twitter:card property include:
summary: This is the most commonly used Twitter Card type. It consists of a title, a description, and a small thumbnail image. The Summary Card provides a concise preview of the linked content, allowing users to get an idea of what the link is about.summary_large_image: This is similar to the Summary Card but includes a larger, more prominently displayed image. It provides a more visually engaging preview of the content. This card type is particularly useful when you have an eye-catching image related to the linked content that you want to feature prominently in the tweet preview.app: This is designed specifically for promoting mobile applications. It provides information and a preview of a mobile app within the tweet. The App Card includes the app icon, name, description, and some other details. It also offers an install button that allows users to directly download the app from the app store. This card type is ideal for app developers and marketers who want to showcase and promote their mobile applications. (N.B This is available for paid ads)player: This is used for embedding and playing videos or audio content directly within the Twitter stream. It includes a preview image or thumbnail, a title, a description, and a media player. With a Player Card, users can watch videos or listen to audio content without leaving the Twitter platform. It is commonly used for sharing multimedia content such as videos, podcasts, music tracks, or other playable media.
Conclusion
It’s not so easy testing Opengraph meta tags while working locally, to make this easier you could install browser extensions to test before deployment. Using the tags is easy, and the results could be enormous. So do try to test this out with your projects, if you haven’t already.
Learn more:
Opengraph tags:
https://ahrefs.com/blog/open-graph-meta-tags/
Twitter cards:
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards