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.
In the Settings section, expand the Document Type tree.
Open the Home Document Type and select Compositions... in the top-right.
Choose the Open Graph Document Type we created and Submit.
Save the Document Type.
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).
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
Right-click on Document Types
Create a new Document Type without a template
Name the Document Type Open Graph
Create a group called Open Graph
Add a property to the group tab called Open Graph Title
Select Choose editor, search for textstring and add this to the tab.
Add another property named Open Graph Image and use the Media Picker editor.
Save the Document Type.
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 and expand the Template tree.
Select the Master template
Find the <head> HTML tags at the top of the Template
Write the following before the closing </head> tag:
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
Right-click on Partial Views and choose Create... > New empty partial view
The partial view comes with a standard view model @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage. We are using compositions and only render this view on pages where the composition exists, which means we need to be a little more specific.
In the template editor, pass in the specific model you've created by adding <IOpenGraph>.
Now you can start rendering the meta tags and adding in the values.
First add the title property
Set the cursor in the content attribute and select the + Insert... button.
Select Value...
Under Choose field, select the openGraphTitle property.
Set the Default value to siteName.
This will make sure that even though the Open Graph title isn't filled in, it will fallback to the title of the site
Check Yes, make it recursive to ensure the fallback will work on all pages.
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 you do not have Starter Kit installed, or experience issues with the properties not being picked up/showing up in HTML feel free to remove the fallback to siteName.
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.