The Journey of creating my own Umbraco packages: Meta Tags

The Journey of creating my own Umbraco packages: Meta Tags

Hello everyone!

Today, I'll be talking about new functionality to my SEO package. If you are not yet up to speed on what I am doing, then here is a quick summary.

I am creating an SEO package within Umbraco. The SEO package will have many different functionalities like:

  • Sitemaps
  • Robots.txt
  • Meta tags
  • and hopefully much more! Currently, I am working towards a first version and I've been sharing my progress with these weekly blog posts. So, let's get started!

Meta Tags

This week I decided to move my v8 code of the meta tags functionality to v9. Luckily, this was quite an easy job as I could just move most of my code and just use the new namespaces. I did have a small issue with a custom collection builder. In v8 I was able to also register the collection, but in v9 it is already registered (I assume by the collection itself) so that was causing some issues. But removing the register function fixed it all.

The idea behind meta tags is quite easy. In most of the websites that I've created, I always have the meta tags like title, description default to one of the fields within a content item. So why should I be programming that for every client? Of course, the system should also still work with custom code if there is a need for it.

So let's take a look at it! First of all, I am using a content app for document types as I want this to be something that you take care of while you are creating/editing your document types.

image.png

You can then set the configuration for the different meta tags that you want to use. Config will then look like this:

image.png

Here you are able to select what fields should be responsible for generating the meta tag (title in this case). You can also order the fields in whatever way you want so that whenever a field is empty, it'll then go check the next field.

And finally, the interface for the user! Here, it'll show the result of the settings set at the document type. So the user is always able to figure out exactly what'll be shown in the HTML.

image.png

And if they aren't happy about it, they can hit the "edit" button and override the value of it. Very user-friendly!

Of course, there is a lot more to this than just the interface, but let's go into that next week! This week I'll be working on rendering the meta tags and seeing how I can make it possible to have it extendable so that you can add your own meta tags.

Another thing I would like to note is that all the code for this can be found here: github.com/patrickdemooij9/uSeoToolkit.Umbr... In case you want to take a look at some code.

Thanks for reading and I'll see you next week!