Wrong Image appearing on Facebook Link Preview Wihtout OG Tags

Home » Social Updates » Wrong Image appearing on Facebook Link Preview Wihtout OG Tags
Social Updates No Comments

When you create a link post on RecurPost, you have the option to attach an image with it to replace the default image. In good old times, Facebook allowed us to post this new image along with the link. However, Facebook had a big issue with Fake News and hence they stopped allowing that. You can no longer edit the Title, Description or Image attached with a link but you can still control it using Facebook OG tags.

Note: For some of the media publishing accounts, Facebook allows changing these things. You’d know if your account is one of those.

This is why you will not see the image on your link once it gets posted. However, there is a better way to take care of this if you are sharing link from your own website. It is called OG Tags also known as open graph meta tags. Let me explain Facebook OG Tags and how to add them to your website.

Open tags were introduced by Facebook around 2010. These tags allow webmasters to tell other websites what image, title and descriptions should be picked from your website. OG tags got so popular that almost every website uses them now.

All OG Tags are added between your <head> and </head> tags. If you are using a content management system such as wordpress, there should be many plugins for you to add OG tags to every post automatically.

OG Tags for Facebook

Title tag: If you want a custom title for your post you need to add this tag.

<meta property=”og:titlecontent=”Your title text goes here“/>

Once you add this tag, this title will appear on your link when it gets posted.

Description tag: Similar to the title tag, you can add a description tag as well.

<meta property=”og:descriptioncontent=”Write a description for your page here” />

Image tag: Your image tag takes image URL.

<meta property=”og:imagecontent=”https://yourdomain.com/YourImage.jpg”/>

Make sure that your image URL is valid.

There are a few more tags such as Type, Site_Name etc. but they are not needed if all you want OG tags for is to publish posts on social accounts.

OG Tags for Twitter

Twitter can always read your OG tags, but if you want a different text or image on Twitter you can use Twitter’s own OG tags. Also, you can use Twitter’s OG tags if you want your image to appear in large size.

Twitter large image OG Tag: If you want a large image to appear with your link you should add this tag on your website:

<meta name=”twitter:cardcontent=”summary_large_image“>

It will make sure your images appear in full width on Twitter.

Attribution tags for Twitter: If you want to let others know who is the creator of that site then you can use these tags.

<meta name=”twitter:sitecontent=”@recurpost“>

<meta name=”twitter:creatorcontent=”@recurpost“>

Title OG tag for Twitter: You can add a title tag on Twitter just like the OG title tag. Here is the tag for you:

<meta name=”twitter:titlecontent=”Your title text goes here“>

Description OG tag for Twitter: 

<meta name=”twitter:descriptioncontent=”Write a description for your page here”>

Image OG tag for Twitter: 

<meta name=”twitter:imagecontent=”https://yourdomain.com/YourImage.jpg””>

These tags should come handy when you are having trouble getting your link previews the way you want. Please let us know if you have a further question or suggestion on OG tags.

LEAVE A COMMENT