Tag: SEO

Creating a custom 404 Page in Sitecore

Nobody wants to see the standard Sitecore 404 page. Thankfully it's really easy to change the error pages a user is redirected to through some config settings.

Your error pages can be pages in Sitecore or static HTML files. For 404 pages I would normally use a Sitecore page, that way content authors can still manage its content. For an Error Page I would recommend a static html file to avoid issues with the Error page potentially error-ing.

Add these to a patch file and update the urls accordingly:

1<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
2  <sitecore>
3    <settings>
4      <!--  ITEM NOT FOUND HANDLER
5            Url of page handling 'Item not found' errors
6      -->
7      <setting name="ItemNotFoundUrl">
8        <patch:attribute name="value">/ErrorPages/404.html</patch:attribute>
9      </setting>
10      <!--  LINK ITEM NOT FOUND HANDLER
11            Url of page handling 'Link item not found' errors
12      -->
13      <setting name="LinkItemNotFoundUrl">
14        <patch:attribute name="value">/ErrorPages/404.html</patch:attribute>
15      </setting>
16      <!--  LAYOUT NOT FOUND HANDLER
17            Url of page handling 'Layout not found' errors
18      -->
19      <setting name="LayoutNotFoundUrl">
20        <patch:attribute name="value">/ErrorPages/404.html</patch:attribute>
21      </setting>
22      <!--  ERROR HANDLER
23            Url of page handling generic errors
24      -->
25       <setting name="ErrorPage">
26        <patch:attribute name="value">/ErrorPages/Error.html</patch:attribute>
27      </setting>
28    </settings>
29  </sitecore>
30</configuration>

These settings are already defined in the web.config file and changing them here will have the same effect, but I recommend adding patch config files as it will make your solution easier to update in the future.

Getting the URL of a Sitecore Item

You may expect a Sitecore Item to contain a property for its URL, however to actually get the URL of an item you need to use the LinkManager class.

There are also a few different options when getting an items URL, such as if you include the language code or not.

The following example gets the URL for an item with no language code and has a path relative to the site it is in. This is useful when your Sitecore instance may have multiple sites running and your home node isn't at the root of the content tree.

1Sitecore.Links.UrlOptions urlOptions = new Sitecore.Links.UrlOptions(); urlOptions.SiteResolving = true; urlOptions.LanguageEmbedding = Sitecore.Links.LanguageEmbedding.Never; string url = Sitecore.Links.LinkManager.GetItemUrl(item, urlOptions);

Bundling and Minification with Sitecore

There's various ways to add bundling and minification to a site, but one of the easiest is to use Microsoft's support from the Microsoft.AspNet.Web.Optimization package. This implementation has some great features including:

  • Automatically create the bundles and minify them as files are changed
  • Create unique urls to each version of a bundle to force browser refreshing of the file
  • Debug mode which outputs links to the raw files rather than the bundled minified version

The functionality is also fully compatible with Sitecore. To use it in your Sitecore solution follow these steps:

1. Add Microsoft.AspNet.Web.Optimization to your project from NuGet. This is the package from Microsoft that contains the functionality to do bundling and minification

 

2. Create your CSS and Javascript bundles. Where you put the logic for this is up to you but it will need to run when the application starts. Outside of Sitecore my main development is on bespoke ASP.NET MVC and Web API projects so I like to organise startup scripts into an App_Start folder and reference it from the Application_Start event in the global ascx file.

If you are running a Sitecore instance with multiple sites or if you do not have direct access to the production config files, it may be better to keep the logic separate and use a pipeline to create the bundles.

My bundle definitions would look something like this

1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Web;
5using System.Web.Optimization;
6 
7public class BundleConfig
8{
9    public static void RegisterBundles(BundleCollection bundles)
10    {
11        bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
12                    "~/Scripts/jquery-{version}.js",
13                    "~/Scripts/bootstrap.js"));
14 
15        bundles.Add(new StyleBundle("~/bundles/css").Include(
16            "~/Content/bootstrap.css",
17            "~/css/site.css"));
18    }
19}

And in my Global.asax.cs file I would have some logic like this to call the other function

1protected void Application_Start(object sender, EventArgs e)
2{
3    BundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles);
4}

3. Replace your Javascript/CSS references in your layout or rendering files with a call to render the bundle

Webforms

1<%: System.Web.Optimization.Scripts.Render("~/bundles/scripts") %>
2<%: System.Web.Optimization.Styles.Render("~/bundles/css") %>

MVC

1@Scripts.Render("~/bundles/scripts") 
2@Styles.Render("~/bundles/css")

4. In your web.config file there are a couple of changes needed to get things to work.

First you need to set an ignore url prefix to stop Sitecore trying to resolve the URL to the bundle. In this example mine is called bundles (note: you should add the prefix the what is already in your config file. e.g. |/bundles)

1<!--  IGNORE URLS
2      Set IgnoreUrlPrefixes to a '|' separated list of url prefixes that should not be
3      regarded and processed as friendly urls (ie. forms etc.)
4-->
5<setting name="IgnoreUrlPrefixes" value="/sitecore/default.aspx|/trace.axd|/webresource.axd|/sitecore/shell/Controls/Rich Text Editor/Telerik.Web.UI.DialogHandler.aspx|/sitecore/shell/applications/content manager/telerik.web.ui.dialoghandler.aspx|/sitecore/shell/Controls/Rich Text Editor/Telerik.Web.UI.SpellCheckHandler.axd|/Telerik.Web.UI.WebResource.axd|/sitecore/admin/upgrade/|/layouts/testing|/bundles" />
6

Next a dependant assembly binding needs to be set up for Web Grease. Without it you will see an error about the Web Grease version number

1<dependentAssembly>
2  <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" />
3  <bindingRedirect oldVersion="0.0.0.0-1.5.2.14234" newVersion="1.5.2.14234" />
4</dependentAssembly>

If you have done this and are still getting a version number error check the assembly binding tag. Older versions of Sitecore have the applies to property set which may be only applying the bindings to .Net 2 and you may be using .Net 4.

1<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1" appliesTo="v2.0.50727">

5. If you are using IIS7 you will also need to make a change in your web.config file

1<system.webServer>
2    <modules runAllManagedModulesForAllRequests="true">
3    </modules>
4</system.webServer>

6. Publish your changes into your Sitecore site. Depending if you have compilation mode set to debug or not you will now either have a bundle reference for all your JavaScript and CSS or the individual file references.