Adding support for Open Graph can be done in many ways. In this lesson, we'll create a reusable set of properties we can add to specific page types.
First we need to see what the expected outcome will be. Open Graph for web pages needs to contain at least the following:
Looking at the above we can pull a couple of things out automatically and then add ways to input the rest.
In this lesson, we'll only add Open Graph Content of the type "website", so we don't need input for that. We can also get the URL for the page we are currently on. This leaves us with two remaining properties to add: title and image.
Go to the Settings section.
Click on Document Types.
Select Create > Document Type.
Name the Document Type Open Graph.
Click Add Group and name it Open Graph.
Add a property to the group called Open Graph Title.
Select Select property editor and search for textstring.
Click Add.
Add another property named Open Graph Image and use the Media Picker as the editor.
Click Add.
Click Save.
All done, great job! Now test out if it works. Try adding it to more document types. Remember this is only one way of adding this functionality. You might want additional Open Graph tags or the properties to be on a different tab (e.g. Navigation or SEO).
In this lesson, you have learned:
To create a Document Type composition
How to create and render a Partial view
Compositions create an interface you can check on and use as a page model (IOpenGraph)
How to get the full path (absolute URL) for both content and media items.
With a few steps, we can add Open Graph to our pages.
Open Graph support will be added to the Homepage and Blog posts. It will be the minimum implementation of Open Graph containing the sites' title, type, URL, and image.
You will learn:
How to create a reusable set of properties (called Document Type compositions)
Add features based on where the composition is implemented
Get the URL for content items and media items
We will now add the group and properties to the Home page and Blog post of the site.
This is done by using compositions to add the functionality in multiple places.
Go to the Settings section.
Expand the Document Types folder.
Open the Home Document Type.
Select Compositions... in the top-right.
Choose the Open Graph Document Type we created.
Click Submit.
Click Save.
This will add the group and properties from the Open Graph Document Type to the Home Document Type. Follow the same steps for the Blogpost Document Type.
If you go to the content section and select Home you can now see your changes (the same goes for the blog posts).
Next step is to get the Open Graph code rendered on the website. This is done in the head section of the HTML, so you need to find the template for this.
In the Starter Kit the head is placed in the Master Template, which is responsible for wrapping all the other templates.
Because you've added the Open Graph feature as a composition you can check if the composition is present on the current page and then render meta tags.
Go to the Settings section.
Expand the Templates folder.
Select the Master template.
Find the <head> HTML tags at the top of the Template.
Write the following before the closing </head> tag:
Click Save.
This will render a partial view if the composition is present on the current page. Currently that is the case for Home and Blog posts on the site.
IOpenGraph is an interface created by adding the composition. When you know how that works you can see how powerful it can be. If not, enjoy the handy helper to check for the composition.
At the end, the head should look like this:
The final piece to the puzzle is adding the partial view that will be rendered when the composition is present. To do this:
Go to the Settings section.
Click on Partial Views and select Create... > New empty partial view.
Enter a Name for the partial view. Let's call it: OpenGraph
Add the standard view model: @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
We only render this view on pages where the composition exists, so we need to be more specific.
In the template editor, pass in the specific model you've created by adding <IOpenGraph> after the view model.
Now you can start rendering the meta tags and adding in the values.
First add the title property
Add the Open Graph meta tag for type of content - you can hardcode "website" in here:
Next up is adding the URL for Open Graph.
For this you'll need the entire URL to the page, not relative to this page.
There is a handy method for getting this from a content item. Add:
The final thing we need to do is render the image selected on the Open Graph Image property.
You'll still need to render the entire URL for the image.
First, we'll create a variable to get the image:
Next, we add the meta property to get the path for the media item:
Your partial view is now complete and should only render on pages that are using the Open Graph composition.
The final view should look like this:
If your meta properties do not show up on social media, make sure to inspect source HTML. Make sure there are no inline HTML tags in og:title, og:description etc.
Pro tip: To keep the lesson short and to the point, we have left out null-checks from the code examples. So remember to fill in the Open Graph properties, in the content section, to avoid exceptions when viewing the page.