Benjamin Tinker Team : Web Development
28Sep2015

Common site properties for new builds

Benjamin Tinker Team : Web Development

When setting up a new website be it for Umbraco or a custom CMS build there is a set of components and features I always put in place. These are components that are used on all websites these days to some extent. Setting them up from start ensures smoother development and puts in place components that will add value to the site. This can be done in Umbraco using their packages installer tool and the CMSs own interface to set up Document Types and other necessary settings.

Settings Node

This is probably my favorite go to Node in Umbraco for site wide stuff. I create a new Document Type called Settings and attach it to the Root Node. It contains definitions for properties that are used across the site on any given page. Some items to set up are:

  • Default 'Image not Found' place holder: Set a image that can be used across the site when a content image is not found. It does happen. The user may accidentally delete a image from the Media Library and forget to remove it from any linked content. You do have to set up a helper class that can be used for loading media items and check the file exists. Once that is set in place you call the helper for all media content and it will render out the 'Image not Found' should the image no longer exist.
  • Page Header/Footer JScript fields: This is 2 fields one for placing <script> tags in the <head> content of the page and one for placing <script> tags before the closing </body> tag. I use this field for placing any tracking codes from 3rd parties onto the site. In the old days you would make the change to static content and have to upload the new template to the live server. With this field you update the code in the CMS, hit the Publish button and it's up. It even gives the client the option to update their own tags should they feel confident.
  • Default SEO settings: All sites require SEO on all pages. If this is left to a manual process where each page has its own fields for Browser Title, Meta Description and Meta Keywords there is a chance the user is going to forget some pages. If no auto-matted tag generation code is in place then you will have pages with blank SEO tags. By setting up default SEO tags these can be used whenever a page is loaded that does not have its own SEO definitions. It may not be page specific but it does avoid having no content at all.

Site Map Controller

Site maps tend to get overlooked these days with Google being able to crawl your site by default after setting up a developers account with them. But it does not hurt to have your own Site Map Controller that can generate either HTML or XML based site maps. I use this so there is a in-page Site Map and a XML version that can be registered with Google. The in-page version is a single page with a list of all the Nodes on the site that I have set up to be included in the Site Map. 

public class SiteMapModel
{
    const string SITE_MAP_NODE_ALIAS = "[COMMA SEPERATED LIST OF NODES]";
    public Node CurrentNode { get; set; }
    public List<SiteMapModel> ChildNodes { get; set; }
    public string[] NodeAlias { get; set; }
    public SiteMapModel()
    {
    }
    public SiteMapModel(Node startNode)
    {
        NodeAlias = SITE_MAP_NODE_ALIAS.Split(new char[] { ',' });
        CurrentNode = startNode;
        List<Node> childNodes = CurrentNode.GetChildNodes().Where(x => NodeAlias.Contains(x.NodeTypeAlias) && !x.GetProperty<bool>("excludeFromSitemap")).ToList();
        if (childNodes != null && childNodes.Any())
        {
            ChildNodes = new List<SiteMapModel>();
            foreach (var item in childNodes)
            {
                ChildNodes.Add(GetChildNodes(item));
            }
        }
    }
    private SiteMapModel GetChildNodes(Node currentNode)
    {
        SiteMapModel model = new SiteMapModel { CurrentNode = currentNode };
        List<Node> childNodes = currentNode.GetChildNodes().Where(x => NodeAlias.Contains(x.NodeTypeAlias) && !x.GetProperty<bool>("excludeFromSitemap")).ToList();
        if (childNodes != null && childNodes.Any())
        {
            model.ChildNodes = new List<SiteMapModel>();
            foreach (var item in childNodes)
            {
                model.ChildNodes.Add(GetChildNodes(item));
            }
        }
        return model;
    }
}

The above code is the full Model that is used to build the Site Map. It gathers all the nodes as set out in the SITE_MAP_NODE_ALIAS const and builds a tree by recursively calling down the node tree. The Web.Config is then updated so any call to the site-map.xml will generate a XML version of this models content. The output is tailored to match the schema set out by Google at their help pages.

404 Page

Setting up a 404 error page from the start helps to ensure content is hooking up correctly and if it does not you are already covered should a URL not be found. You can do this easily enough in Umbraco by creating a new Node and then updating the /config/umbracoSetings.config file by putting in the ID of the created page. 

 <content>
    <errors>
      <error404>[NODEID]</error404>
      .....

As it is a 404 page be sure to also include on the page some code to set the Status code to 404. That way any trackers will know they have hit the 404 page. 

     HttpContext.Current.Response.StatusCode = 404;

When you go live be sure to activate the custom errors in the web.config file. 

<system.web>
    <customErrors mode="RemoteOnly">
      <error statusCode="500" redirect="/500.html" />
    </customErrors>
    .....

500 Page

One that gets overlooked quite a bit too. This one should be built as a HTML file 500.html and contain 100% static content. I usually take a snap shot of the homepage of the site and then strip out all content that could be dynamically generated. The page is then left with a header and footer containing the site logo, a link back to the homepage and some pre-determined text saying 'Something horrible has happened' and allow them to click back to the homepage.

Be sure to update your Web.Config httpErrors setting if using Umbraco so the errors pass through to your custom pages. 

<system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <httpErrors existingResponse="PassThrough"></httpErrors>
    .....

Of course there are many other items that can be added to a clean install for setting up new sites. I do tend to include the following Umbraco packages at the same time:

  • Archetype Date Type - great new data type for Umbraco that allows for dynamic, multi layered data structures that previous versions of Umbraco did not offer.
  • RJP.MultiUrlPicker - good for setting up content pickers that require access to Nodes, Media Items and External websites.
  • GMaps - add Google Maps as a Data Type. Once installed you can use a Google Map as a Data Type to set co-ordinates and render on the front end.
  • Robots.txt Editor - Makes configuration of the often overlooked robots.txt file a breeze.

They all come together very well so when I get down to coding and building up the CMS for the client there is already in place the core of all the components I will require for a robust site that covers most bases for today's models.