Custom Image, Title and Description in Joomla to Share Post in Facebook

One of our users asked for a way to customize the content that is displayed when sharing a Joomla article in Facebook.

Facebook scrapes the meta information for the article's description and title, and also automatically pick a relevant image.

I'm going to explain how to add an image to articles and customize the meta information that is displayed when you share a link.

Sharing an article in Facebook

When we share a Joomla article in Facebook, we do it by copy and pasting the URL as a new post.

joomla article facebook share

Automatically, Facebook looks at our article to extract:

  • An image
  • A title
  • A description

joomla article facebook share

A user would ask: where this content is coming from? It may looks like a somewhat random decision from Facebook. The image can be especially confusing. It sometimes just picks the first image from the page, even if that is the site's logo. 

However, we can decide which content to display on Facebook. Continue reading to find out how.

Step #1. Choose an image for your article

There is no guarantee this method will work as expected, however adding an image to our article will increase the chances that Facebook can pick our choice.

  • Go to Content > Articles > Your article

There are two methods to include an image within an article. 

First, you can go the "Images and links" tab and choose a "Full article image":

joomla article facebook share

The alternative is to add the image directly into the content:

joomla article facebook share.

Step #2. Define a custom title and description for your article

To manage easily the meta content that Facebook extract from the article, such as title and description, we recommend OSMeta.

  • You can download OSMeta from Alledia.com[1]. Either the free or Pro version will work for articles. If you want to manage menu items and K2 items, go for the Pro.
  • Install OSMeta into your site.

joomla article facebook share

Let's define the title and introduction text for our article.

  • Go to Components > OSMeta.

joomla article facebook share

  • Find your article, and fill in these boxes:
Search Engine Title Description

joomla article facebook share

Step #4. End result

Copy and paste the URL as a new post in the social network to see your custom image, title and description.

joomla article facebook share

Tip: Debug article's URL through Facebooks developer tools

When you share a URL for the first time, Facebook save the image, description and title. If you later decide to update the Joomla article and share the URL again through Facebook, those changes won't be reflected.

You need to tell Facebook to scrape the new information.

  • Go to Facebook Developers site[2].
  • Paste the public article's URL into the Input URL field.
  • Click "Fetch new scrape information".

Scroll down to preview the content and confirm the new image, title and description are up-to-date.

When using Open Graph in Joomla

If your site uses an Open Graph extension, it will generate meta information that has higher priority over the default settings in this tutorial. In that case, check with the developers documentation how to manage the image, title and description.


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.


References

  1. ^ download OSMeta from Alledia.com (www.alledia.com)
  2. ^ Facebook Developers site (developers.facebook.com)

Read more

© 2021 Extly, CB - All rights reserved.