Open Graph meta tags

Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media.

They’re part of Facebook’s Open Graph protocol and are also used by other social media sites, including LinkedIn and Twitter (if Twitter Cards are absent).

You can find them in the <head> section of a webpage. Any tags with og: before a property name are Open Graph tags.

Here are some examples :

"How to Become an SEO Expert (8 Steps)" />
<meta property="og:description" content="Get from SEO newbie to SEO pro in 8 simple steps." />
<meta property="og:image" content="https://ahrefs.com/blog/wp-content/uploads/2019/12/fb-how-to-become-an-seo-expert.png" />

Facebook lists 17 OG tags in their official documentation, plus dozens of object types. We’re not going to discuss all of these. Only four are required for Facebook to understand the basics of your page, and there are a couple of others that sometimes help.

Let’s go through these.

og:title

The title of your page.

Syntax

<meta property="og:title" content="Open Graph Meta Tags: Everything You Need to Know" />

Best practices

Add it to all “shareable” pages.
Focus on accuracy, value, and clickability.
Keep it short to prevent overflow. There’s no official guidance on this, but 40 characters for mobile and 60 for desktop is roughly the sweet spot.
Use the raw title. Don’t include branding (e.g., your site name).

og:url

The URL of the content.

Syntax

<meta property="og:url" content="https://ahrefs.com/blog/open-graph-meta-tags/" />

og:image

The URL of an image for the social snippet.

Note that this is perhaps the most essential Open Graph tag because it occupies the most social feed real estate.

Syntax

<meta property="og:image" content="https://ahrefs.com/blog/wp-content/uploads/2020/01/fb-open-graph-1.jpg" />

Best practices

Use custom images for “shareable” pages (e.g., homepage, articles, etc.)
Use your logo or any other branded image for the rest of your pages.
Image(JPG or PNG) of size less than 300KB and minimum dimension of 256 x 256 pixel is advised .

og:type

The type of object you’re sharing. (e.g., article, website, etc.)

Syntax

<meta property="og:type" content="article" />

og:description

A brief description of the content.

Syntax

<meta property="og:description" content="Learn about 13 features that set Ahrefs apart from the competition." />

Best practices

Complement the title to make the snippet as appealing and click-worthy as possible.
Copy your meta description here if it makes sense.
Keep it short and sweet. Facebook recommends 2–4 sentences, but that often truncates.
Maximum 65 characters

og:locale

Defines the content language.

Syntax

<meta property="og:locale" content="en_GB" />

Best practices

Use only for content not written in American English (en_US). Facebook assumes content without this tag is written in this language.

<!-- MS, fb & Whatsapp -->

<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg">    

<!-- fb & Whatsapp -->

<!-- Site Name, Title, and Description to be displayed -->
<meta property="og:site_name" content="Example">
<meta property="og:title" content="Example">
<meta property="og:description" content="Example">

<!-- Image to display -->
<!-- Replace   «example.com/image01.jpg» with your own -->
<meta property="og:image" content="http://www.example.com/image01.jpg">

<!-- No need to change anything here -->
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">

<!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp -->
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">

<!-- Website to visit when clicked in fb or WhatsApp-->
<meta property="og:url" content="http://www.example.com">

Shikha Pathak

How to show link thumbnail, when link shared on social media?

Open Graph meta tags

og:title

Syntax

Best practices

og:url

Syntax

og:image

Syntax

Best practices

og:type

Syntax

og:description

Syntax

Best practices

og:locale

Syntax

Best practices

Note: Image resolution is 256 x 256.

0 comments:

Post a Comment

FAVOURITE LINE

SAY HELLO TO ME

ADDRESS

EMAIL

Skype

How to show link thumbnail, when link shared on social media?

Open Graph meta tags

Which Open Graph tags should you use?

og:title

Syntax

Best practices

og:url

Syntax

og:image

Syntax

Best practices

og:type

Syntax

og:description

Syntax

Best practices

og:locale

Syntax

Best practices

Note: Image resolution is 256 x 256.

0 comments:

Post a Comment

FAVOURITE LINE

SAY HELLO TO ME

ADDRESS

EMAIL

Skype