> For the complete documentation index, see [llms.txt](https://docs.umbraco.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.umbraco.com/umbraco-cms/17.latest/develop-with-umbraco/tutorials/starter-kit/lessons/3-add-open-graph/step-4.md). # 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. Click on **Partial Views** and select **Create...** > **New empty partial view**. 3. **Enter a Name** for the partial view. Let's call it: *OpenGraph* 4. 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. 5. In the template editor, pass in the specific model you've created by adding `` after the view model. * Now you can start rendering the meta tags and adding in the values. 6. First add the title property ```html ``` 7. Add the Open Graph meta tag for type of content - you can hardcode "website" in here: ```html ``` 8. 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: ```html ``` 9. 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: ```csharp @{ var ogImage = Model.Value("openGraphImage"); } ``` * Next, we add the `meta` property to get the path for the media item: ```html ``` 10. 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: ```html @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage @{ var ogImage = Model.Value("openGraphImage"); } ``` {% hint style="info" %} 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. {% endhint %} **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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.umbraco.com/umbraco-cms/17.latest/develop-with-umbraco/tutorials/starter-kit/lessons/3-add-open-graph/step-4.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.