Introduction
Atomic.Seo is an Atomic Toolkit package which provides easy to maintain SEO features for your Umbraco website. Such features are:
- Sitemap.xml
- Robots.txt
- Meta Title, Description and Keywords
- NoFollow, NoIndex
- Canonical and Alternate URLs
- Facebook Open Graph
- Twitter Cards
- Multisite support
- Support for extending after installation
- More to come in the future
Installation
It is important to choose the right version of Atomic.Seo before adding it to your project. Atomic.Seo versioning is coupled to the Umbraco version it is built for. This means that
Umbraco 11 works with Atomic.Seo 11,
Umbraco 12 works with Atomic.Seo 12
and so on.
The code below assumes that Atomic.Seo with latest version 12.0.0 is being installed on Umbraco 12, and you must adapt it according to your scenario.
The easiest way to get Atomic.Seo installed is using the command line (CLI):
dotnet add package Atomic.Seo --version 12.0.0
Atomic.Seo can also be installed manually from NuGet using Visual Studio. If you need help with that approach, you can get more information here.
Overall, Atomic.Seo is a NuGet package and supports all standard ways of installing NuGet packages.
Configuration and Multisite
After installing Atomic.Seo, you must do a few things.
First, create a SEO Settings item in your website content tree. We recommend that you create a folder with name Settings under the Home node and place the SEO Settings item there. If you prefer another name for the Settings folder, which fits better in your solution, you will have to make a code customization.
Second, all page document types must include a Composition of type Seo Base Page.
Third, in order the SEO HTML tags to be rendered on website pages you need to include this Component in the HTML <head>
@(await Component.InvokeAsync(Atomic.Seo.Html.Constants.SeoViewComponentName))
Multisite
In a multisite Umbraco solution, you must follow the three steps listed above, which means that you should create SEO Settings items for each site. Also, you must configure the hostname on the Home node, for each site in Umbraco.
SEO global settings
The SEO global settings is an item which you must create under your website Home node. It contains global SEO settings for your website like turn on/off SEO features or the whole SEO, controlling different text lengths, cache durations and fallback values.
All pages which have Seo Base Page composition will be included in the Sitemap by default when No Index and No Follow fields are not checked.
Page SEO
All page document types on your website must include a Composition of type Base Seo Page. This composition adds a SEO tab on pages content where you can fill SEO data which will be rendered on the page. Check the gallery below to see what data you can fill and how it is rendered on the website.
Fallback values
On the Seo Settings item, we have added three Umbraco fields which control fallback values - Title fallback, Text fallback and Image fallback. How this works is that if any SEO title, text or image on a page is empty (meta title, share title, share text or image) Atomic.Seo will look into the fallback settings and try to pull another value from the page and use it. This could save some time for the content editors.
Let's have an example with the Title fallback. Let's say, on the Home page, I have Title (title) and Subtitle (subtitle) fields (in the brackets, I have put the aliases of these fields). And on a Blog page, I have a field named Blog Title (blogTitle). Then in the Title fallback field, I can add the following values using the aliases of the fields. The first field value which is not empty will be used for fallback value.
Fallback values configuration is even cooler because you can use fields from Block List components. There is a specific syntax which we have developed to make this possible, which is as follows
AliasOfTheBlockListField[aliasOfTheBlockListElement]/AliasOfTheField,AliasOfAnotherField
Because it might look a bit confusing, let's have some examples:
introHeader[introSection]/text,expandableText
Here we have a block list field with alias introHeader. Inside, we look for a block list element with alias introSection and use the text and expandableText for fallback values.
heroHeader[hero]/image
Here we have a block list field with alias heroHeader. Inside, we look for a block list element with alias hero and use the image field for a fallback value.
Another great feature is that the HTML from Rich Text fields will be automatically stripped, so you can fall back even to Rich Text fields.
Customizations
Use different Settings folder name
You can configure what is the name of the folder which contains your Seo Settings item. This can be done in an Umbraco composer as follows:
public class AtomicSeoComposer : IComposer
{
public void Compose(IUmbracoBuilder builder)
{
builder.Services.Configure<AtomicCommonOptions>(c =>
{
c.WebsiteSettingsRootName = "My Cool Name"
});
}
}
Add or replace SEO HTML tags
All HTML tags added by the module can be replaced by your own implementation. For example, if you need more advanced HTML for Facebook Open Graph or Twitter Cards, you could replace the default implementation. Also, you can add your own HTML Tags.
We accomplished this flexibility by using an Umbraco Builder Collection, and you can read more about it in our blog post.
