Skip to content

04 Implementation

Jump to bottom
David Sheiles edited this page Nov 27, 2025 · 2 revisions

Implementation Guide

This guide shows developers how to implement Meta Momentum in Umbraco views and templates.

Setup Tag Helpers

Step 1: Update _ViewImports.cshtml

Add the following lines to your Views/_ViewImports.cshtml file:

@addTagHelper *, MetaMomentum 
@using MetaMomentum.Models

This registers the Meta Momentum Tag Helpers and imports the required models.

Basic Implementation

Step 2: Add Meta Tags to Layout

In your _Layout.cshtml or master template, add the following inside the <head> section:

<head>
<!-- Meta Momentum Tags -->
<meta-momentum meta-values="@(Model.Value<MetaValues>("metaMomentum"))"></meta-momentum>

<!-- Other head content -->
</head>

Important: Replace "metaMomentum" with the alias you configured in your Document Type.

What Gets Rendered

The <meta-momentum> tag helper outputs:

Search Engine Tags

<title>Your Page Title</title>
<meta name="description" content="Your page description" />
<!-- If no-index is enabled -->
<meta name="robots" content="noindex, nofollow" />

Open Graph Tags (Facebook/LinkedIn)

<meta property="og:title" content="Your Share Title" />
<meta property="og:description" content="Your share description" />
<meta property="og:image" content="https://yoursite.com/media/image.jpg" />
<meta property="og:url" content="https://yoursite.com/current-page" />
<meta property="og:type" content="website" /> <meta property="og:site_name" content="Your Site Name" />

Twitter Card Tags

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Share Title" />
<meta name="twitter:description" content="Your share description" />
<meta name="twitter:image" content="https://yoursite.com/media/image.jpg" />
<meta name="twitter:site" content="@yourhandle" />

Advanced Implementation

Override Configuration Values

You can override Data Type settings at the template level:

<meta-momentum meta-values="@(Model.Value<MetaValues>("metaMomentum"))" og-site-name="Custom Site Name" twitter-name="@customhandle" no-index="true">
</meta-momentum>

Available Overrides:

  • og-site-name: Override Open Graph site name
  • twitter-name: Override Twitter handle
  • no-index: Force no-index on specific pages

Using Individual Tag Helpers

For more control, use individual tag helpers:

<!-- Just Open Graph tags --> 
<meta-open-graph meta-values="@(Model.Value<MetaValues>("metaMomentum"))"> </meta-open-graph>
<!-- Just Twitter Card tags -->
<meta-twitter-card meta-values="@(Model.Value<MetaValues>("metaMomentum"))"> </meta-twitter-card>

Manual Tag Construction

For complete control over how the tags are formed, you can create the tags yourself without the tag helpers. For example:

@{ var metaValues = Model.Value<MetaValues>("metaMomentum"); }

<title>@metaValues.Title</title> 
<meta name="description" content="@metaValues.Description" />

@if (metaValues.NoIndex) { 
    <meta name="robots" content="noindex, nofollow" /> 
}

<meta property="og:title" content="@metaValues.ShareTitle" />
<meta property="og:description" content="@metaValues.ShareDescription" />

@if (!string.IsNullOrEmpty(metaValues.ShareImageUrl)) { 
    <meta property="og:image" content="@metaValues.ShareImageUrl" /> 
}

Multi-Site Implementation

Some multi domain sites might have a different Company Name or X (Twitter) handle. You can roll your own overrides for these these yourself though the tag helper.

See the below example, where siteName and twitterHandle are fields setup on the home nodes:

@{ 
    var currentSite = Model.Root();
    var meta = Model.Value<MetaValues>("metaMomentum"); 
    string siteName = currentSite.Value<string>("siteName");
    string twitterHandle = currentSite.Value<string>("twitterHandle");
}

<meta-momentum meta-values="@meta" og-site-name="@siteName" twitter-name="@twitterHandle"></meta-momentum>

Next Steps

Clone this wiki locally