Getting Facebook and Twitter to Display Primary Image from Articles

A series of social media icons displayed on a smart phone screen.

Step 1: Enable Open Graph & Twitter Card Modules

Please note: this step requires the user to be a Site Builder. If you do not have this role, please email the SiteFarm team for assistance in completing this step for you.
  1. From the admin panel, click on Manage » Extend.
  2. Enable Metatag: Twitter Cards, Metatag: Open Graph, and Metatag: Facebook:
    The list of the three metatag modules that need to be enabled to make images display correctly on social media platforms.
  3. Clear your site cache using Shortcuts » SiteFarm Config » Clear Caches.

Step 2: Acquire a Developer account on Facebook

Configuring your content correctly for Facebook requires that you obtain an 'app id'. To do so, you will need to register your page per the Facebook Developer resources. This will take you to the developer.facebook.com page using the Get Started button in the upper right corner. Follow the instructions and note the 'app id' generated for your account.

Step 3: Configure Metatag Modules

[Updated October 2019]

  1. If you would like, for reference only, you can open Manage » Help and then, under Module Overviews, click on Token to see a complete list of the available Tokens in SiteFarm. No changes to this page are necessary.
    A list of available Help topics with the link to the Token page encircled to make it easier to find in the list.
  2. Go to the end of your site domain (example: https://sitefarm.ucdavis.edu/ or http://yoursite.sf.ucdavis.edu) in the browser field and type or paste in /admin/config/search/metatag/node. NOTE: make sure to include the square brackets indicated [ token ] as shown below.
    • Under BASIC Tags
      • > Description add the token:
        [node:summary]
    • Under ADVANCED
      • > Image add the token:
        [node:field_sf_primary_image:sf_landscape_16x9:url]
    • Under OPEN GRAPH
      • > Content Type add the text:
        website
      • > Page URL add the token:
        [current-page:url:absolute]
      • > Title add the token:
        [node:title]
      • > Description add the token:
        [node:summary]
      • > Image add the token:
        [node:field_sf_primary_image:sf_landscape_16x9:url]
      • > Image 'alt' add the token:
        [node:field_sf_primary_image:alt]
    • Under FACEBOOK
      • > Facebook Application ID  add:
        the 'app id' provided in Step 2
    • Under TWITTER CARDS
      • Twitter Card type: Photo card
      • > Description add the token:
        [node:summary]
      • > Site's Twitter Account
        Your account details
      • > Title add the token:
        [node:title]
      • > Image URL add the token:
        [node:field_sf_primary_image],[node:field_sf_hero_banner]
      • > Image alternative text add the token:
        [node:field_sf_primary_image:alt] 
  3. Click Save to finish.

Step 4: Test your work

  1. Go to Twitter Card Validator.
  2. Enter the URL of one of your article pages you want to test.
  3. Click the Preview Card button which will show you an example output. With the settings entered above, you will see your twitter account name, the article's image and title.
    Example of a successful Twitter Card output.
    Example of a successful Twitter Card output.
  4. Go to Facebook debugger.
  5. Paste in the URL of a piece of content shared to Facebook.

Category

Tags