Your Pocket Guide To Umbraco SEO
Your Pocket Guide To Umbraco SEO
SEO (Search Engine Optimization) is a vital part of most online businesses around the globe. It is especially relevant for those who depend on so-called organic traffic from Google, Bing, Yahoo, and so forth. And everybody wants to be on the 1st page of Google search results — that is true. So, what if you prefer Umbraco CMS and your goal is to be as much “SEO-friendly” as possible?
Remember, Umbraco CMS is just a content management system that doesn't make a single fact you're using it enough to rank high on search engines by default. Luckily, we have a great experience in this direction! So here is the pocket guide to Umbraco SEO that includes tips and best practices by UKAD.
In this guide, we describe the best SEO practices for Umbraco, share tips to help you rank higher, and explain the most crucial things affecting your website. The article may be helpful for a broad range of specialists: product owners, project managers, developers, QA and SEO experts.
Out of the box Umbraco CMS and SEO
UKAD, as a registered Umbraco partner, choose the Umbraco CMS to give our clients excessive control, high performance, and customization needed to bring their business ideas to life. And Umbraco is the really cool thing that perfectly suits most business needs. But out of the box, it contains almost nothing for SEO. So that is your choice: either to select one of those packages — free or paid — for search engine optimization; or to implement all the SEO stuff yourself. Or to combine both steps above: take the free package and update it up to your needs.
So, this article doesn't promote Umbraco packages. But instead provides readers with the list of components and updates to get better results in organic search and to be handy for your users.
Here are the areas you have to keep in mind for your Umbraco project:
Crawling and Indexing
- Scripts properties
- Robots.txt
- Sitemap.xml
- Canonical URL
- Friendly URL structure
Meta and Structured Data
- Page Title
- Page contains a unique meta description
- Favicon
- OG and other social meta tags
- Structured data markup
- Uses max-image-preview:large setting
Images
- Images contain descriptive alt attributes
Technical
- 404/ 5xx page errors handling
Security
- Site uses proper HTTPS
Let’s dive deeper into each area of these search optimization sections.
Crawling & Indexing
Scripts
Based on our experience most of the websites will require extra settings for Google Analytics (GA), Google Search Console (GSC), Google Tag Manager (GTM) and other custom scripts (e.g. Hotjar or Facebook Pixels).
The scripts are usually placed in three different places:
- the <HEAD> of the page;
- after the start of the opening <BODY> tag;
- before the closing <BODY> tag.
Hence, there should be a possibility to place any script without hardcoding. In UKAD, we usually place these settings somewhere on the global SEO settings node. If you need custom scripts on page level, it is better to duplicate such settings on the required document types.
Once that’s done, you don’t have to worry about the often requests asking you to add any script to whatever page.
Robots.txt file
Robots.txt tells the crawlers if they can access and crawl different parts of the site. Generally speaking, it is good practice not to crawl the Umbraco back office area and other sensitive data of the application. But keep in mind “URLs may still be indexed, even if they haven't been crawled” - Google Search Central says. The correct way to totally block the pages from crawling and indexing requires proper authentication. It is okay if you add Robots.txt editor somewhere in Umbraco settings.
You can check the result by opening https://yourdomain.com/robots.txt
XML Sitemap
Sitemap.xml tells search engines about new or changed pages on the site. Search engines like Google read this file to crawl your site more efficiently telling which pages and files you find more important and provide valuable information about them. Google supports several formats for sitemaps: XML, RSS, mRSS, and Atom 1.0, Text. But the most popular is, of course, the XML format.
You can imagine a sitemap as a list of all the pages from the site that should be indexed. But don’t forget to exclude technical pages like login, register, thank you pages, and similar stuff. The proper option is to have such a setting in Umbraco.
The best practice tells your CMS to generate sitemap.xml automatically.
We usually implement this version of XML settings which contains:
- Page priority;
- Page change frequency;
- Option to hide the page from the sitemap.
Keep in mind “Page priority” and “Page change frequency” can be ignored by Googlebot.
Tip! Do not forget to submit your sitemap to Google Search Console. It is a one-time action that will take you 15 minutes to do. Besides, it is better to check the sitemap using any validator you've found on Google.
Canonical URL
What is a canonical URL, you might wonder? A canonical URL is the URL of the page that Google thinks is most representative of a set of duplicate pages on your site. E.g.
- https://www.yourdomain.com/product
- https://yourdomain.com/product
- https://amp.yourdomain.com/product
- https://yourdomain.com/product/
- https://yourdomain.com/PRODUCT/
- https://yourdomain.com/product?color=red
All the pages above display the same content, while Google finds duplicate versions of the same page. And that is the tricky thing we have to handle carefully.
Google Search Central tells: “If you don't explicitly tell Google which URL is canonical, Google will choose for you, or might consider them both of equal weight, which might lead to unwanted behavior”
Here is how canonicalization should be implemented in HTML markup inside the <HEAD> tag: <link rel="canonical" href="https://mysite,com/">
In Umbraco, we usually create a ‘Canonical URL’ property on page level to place the required URL.
Though, you have to keep in mind that even if you define your canonical URL Google might resolve it another way. “Even if you explicitly designate a canonical page, Google might choose a different canonical page for various reasons, such as performance or content,” they said.
Friendly URL structure
It's not a secret that a URL should be as simple and short as possible. It is also better to use descriptive naming of what about your page and include the keyword in the URL.
For illustration, try to compare these links:
- https://www.yoursite/folder1/22447478/x2/14032015.html
- https://yoursite/article/ten-rarest-baseball-cards.html
What is easier to read and memorize? Obviously, the second one.
Here come some tips you can use for friendly URL creation:
- Use hyphens in or between words (e.g. ten-rarest-baseball-cards)
- Be short
- Avoid unnecessary parameters and session IDs (e.g. https://yourdomain.com/product?token=34355303434190)
- Stick with lowercase (e.g. avoid https://yourdomain.com/Product)
- Do not use the dates (very relevant for evergreen content)
- Help with user navigation (e.g. /folder/page#1).
Fortunately, Umbraco CMS has the out-of-the-box feature to manage the URLs. And here is how you can change it in two simple steps, but do not forget our tips above.
- Go to the required node you need to change the URL
- Right-click on the node displays the menu where you have to select 'Culture and Hostnames' option
- Enter the friendly URL under the 'Domain' property
- Click on 'Save'
- Profit! You're done with the best link structure. We hope so, at least.
Meta & Structured Data
Page Title
Do not mix it up with the page heading in the <H1> tag, because they are totally different things with varied purposes. We are talking about the “Title” tag inside the <HEAD> section:
So why is the title tag so important?
Google displays it on the search results page (SERP) as a part of the snippet. But according to the recent Google Search updates in 2021, titles might be edited by Google in near 20% of cases. Anyway, we have to focus on creating a great HTML title tag.
Here is how meta titles are displayed in Google SERP.
To handle them in Umbraco, it is better to have a separate property 'Page title' where content managers can populate the most SEO-friendly data.
Tip! While Google typically displays the first 50–60 characters of a title tag, there’s no exact character limit because characters can vary in width, and Google’s display titles max out (currently) at 600 pixels.
How to write the perfect and descriptive content for <title> you can read here
Page meta description
Page meta description is an HTML element that provides a summary of a web page. Here is how description is placed in the code:
<head>
<meta name="description" content="This is an example of a
meta description. This will often show up in search results.">
</head>
And you can see your page’s description in the markup.
The meta description is often shown as part of the search snippet: this is what users see on search engines results pages. Why is it important for SEO, you might ask? Actually, it plays a huge impact on CTR (click-through rate) for the page. Better and more significant meta description leads to more clicks, hence, more organic visits.
To keep meta descriptions in Umbraco CMS, we usually create a special property “Meta Description”.
Tip! Keep in mind that Google might not display your description if it is poor, keyword stuffing or something else. There is research that tells Google may ignore your description in 63% of cases.
Favicon
Do you know what a favicon is? It is a tiny image you can see in several places on the site. It’s valid to describe it as a site’s brand helping users to understand where the information comes from.
Favicons improve user experience by providing a consistent marker that tells website visitors that it is still the same site. So, you can see it in such places:
1. On top of browser tabs
2. In search results on mobile
If your site has a great favicon, it may influence your organic CTR.
Favicon technical considerations
First of all, you have to create a favicon file. It must be a multiple of 48px square, for example: 48x48px, 96x96px, 144x144px and so on. SVG files don't have a specific size. You can create it in the following formats: ICO, PNG, GIF, JPEG, SVG. They are supported in most modern browsers, we use ICO in most cases and it works great.
The second step is to place the favicon file somewhere on the server. It is placed often in the root directory of the site.
And the third step is to add the special markup for the favicon.
Here is the code:
<link rel="shortcut icon" href="/path/to/favicon.ico">
The URL can be a relative path (/smile.ico) or absolute path (https://example.com/smile.ico).
Tip! Keep in mind that both the favicon file and site home page must be crawlable by Google — otherwise, it will not be displayed. And Google will show a default icon instead.
OG and other social meta tags
To be mentioned, Opengraph and other social markups, like Twitter cards, don’t have a direct impact on organic search in Google. But these tags tell social networks how your content should be displayed. And that’s the truth: the more attractive view in social networks leads to more sharing and linking to your site. Hence, it increases site ranking factors through the signals from the social networks.
Here’s an example of how the post looks when shared on Facebook with Open Graph meta tags.
Facebook mentioned 17 OG tags in their documentation. But seems it is enough to use four or five ones required in most cases:
- og:title (title of the page);
- og:url (URL of the page);
- og:image (the URL of the image to be displayed in the snippet);
- og:description (page description which is similar to meta description);
- fb:app_id (account ID to get some statistics).
Here is how it looks like in HTML:
Tip! Any tags with “og:” before a property name are Open Graph tags.
In Umbraco CMS we usually create these 5 properties related to Open Graph. It is easy to populate and get a good enough view while sharing.
Twitter cards have very similar settings in Umbraco as well.
Here is the list of resources that may be helpful while working of social media tags:
- Facebook Sharing Debugger
- Twitter Card Validator
- Linkedin Post Inspector
- Pinterest Rich Pins Validator
Structured data markup
Structured data markup is a standardized format providing information about the page and classifying its content. For example, on a recipe page: what are the ingredients, the cooking time and temperature, the calories, and so on.
Generally speaking, this markup helps Google to understand the page content easier. Another important thing is Google also uses structured data to enable special search result features and enhancements (so-called rich results). You can find the list of all rich results here.
Technical guideline
To be eligible for rich results, mark up your site's pages using one of three supported formats: JSON-LD (recommended), Microdata, RDFa. We use JSON-LD markup in near 95% of cases. It is a script placed within a <HEAD> tag of the webpage to communicate structured data to search engines.
Here is what it looks like:
Depending on the page content, you have to select the relevant type based on schema.org suggestions. The most popular are article, product, place, recipe, etc. And each type has its own list of properties. You can imagine it as a true JSON format.
And do not forget to check and validate the structured data markup using Rich Results Test. If there are no errors and the markup contains a valid markup, the result will be something like this:
To implement the structured data in Umbraco CMS:
- It is better to create a simple mapping of what data should be taken (e.g. price, reviews count, etc);
- Ask a developer to generate them into ld json script in the <HEAD> section of the page.
Max-image-preview:large tag
This one is a small but important tag that can increase your organic traffic. Particularly if we are talking about Google Discover feature.
Tip! Google Discover is a way to deliver articles and videos on mobile devices based on a specific topic. For example, users who search for articles about food reviews might see recommendations for articles about food recipes. That is a valuable setting, especially for info sites: blogs, news, articles portals, etc.
By using this meta tag on your site, you are helping to indicate to Google that your images are quality and can be featured on Google Discover.
The photo on the left features the default thumbnail image. This is how small the graphic would normally be without the max image preview meta tag. Still a quality image but hard to see among the larger images.
Technical guideline
Max-image-preview: [setting] sets the maximum size of an image preview for this page in search results. To set up the max image meta tag is simple. You have to insert this line of code in the header of your website (ask Umbraco developers to do that):
<meta name =“robots” content=“max-image-preview:large”>
The robots in this code are the crawlers that crawl the pages and index them for Google.
Images alt text
Images might play an important role in organic search. Moz tells near 30% of SERP contains images. This is a great chance to increase your CTR via this pretty simple “alt” text.
So, what is “alt” text for the images? It is known as alternative text (text that describes an image). Alt text is used:
- to improve page accessibility for people who can't see images on web pages, including users who use screen readers;
- to be displayed in place of an image if it is not loaded for some reason.
- Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image.
Alt text example:
<img src="cat.jpg" alt="Cat is sitting near the window">
To add alt text to the image just populate the relevant property in Umbraco. We usually extend the Umbraco media entity with “Alt” property. Unfortunately, default Umbraco media doesn’t heave it from scratch.
The logic for this “Alt” property is simple:
- If alt is NOT empty the system takes this value;
- If alt is empty the system takes a file name as image alt. It is better to have something instead of totally empty alt text.
ip! It is strongly recommended to populate alt text with descriptive but not spammy content.
Technical
404/ 500 page errors
Hopefully, you don’t see both “Page not found” and “Server error” often instead of the expected page. And the same is relevant for your users: they might be disappointed and confused when seeing 4xx or 5xx screen errors. So, the basic goal is to show users user-friendly pages instead of default system errors.
Let’s talk about 404 and 5xx errors separately.
Handling 404 error
Seems the 404 status code is the most often HTTP error that happens on the internet. The main reason for 404 pages is broken or wrong links.
A 404 page, or error page, is the content a user sees when they try to open a non-existent page on the website. It’s the default page your server displays when the requested URL is not found. Here is how the 404 error page looks by default.
Of course, such a view will be very frustrating for users. Most probably, they will close a browser tab and leave your site. Hence, our goal is to turn the potential negative user experience while seeing an error into a positive one. And here is where the custom 404 page takes place.
The key and most important action points for 404 page might be:
- funny design;
- place links to the home page or other valuable pages (blog posts, products, categories, etc);
- place sitemap;
- place search.
You can use any items above or their combination to keep your users on the site.
In terms of Umbraco CMS the implementation looks simple enough. We usually create separate document type to place the content for 404 pages. The most simple solution is when this document type has the only “Body” property with Rich Text Editor (RTE). Hence, admins can create simple variants of the page.
Of course, if you want a pretty nice custom 404 page it is better to hardcode it or attach it as HTML code.
Tip! While testing and debugging 404 page do not forget it should return 404 HTTP error but not 200 OK. You can check it in the “Network” tab of the browser console.
Handling 5xx errors
Another case that will have a great impact on the user experience is the 5xx group of errors. It usually happens during the last step of the request-response cycle when your client communicates with a server to access a web page.
Besides, 500 errors can impact Google indexing. Here is what John Mueller explains: “But if a large part of a site consistently has 500 errors and we might assume that maybe we’re causing the problem and we’ll slow down crawling of the whole site and at some point we’ll say well, it looks like these pages are really gone, we’re going to drop them”. Keep in mind that and check your site for 500 errors on regular basis.
So, how to handle the 500 errors Umbraco CMS? We usually place the static HTML somewhere in “Views”. If something goes wrong users will see a friendly 5xx page.
Security (check your SSL/HTTPS)
These security considerations are the outside Umbraco settings. But security issues may have an impact on the site ranking and user experience. It is important to know that the use of HTTPS is an official Google ranking factor. Even more, it is displayed in Google Search Console. So, if you have access to GSC, definitely, you will see the problem.
Another way to check if the site uses HTTPS is pretty simple. You can click on the padlock icon in the browser bar — there will be something like “your connection is secure”.
Guide summary
Congrats! You are ready to implement best SEO practices for your Umbraco project. As a guide’s summary check our “SEO for Umbraco CMS” list below.
|
Issue |
Importance |
Notes |
|---|---|---|
|
1. Crawling & Indexing |
||
|
Scripts properties |
High |
Sets extra scripts: Google Analytics (GA), Google Search Console (GSC), etc. |
|
Robots.txt |
High |
Tells the crawlers if they can access and crawl different parts of the site. |
|
XML Sitemap |
High |
Tells search engines about new or changed pages on the site. |
|
Canonical URL |
Medium |
Sets the URL of the page that Google thinks is most representative from a set of duplicate pages on your site. |
|
Friendly URL structure |
Medium |
Stick as simple and short URLs as possible. |
|
2. Meta & Structured Data |
||
|
Page Title |
High |
Page should have a title tag (unique, SEO keywords, etc). |
|
Page meta description |
Medium |
Page should have a meta description tag (unique, SEO keywords, etc). |
|
Favicon |
Low |
This is a small image you can see in several places on the site. |
|
OG and other social meta tags |
Low |
These tags tell social networks how your content should be displayed. |
|
Structured data markup |
Medium |
Sets extra information about the page and classifies the page content. |
|
Max-image-preview:large tag |
Low |
Helps to indicate to Google that your images are quality and can be featured on Google Discover. |
|
3. Technical |
||
|
404 error handling |
Low |
Sets user-friendly error pages to improve user experience |
|
5xx error handling |
Low |
Sets user-friendly error pages to improve user experience |
|
Security (SSL/HTTPS) |
High |
Your application should be secured. It is a ranking factor in Google. |
Round Up: SEO for Umbraco CMS
No doubt SEO has a great impact on organic search results for your application. So, be prepared to involve somebody from SEO team during the project development phase. Keep in mind, the default Umbraco CMS installation will not cover all the required search engine optimization needs. If you apply most of the recommendations from our guidelines there is a big chance you will not be ignored by Google and your users. Do not forget to test and check your application before going Live — hope, our list will be helpful.
If you want to learn more about our exceptional Umbraco development services, check it out here.
- Umbraco
- SEO
Contact Us
-
Book a Call -
Book a Call -
Whatsapp -
Email
Popular articles
The Expert Method for Cooking a Successful Discovery Phase that Gets Results
Cook up a successful discovery phase with UKAD. Learn how our expert method streamlines software development for a successful project outcome
Stand with Ukraine
The war started in the early morning of February 24th by Russia is not a war on Ukraine. It is a war against humanity. Russians brutally devastate Ukrainian cities, murder civilians trying to evacuate, shell hospitals and kindergartens. Since the beginning, over 14 hundreds civil Ukrainians, including over a hundred children, were brutally murdered only according to the available data. The real numbers are still unknown because russian military forces don't allow collecting and burying bodies.