1

Does this look correct? All of the actual content is obviously placeholders for developers.

<meta property="og:type" content="article"/>
<meta property="og:title" content="Title of Page"/>
<meta property="og:description" content="Meta Description of Page"/>
<meta property="og:url" content="URL of Page"/>
<meta property="article:published_time" content="Date Article Published">
<meta property="article:tag" content="Main Tag or Keyword">
<meta property="og:image" content="Use Main Image URL"/>
<meta property="og:image:type" content="image/imageextension"/>
<meta property="og:image:width" content="Width of Main Image"/>
<meta property="og:image:height" content="Height of Main Image"/>
<meta property="og:image:alt" content="Alt Text of Main Image" />
<meta property="og:image" content="Use Second Image URL"/>
<meta property="og:image:type" content="image/imageextension"/>
<meta property="og:image:width" content="Width of Second Image"/>
<meta property="og:image:height" content="Height of Second Image"/>
<meta property="og:image:alt" content="Alt Text of Second Image" />
  • I've never included that much og meta-data to get the preview for an article to look nice on FaceBook. I think you could get by with just a few of those tags. – Stephen Ostermiller Mar 9 at 1:01
1

All of the OpenGraph meta tags you have added are valid, however a lot of them will largely be ignored by social media and other websites. The key tags you need for OG are...

<meta property="og:type" content="article"/>
<meta property="og:title" content="Title of Page"/>
<meta property="og:description" content="Meta Description of Page"/>
<meta property="og:url" content="URL of Page"/>
<meta property="og:image" content="Use Main Image URL"/>
<meta property="og:image" content="Use Second Image URL"/>

OpenGraph tags which alter the format of the elements being described often get ignored in favour of the formatting and layouts used within the site parsing your OpenGraph tags. While it is nice to put in what size the image should be generally these sites will be able to detect what the size is from the image itself and will scale it appropriately to display it to the end user. Additionally things like file type declaration for the images are not generally needed as the parsers auto-detect the image file type during parsing.

The last thing to remember is that while OpenGraph is useful for telling social media sites and other OpenGraph consumers about your page and how to show details to the user trying to share, link, etc, often times a lot of the content will be auto-detected from the rest of the page itself. Some tags are treated as the authority compared to the rest of the pages content (for now at least) but by and large as long as you have a type, title, basic description (very short), the url, and maybe one or two image URL's you are hitting all the generally used tags.

1

Something to be aware of is that Fb has a minimum image size, under which it will silently reject the image but place the post.

As such, without seeing the meta values for og:image:width and og:image:height it cannot be said if it "looks correct" as BAM asked.

https://developers.facebook.com/docs/sharing/best-practices/

"At the minimum, you should use images that are 600 pixels in width to display image link ads. We recommend using 1:1 images in your ad creatives for better performance with image link ads."

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.