What Are Open Graph Meta Tags?
Open Graph Meta Tags give you control over how your content is previewed on social platforms. They allow you to define what title, image, and description are displayed. These tags improve link previews and can increase click-through rates. They do not affect on-page Search Engine Optimization (SEO), but they help optimize social media sharing.
Where to Add Open Graph Meta Tags
Add Open Graph tags in the Facebook OG Tags HTML section of the Info tab on your landing page.
Facebook Open Graph Meta Tags
Use these Open Graph tags to define how your content is shared on Facebook:
og:title
Sets the title that appears in the link preview.
<meta property="og:title" content="Your eye-catching title here" />
og:url
Defines the canonical URL when multiple URLs lead to the same content.
<meta property="og:url" content="http://www.yourdomain.com" />
og:type
Describes the type of content (e.g., blog, website, video).
<meta property="og:type" content="website" />
og:description
Provides a short description shown under the title on Facebook.
<meta property="og:description" content="Your entertaining and descriptive copy here." />
Note: This won't affect your SEO.
og:image
Specifies the thumbnail image that appears in the preview.
<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 Facebook Tags
You can include these additional tags:
og:locale– sets the page languageog:site_name– names the broader site or brandog:audioorog:video– adds media filesfb:app_id– links to a Facebook app (e.g., for comments)
LinkedIn Sharing Tags
To customize how your page looks on LinkedIn, include:
og:title
Sets the title that appears in the link preview.
<meta property="og:title" content="Your eye-catching title here" />
og:url
Sets the web address the link preview points to.
<meta property="og:url" content="https://www.yourdomain.com" />
og:description
Provides a short description shown under the title on LinkedIn.
<meta property="og:description" content="Your entertaining and descriptive copy here." />
og:image
Specifies the thumbnail image that appears in the preview.
<meta property="og:image" content="https://www.yourdomain.com/image-name.jpg" />
Image Requirements
Max file size: 5 MB
Minimum dimensions: 1200 x 627 pixels
Recommended ratio: 1.91:1
Twitter/X Card Tags
Use these tags to configure how your page appears in Tweets. The card type which will be one of “summary”, “summary_large_image”, “app”, or “player”.
Note: 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:card
Defines the type of card to display. Use one of these values: summary, summary_large_image, app, or player.
<meta name="twitter:card" content="summary_large_image" />
twitter:site
Sets the X handle the content is credited to. This tag is optional.
<meta name="twitter:site" content="@yourhandle" />
og:title
Sets the title that appears on the card.
<meta property="og:title" content="Your eye-catching title here" />
og:description
Provides a short description shown under the title on the card.
<meta property="og:description" content="Your entertaining and descriptive copy here." />
og:image
Specifies the image that appears on the card.
<meta property="og:image" content="https://www.yourdomain.com/image-name.jpg" />
og:image:alt
Describes the image for people who use screen readers.
<meta property="og:image:alt" content="Image description for accessibility" />
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..." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />
Troubleshooting
LinkedIn Link Previews
If LinkedIn does not show your updated Open Graph content, LinkedIn may be showing a cached version of your landing page. LinkedIn can cache link preview content for up to 7 days.
Refresh Your LinkedIn Link Preview
Use LinkedIn's Post Inspector to refresh the cached preview:
Open the LinkedIn Post Inspector.
Paste your landing page URL into the field.
Click Inspect.
Check the updated link preview.
After LinkedIn refreshes the cached content, your latest Open Graph title, description, and image should appear in the link preview.
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com.