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.
  3. Enable Metatag: Open Graph.
    A list of three modules with Twitter Cards and Open Graph modules checked in preparation for installation.
  4. Clear your site cache using Shortcuts > SiteFarm Config > Clear Caches.

Step 2: Configure Metatag Module

  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.ucdsitefarm.acsitefactory.com/) 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]
    • Under OPEN GRAPH
      • > Title add the token:
        [node:title]
      • > Description add the token:
        [node:summary]
      • > Image add the token:
        [node:field_sf_primary_image]
    • Under TWITTER CARDS
      • Twitter Card type: Photo card
      • > Description add the token:
        [node:summary]
      • > Title add the token:
        [node:title]
      • > Image URL add the token:
        [node:field_sf_primary_image]
      • > Image alternative text add the token:
        [node:field_sf_primary_image:alt] 
  3. Click Save to finish.

Step 3: 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.

     

Category

Tags