OpenGraph on SharePoint Online sites

OpenGraph on SharePoint Online sites header image

Building public facing websites on Office 365 is not something that is done often, due to the lack of the more elementary building blocks for a successful site. However for smaller sites and businesses it might be an option. So for the Office 365 User Group in the Netherlands, the O365UG.nl we decided that the site could be on our Office 365 tenant.

Since our site only consist of a simple overview of upcoming events and three other pages with some more information building (and designing it) was fairly easy. However one of the things we noticed a while ago was that there is absolutely no information when you post a link to the site on any of the social networks like Facebook, Yammer or LinkedIn. Instead it will look like the following:

The only identifiable information that you will see is the URL. This information is abstracted based on your content and on some metadata information. The easiest way to manipulate this information is by the use of the OpenGraph protocol. Something that is not done out the box by a SharePoint publishing site on Office 365. However Microsoft did release an app for that: Facebook Integration. This app is not installed by default so on your public site you will have to add this app and then activate it. Once it is installed and activated you can both use some Facebook plugins but more importantly you can configure the OpenGraph elements you require for pages.

Once the app is installed you have to activate it before you can use it:

If you want to activate this app on a non English environment you are required to change the title of your pages library to state Pages. For example the Dutch pages library is called Pagina’s and this will fail the activation of the app! It will however render everything as you expect so besides the first warning that the Pages list is missing you will see everything. Once the app is activated you can configure the page property mappings. There are a two downsides on that as well:

  1. You cannot configure custom values, only select custom columns
  2. The image URL is usually stored in a PublishingPageImage column, however this field will return a <img> tag, while the only supported value is a string

The first one isn’t that bad, as all the information should be in site columns anyway, however since the Content Types for pages are ‘locked’ you cannot add custom Site Columns (or list columns) for pages easily. So in order to fix the second the easiest way is to abuse another field. In our case we just used the Comments field and added an image URL there and used the following mappings:

These mappings will make sure that there is a description, a correct title and a correct image shown if you post a page to Facebook, LinkedIn, Twitter and Yammer as they all use the OpenGraph standard to determine the layout. So with a little bit of configuration you can provide meaningful links on Social Media for sites that are running on Office 365.

Loading comments…