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<meta property='og:title' content='Title of the article'/>
og:image<meta property='og:image' content='//media.example.com/1234567.jpg'/>
og:description<meta property='og:description' content='Preview description'/>
og:url<meta property='og:url' content='http://www.example.com/URL'/>
Image Requirements
Max file size: 5MB
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.
<meta name="twitter:card" content="summary_large_image" />
twitter:site
Sets the Twitter handle to attribute the content (optional).
<meta name="twitter:site" content="@yourhandle" />
og:title, og:description, og:image, og:image:alt
These work similarly to Facebook tags but are used in Tweets.
<meta property="og:title" content="Title" /> <meta property="og:description" content="Short summary" /> <meta property="og:image" content="http://www.yourdomain.com/image.jpg" /> <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" />
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com