Add Open Graph - Step 4

The final piece to the puzzle is adding the partial view that will be rendered when the composition is present. To do this:

1. Go to the Settings section

2. 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.

3. 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.

4. First add the title property

   <meta property="og:title" content="" />

5. Set the cursor in the content attribute and select the + Insert... button.

6. Select Value...

7. Under Choose field, select the openGraphTitle property.

8. 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

9. Check Yes, make it recursive to ensure the fallback will work on all pages.

10. Add the Open Graph meta tag for type of content - you can hardcode "website" in here:

    <meta property="og:type" content="website" />

11. 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:

    <meta property="og:url" content="@Model.Url(mode: UrlMode.Absolute)" />

12. 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:

    @{
        var ogImage = Model.Value<IPublishedContent>("openGraphImage");
    }

    • Next, we add the meta property to get the path for the media item:

    <meta property="og:image" content="@ogImage.Url(mode: UrlMode.Absolute)" />

13. 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:

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<IOpenGraph>

<meta property="og:title" content="@Model.Value("openGraphTitle", fallback: Fallback.To(Fallback.Ancestors, Fallback.DefaultValue), defaultValue: new HtmlString("siteName"))" />
<meta property="og:type" content="website" />
<meta property="og:url" content="@Model.Url(mode: UrlMode.Absolute)" />

@{
    var ogImage = Model.Value<IPublishedContent>("openGraphImage");
}

<meta property="og:image" content="@ogImage.Url(mode: UrlMode.Absolute)" />

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.