Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Defining how an Open Graph Post is displayed

I'm posting a custom Open Graph object/action to Facebook successfully.

Our production and staging environments each have their own FB app, which are configured identically (except that in our production app, objects and actions are approved, as is our App Details page).

For some reason though, staging is posting with a larger photo with title/description underneath. Production posts have a smaller image with all text to the right.

I don't remember doing anything special on staging, but in the end, we want posts from production to look like they do on staging. Any idea which setting I need to tweak?

UPDATE: I've learned the stories with larger images are called "image-led stories." The only thing that's mentioned in the above link as to how to get this new layout is:

Larger News Feed story layout generated by an Open Graph post using an image size larger than 200 x 200px.

Using the FB debugger, you can see that both images scraped by FB are 600x600:

  • Story from production (small layout)
  • Story from staging (large layout)

enter image description here

like image 872
djibouti33 Avatar asked Apr 22 '13 21:04

djibouti33


People also ask

How does an Open Graph work?

Open Graph is a technology first introduced by Facebook in 2010 that allows integration between Facebook and its user data and a website. By integrating Open Graph meta tags into your page's content, you can identify which elements of your page you want to show when someone share's your page.

How do you set up an Open Graph?

Setting Open Graph settingsOpen Graph Title - The text that displays as the page's title when shared. Open Graph Description - The text that displays under the title, and gives people a description of the shared page's content. Open Graph Image - The image that displays above the title and description.

What is Open Graph settings?

Open Graph is a protocol that enables you to display Sitefinity CMS content items via the MVC widgets on social network as rich objects. For example, if you paste a link of the detailed view of a News item on Facebook, you can configure an Open Graph title, description, and image for this News item.

What is Open Graph image in SEO?

Open Graph is an HTML markup used by social networks to display shared content. Social networks use the OG tags to create rich objects in the social graph. However, Open Graph doesn't provide detailed information about your page to search engines.


1 Answers

Frustratingly, there is no setting you can tweak, and it's totally out of your control as to how your posts will display in someone's News Feed. If you want the "image-led" display style, your photos need to be >= 200x200, but other than that, Facebook determines how it's going to display something.

I found this out after a few days of banging my head and reading everything over the web and finally giving up. We shipped the feature and I just told my coworkers there was nothing we could do.

Then, in my News Feed, I saw a coworker's posts, and they were formatted with the small image. Later that day, she sent an email thanking me because she was excited about the OG integration with our site, and the screenshot she sent had her posts in her feed with the large image.

Same person, same posts, different display in two different feeds.

like image 124
djibouti33 Avatar answered Sep 17 '22 12:09

djibouti33