Building search engines-optimized URLs is a craft. And although it has to be done manually for best results, it’s good to have a tool that can help you build a proper URL for your web content.

URLs matter

URLs are one of the most important ingredients that influence the ranking of your content in organic search results. The shorter they are and the more relevant keywords they contain the more likely your page is going to end up higher in the search results.

For a while now the importance of building search- and user-friendly URLs has been known. And with the advent of cross-site publishing in SharePoint 2013 it has become even more important. Never before was it so easy for us to have some structured content published on a public-facing website. No matter what type of content you are publishing ensuring for proper URLs can help you achieve higher ranking for your pages in organic search results.

Items’ slugs in cross-site publishing

One of the settings when publishing content using the cross-site publishing capability in SharePoint 2013 is specifying how you want your URLs be built up. For this you can choose any of the available Site Columns and so it is tempting to pick a product SKU, ISBN or some other unique value. From the search engine optimization perspective however, none of those can beat a hand-crafted search engines-optimized URL. Such URLs are often referred to as slugs.

Building slugs 101

When building slugs for web pages in most scenarios you would start with the page title. You would ensure that it’s in lowercase and that all punctuation marks are removed. Next you would remove all stop words (for example a, an, the, etc.) and replace all spaces with - (dash). After covering the basics you would fine tune the slug for keywords and length.

Although the last part requires some experience and is probably the most challenging of the whole slug-crafting process, even the first steps alone will give you great results.

As you have seen, covering the basics of building a slug for your web page is relatively simple so why not automate it?

Generating SEO slugs with Mavention SEO Slugs

Mavention SEO Slugs is a collection of JavaScript files that should be integrated with the authoring experience of your website. Because authoring experiences vary a lot, those JavaScript are not distributed as a SharePoint package or app. Instead you should integrate those JavaScript files with your website to provide the content management team with a seamless content management experience.

In its current form Mavention SEO Slugs consists of three files: Mavention.Web.SeoSlugs.min.js which contains the core functionality and two dictionary files (Mavention.Web.SeoSlugs.dictionary_nl.js and Mavention.Web.SeoSlugs.dictionary_en.js) that contain stop words for their respective languages. If you need only one of the dictionary files or you need additional languages feel free to include/remove those files as necessary.

The first step in integrating Mavention SEO Slugs with your website is to add a reference to the JavaScript files. Because you will be needing them only in the page edit mode you should include the references in an Edit Panel:

<PublishingWebControls:EditModePanel runat="server">
    <script type="text/javascript" src="/style%20library/mv/authoring/Mavention.Web.SeoSlugs.dictionary_en.js"></script>
    <script type="text/javascript" src="/style%20library/mv/authoring/Mavention.Web.SeoSlugs.dictionary_nl.js"></script>
    <script type="text/javascript" src="/style%20library/mv/authoring/Mavention.Web.SeoSlugs.min.js"></script>
</PublishingWebControls:EditModePanel>

If your content management team works with a multilingual website there are many ways in which you might have stored the content in the different languages. To offer you some flexibility and yet help you load the right dictionary for the right language you are free to specify the logic that Mavention SEO Slugs should use to determine which dictionary should be loaded. This logic should be defined in the Mavention.Web.SeoSlugs.getCurrentLanguage function:

<PublishingWebControls:EditModePanel runat="server">
    <script type="text/javascript" src="/style%20library/mv/authoring/Mavention.Web.SeoSlugs.dictionary_en.js"></script>
    <script type="text/javascript" src="/style%20library/mv/authoring/Mavention.Web.SeoSlugs.dictionary_nl.js"></script>
    <script type="text/javascript" src="/style%20library/mv/authoring/Mavention.Web.SeoSlugs.min.js"></script>
    <script type="text/javascript">
        Mavention.Web.SeoSlugs.getCurrentLanguage = function() {
            var currentLanguage = location.pathname.startsWith('/nl-nl/') ? 'nl' : 'en';
            return currentLanguage;
        }
    </script>
</PublishingWebControls:EditModePanel>

In the example above we work in a website that uses Variations and which has two Variation Labels: Dutch (nl-nl) and English (en-us). By comparing the URL path we determine which dictionary file should be loaded.

The last step is to integrate the process responsible for generating the slug based on some value. One example is to do it using the page’s title and by adding a button that the content manager should click in order to generate the slug:

This button showed above is defined as follows:

<a href="#" class="action" onclick="$('#ctl00_PlaceHolderMain_ctl00_Slug_ctl00_TextField').val(Mavention.Web.SeoSlugs.getSlug($('#ctl00_PlaceHolderMain_ctl00_Title_ctl00_TextField').val())); return false;"><img src="/_layouts/15/images/edit.gif" alt="Generate" /> Generate SEO slug from Page Title</a>

Using jQuery we’re retrieving the value of the Title field on the page, pass it to Mavention SEO Slugs to generate the slug for us, and set it as the value of the Slug field. With this approach we cover for the basics and allow content managers to further tweak the generated slug manually if necessary.

Summary

Building search engine optimized URLs can help you improve the ranking of your web content in organic search results. Mavention SEO Slugs helps you cover the basics in generating a slug based on some other value such as page title.

Download: Mavention SEO Slugs (ZIP, 4KB)