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.