RocketFusion CMS

Setting the OG Image for Sharing on Facebook and Twitter

photo pf Facebook post
Shared Calendar Event with Attached Image

When sharing a news article or any other "inner page" on the website to social media such as Facebook or Twitter, the RocketFusion platform will always use the attached image on that page as the OG Image (Open Graph). Other OG values are OG Title and OG Description. You can find a full list at the bottom of this article.

You must manually set the default OG Image for the whole site so pages such as you homepage or any other page that doesn't have an attached image.

To set the "OG Image" (Open Graph):

  • Log in as admin
  • Admin Panel > Page Graphics
  • Upload New Image
    • Image should be squarish
    • Image should be about 500 x 500 pixels
  • Admin Panel > Meta Tags
  • Scroll down the Image OG Image box till you find the image you uploaded
  • Check the radio button next to the image
  • Save Changes

Some things to note:

  • You may already have an image you can use in the library, so perhaps start by going to Admin Panel > Meta Tags and scrolling through the list to see if there's something there.
  • If there are many images in the library that are old and shouldn't be up there anymore, you can click the white "Check for Usage" button while on the Page Graphics page to see if any of the images are in use on any pages. If not, you can delete them by checking the Del checkbox for each, then checking the Confirm Deletes checkbox next to the Save Changes button.
  • After changing your OG image, Facebook may still display the old one. If that's the case you'll need them to re-"scrape" the image by going to Admin Panel > Meta Tags and clicking the red Facebook's Sharing Debugger link and click the Scrape Again button. Currently it appears it's using a lawn with flowers photo. See below.

BTW, when we say "Admin Panel" that's the panel that pops out when you mouse-over the rocket logo on the top left of the screen.

Appears in: General / Other

 

List of Important OG Values

Sample Facebook post with image

When you share a page of any kind on your website to Facebook, Twitter or LinkedIn, they actually go to your page and look through the hidden meta tags for the OG values and build the post using those values.

To create an effective shared post, you must make sure you have a good title/headline, a good first paragraph of content, and a good photo or image. These are then automatically translated into the OG values you see below:

<meta property="og:image" content=" ">
<meta property="og:image:alt" content=" ">
<meta property="og:title" content=" "> 
<meta property="og:description" content=" ">
<meta property="og:url" content=" ">
  • og:image will be the image above or to the side (depending on the height / width ratio of the image) of the rest of the shared content.
  • og:image:alt is the "alt text" associated with the image for those using a screen reader. If blank, we use the title here.
  • og:title will be the page/nav/headline title of you page.
  • og:description will be the first paragraph of your content.
  • og:url will be the full URL page address of the shared page, though Facebook etc will only show the main domain name in the post.