SEO Essentials in Umbraco Part 1: Getting Started with Technical and On-Page Optimization

SEO Essentials in Umbraco Part 1: Getting Started with Technical and On-Page Optimization

01

Our Solution. Your Benefit.

In today’s fast-moving digital world, brands need more than great design. They need intelligence, speed, and airtight security. That’s why Droxic partnered with one of Europe’s top digital brand management platforms, trusted by thousands of enterprise customers worldwide, from fashion and retail to finance and tech.

Our mission? To help a fast-growing SaaS company bring more brainpower and peace of mind to brand operations.

Droxic built a purpose-driven AI extension that makes creativity smarter and asset protection effortless. This tool seamlessly integrates into the platform’s ecosystem, giving creators and brand managers everything they need to:

  • Work faster and more efficiently
  • Stay fully compliant with brand and legal guidelines
  • Protect every pixel and every asset, effortlessly

The result: a new level of brand intelligence, where innovation meets protection and every creative move is backed by AI precision.
Because when technology works with creativity, the possibilities are endless.

02

Technical SEO Features

Optimizing URL Structure

A clear and readable URL structure is very important for SEO, as it helps search engines and users understand the content of your pages. In Umbraco, you can customize URLs to ensure they remain clean and user-friendly. This includes configuring how URL segments are generated and implementing URL rewriting when necessary.

By default, Umbraco generates URL segments based on the node names in your content tree. For greater control, you can implement a custom UrlSegmentProvider to define how URL segments are created, ensuring consistency and readability. Additionally, URL rewriting can be managed using ASP.NET Core’s built-in middleware, allowing you to handle tasks like removing trailing slashes or redirecting old URLs to new ones.

For detailed guidance on customizing URL segments or implementing URL rewriting, refer to the official Umbraco documentation.

XML Sitemap Setup

An XML sitemap acts as a roadmap for search engines, helping them index your site efficiently. In Umbraco, creating a dynamic XML sitemap is straightforward. By leveraging Razor views or other server-side logic, you can generate sitemaps that automatically update as content changes.

For multilingual and multi-site setups, it’s essential to structure your sitemap to include localized versions of your pages. This can be achieved using the <xhtml:link> tag, which tells search engines about alternate language versions of a page. Here’s an example:

<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″

xmlns:xhtml=”http://www.w3.org/1999/xhtml”>

<url>

<loc>https://www.example.com/en/home</loc>

<lastmod>2025-01-27</lastmod>

<xhtml:link rel=”alternate” hreflang=”en” href=”https://www.example.com/en/home”/>

<xhtml:link rel=”alternate” hreflang=”fr” href=”https://www.example.com/fr/home”/>

<xhtml:link rel=”alternate” hreflang=”de” href=”https://www.example.com/de/home”/>

</url>
</urlset>

This structure ensures search engines can properly index all language versions of your site, avoiding duplicate content issues and improving your international SEO. For more details, refer to Google’s guidelines for localized versions and Umbraco’s tutorial on XML sitemaps.

This approach ensures your sitemap is always up-to-date with your content.

Canonical URLs

Canonical URLs are a key element in preventing duplicate content issues, especially for websites with dynamic content or multiple query parameters in their URLs. They tell search engines which version of a page should be considered the primary one, ensuring that your SEO efforts are focused on the correct URLs.

In Umbraco, you can easily add canonical tags dynamically in your templates. This can be done using Razor, ensuring each page outputs the preferred URL in the <head> section like in this example (Umbraco 10 or higher):

<link rel=”canonical” href=”@Model.Url(mode: UrlMode.Absolute)” />

This approach ensures that search engines recognize the correct, fully qualified URL for each page, improving consistency and avoiding issues caused by relative paths or multiple URL variations.

Redirect Management

Redirects play a vital role in preserving SEO value when URLs change, ensuring that both users and search engines are directed to the correct content. Proper redirect management helps avoid broken links, loss of ranking, and a poor user experience.

Umbraco offers tools and packages to simplify redirect handling. A built-in URL Tracking feature automatically creates redirects when content is moved or renamed, making it an excellent solution for maintaining SEO integrity without manual effort. For more details on that topic, you can refer to the official Umbraco documentation on URL Tracking.

Additionally, the SeoToolkit Umbraco package provides an easy-to-use interface for creating and managing 301 redirects directly from the backoffice.

03

On-Page SEO Features

Metadata Management

Metadata, such as title tags and meta descriptions, is very important for communicating your page’s purpose to search engines. In Umbraco, you can add custom fields for titles and descriptions in the backoffice. By extending the document types, content editors can easily input metadata for each page. To render these dynamically, use Razor code in your templates:

<title>@Model.Value(“metaTitle”)</title>

<meta name=”description” content=”@Model.Value(“metaDescription”)” />

The SeoToolkit plugin also provides the ability to add meta tags programmatically. This flexibility allows you to handle more advanced scenarios, such as generating metadata dynamically based on content properties or external data sources.

Open Graph and Twitter Cards

Social sharing is another important aspect of driving traffic and engagement. When users share your content on platforms like Facebook or Twitter, Open Graph and Twitter Card tags ensure your pages are displayed with rich previews, including titles, descriptions, and images. This enhances the appeal of your content and encourages more clicks.

In Umbraco, adding these tags dynamically is straightforward. You can include the necessary meta tags in your templates and populate them with content values. Here’s a basic example for Open Graph:

<meta property=”og:title” content=”@Model.Value(\”metaTitle\”)” />
<meta property=”og:description” content=”@Model.Value(\”metaDescription\”)” />
<meta property=”og:image” content=”@Model.Value(\”socialImage\”)” />
<meta property=”og:url” content=”@Model.Url(mode: UrlMode.Absolute)” />
<meta property=”og:type” content=”website” />

For Twitter Cards, the tags are similar but use a different naming convention. Here’s an example of adding Twitter Card tags:

<meta name=”twitter:card” content=”summary_large_image” />
<meta name=”twitter:title” content=”@Model.Value(\”metaTitle\”)” />
<meta name=”twitter:description” content=”@Model.Value(\”metaDescription\”)” />
<meta name=”twitter:image” content=”@Model.Value(\”socialImage\”)” />

Advanced Tips

Fallback Content: If metadata fields like metaTitle or socialImage are empty, consider providing fallback values or a default image.

<meta property=”og:title” content=”@Model.Value(\”metaTitle\”) ?? \”Default Title\”” />
<meta property=”og:image” content=”@Model.Value(\”socialImage\”) ?? \”/images/default-social-image.jpg\”” />

Localization: For multilingual sites, use localized values to ensure the metadata reflects the language of the page.

<meta property=”og:locale” content=”en_US” />
<meta property=”og:locale:alternate” content=”fr_FR” />

Validating meta tags

After adding these tags, test them with tools like

These tools will display how your content appears on their respective platforms and identify any missing or incorrectly configured tags.

By including and properly configuring Open Graph and Twitter Card tags, you ensure that your content looks professional and engaging when shared, driving more traffic and improving your brand’s online presence.

Structured Data Basics

Structured data is a standardized way to provide information about your site to search engines, helping them better understand and display your content. By implementing structured data, you can improve visibility in search results through rich snippets, such as ratings, events, or product details.

In Umbraco, the easiest way to add structured data is by embedding JSON-LD schema directly into your templates. JSON-LD is the recommended format by Google due to its simplicity and compatibility with dynamic content. For instance, to provide information about your organization:

<script type=”application/ld+json”>

{

“@context”: “https://schema.org”,

“@type”: “Organization”,

“name”: “Your Company Name”,

“url”: “https://www.yourwebsite.com“

}

</script>

Depending on the type of content on your site, you can use various Schema.org types to enhance your search presence. Some commonly used types include:

  • Article: Perfect for blogs, news, or informational content.
  • Event: Ideal for promoting upcoming events with details like date, location, and ticket availability.
  • BlogPosting: A specialized type of Article for individual blog posts.
  • Person: For author pages or profiles on team or directory websites.
  • Product: Useful for e-commerce websites to provide product details, pricing, and reviews.
  • FAQPage: Enables rich results for frequently asked questions, improving search usability.

In order to turn your data into strongly typed C# Schema.org objects you can use Schema.NET package. Then, by simply calling the ToHtmlEscapedString() method you will get JSON-LD object representation which is ready to be rendered.

Validating Structured Data

Before deploying structured data, it’s crucial to validate its syntax and ensure it aligns with search engine requirements. For that purpose, you can use:

Properly implementing and validating structured data ensures search engines accurately interpret your content, leading to improved search rankings and enhanced user experiences through rich results.

Image SEO Essentials

Optimized images improve page load speed and accessibility. In Umbraco, you can set default alt text for images dynamically in your templates, ensuring consistency and better SEO performance. For example:

<img src=”@Model.Value(“image”)” alt=”@Model.Value(“imageAlt”)” />

This ensures every image has a relevant alt attribute.

04

Conclusion

With its robust features and flexibility, Umbraco makes it easy to implement effective SEO strategies. By optimizing your site’s technical and on-page elements, you’ll be well on your way to improving your search engine rankings. Stay tuned for the next post, where we’ll dive into advanced SEO techniques and tools to take your optimization efforts even further.

Special thanks to the author of this article, one of our colleagues Ljubisa Aleksandrov – an Umbraco developer at Droxic.