Open Graph Meta Tags allow for some control over how information goes from a third party to a social media platform. This is done by using Open Graph meta tags in the <head> part of the landing page.
These tags can affect conversion and click-through rates. They don't directly affect the on-page SEO but will help with the links on social media.
Facebook Open Graph Meta Tags
og:title
This is the title that shows on the thumbnail. Without this tag, it will use the meta title instead.
eg. <meta property="og:title" content="Your eye-catching title here" />
og:url
This allows you to define one page that all the shares will go to when you have more than one URL for the same.
e.g. <meta property="og:url" content="http://www.yourdomain.com"/>
og:type
This is for describing the kind of object you are sharing (blog post, video, picture, etc.) which is useful as it will determine if your content will appear in a user's interest section of her profile if they 'Like' it.
e.g. <meta property="og:type" content="website" />
og:description
This is where you describe your content, but instead of it showing on a search engine results page, it shows below the link title on Facebook.
Note: This won't affect your SEO.
e.g. <meta property="og:description" content="Your entertaining and descriptive copy here, if your meta description is good, use it." />
og:image
This is how you ensure that a particular thumbnail will be shown when your page is shared.
e.g. <meta property="og:image" content="http://www.yourdomain.com/image-name.jpg"/>
Note: The hosted landing page and hosted image domain must match for the og:image to work.
Advanced Open Graph Tags
og:locale - defines the language
og:site_name - if the page (object) you are sharing is part of a larger netw
og:audio or og:video - to add additional audio or video files to your object
fb:app_id - for linking to a Facebook application (e.g., FB Comments) with the object
To share the page's content on LinkedIn, the following tags must exist and in their correct format:
og:title
e.g. <meta property='og:title' content='Title of the article'/>
og:image
e.g. <meta property='og:image' content='//media.example.com/ 1234567.jpg'/>
og:description
e.g. <meta property='og:description' content='Description that will show in the preview'/>
og:url
e.g. <meta property='og:url' content='//www.example.com/URL of the article'/>
There are also image requirements specific to the LinkedIn sharing module:
Max file size: 5mb
Minimum image dimensions: 1200 (w) x 627 (h) pixels
Recommended ratio: 1.91:1
This can be added in the Custom Head HTML section on your landing page.
Twitter/X Card Tags
twitter:card
The card type which will be one of “summary”, “summary_large_image”, “app”, or “player”.
(Only one card type per-page is supported. If more than one twitter:card value exists in the page, the “last” one in sequence will take priority.)
twitter:site
The Twitter/X @username the card should be attributed to (not required)
og:title
A concise title for the related content.
og:description
A description that concisely summarizes the content as appropriate for presentation within a Tweet.
og:image
A URL to a unique image representing the content of the page.
og:image:alt
A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.
Using Open Graph Tags and Twitter/X Cards
The Open Graph tags can be added to your landing pages by going to Advanced Settings and inserting them into the Meta Tags under the SEO.
Example from developer.x.com
<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@nytimesbits" /> <meta name="twitter:creator" content="@nickbilton" /> <meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" /> <meta property="og:title" content="A Twitter for My Sister" /> <meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." /> <meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com