sebnilsson.com | Liquid Development Is What I Do
Seb Nilsson

ASP.NET MVC SEO-Framework

For any serious web-application you should always implement a solid Search engine optimization-strategy, but there is no standardized way to handle this in ASP.NET MVC, out of the box.

You could easily use the ViewBag-object to send dynamic values from Controller-Actions into Views, like this, for example:

public ActionResult Index()
{
    ViewBag.Title = "This is the page title";

    return View();
}

Then you'd have to make sure you correctly spell or copy-paste ViewBag.Title correctly into your View:

<head>
    <title>@ViewBag.Title</title>
    <!-- More head-values -->
</head>

One problem is that if you refactor the naming for ViewBag.Title into, for example ViewBag.Title, this will break the functionality, potentially site-wide, because you won't get any tooling-help from Visual Studio for the renaming.

This is why I created a framework for ASP.NET MVC SEO, to get structured and reusable functionality around the SEO-data for a web-application. The framework is available on Nuget, with the source-code on GitHub.

Using a SeoHelper-object, available inside Controllers and Views, you can set SEO-related data like:

  • Meta-Description
  • Meta-Keywords
  • Title, split on page-title and base-title (website-title)
  • Canonical Link
  • Meta No-index for robots

This can be done inside Controllers and Controller-actions:

[SeoBaseTitle("Website name")]
public class InfoController : SeoController
{
    [SeoTitle("Listing items")]
    [SeoMetaDescription("List of the company's product-items")]
    public ActionResult List()
    {
        var list = GetList();

        if (list.Any())
        {
            Seo.Title += $" (Total: {list.Count})";
            Seo.LinkCanonical = "~/pages/list.html";
        }
        else
        {
            Seo.MetaRobotsNoIndex = true;
        }

        return View(model);
    }
}

Or inside Views:

@{
    Layout = null;
    Seo.MetaRobotsNoIndex = true; // Always block Robots from indexing this View
}

These set values can easily be rendered as HTML-tags inside Views through provided HtmlHelper-extensions:

<head>
    @Html.SeoTitle()

    @Html.SeoLinkCanonical()
    @Html.SeoMetaDescription()
    @Html.SeoMetaKeywords()
    @Html.SeoMetaRobotsIndex()
</head>

See the README-file on GitHub for the latest detailed information about this ASP.NET MVC SEO-framework. Or try it out through Nuget by running Install-Package AspNetMvcSeo in your project. You can even follow the absolutely latest build on MyGet.

ViewSource - View Source in Mobile Browsers

ViewSource Screenshot

Here's another small app that I created to play around with some code, but mostly because I felt I had a need for it.

ViewSource is an app for viewing the HTML-source of any website from your web-browser. Which enables you to view source from mobile browsers.

Just enter any URL and view the HTML-source. You also get a list of CSS-files and JavaScript-files, which you can view the source of, instantly in your browser.

You can quickly reach the app through bit.ly/vsource.

Fork on GitHub

As always, the source is available on GitHub for forking.

Squishify - Minify JavaScript & CSS Online

Squishify Screenshot

Squishify was created out of the need of a minifier for JavaScript. I quickly put together a web-app on AppHarbor to make minification always available quickly. The code is hosted on GitHub.

The application is an ASP.NET MVC-app, using Justin Etheredge's framework for minification called SquishIt. The app also uses ASP.NET Web API together with some simple jQuery to display the results of the minifications without any page-reloads.

The SquishIt-framework is a very easy to use and provides multiple minifiers for both JavaScript and CSS.

JavaScript minifiers:

* At the moment of writing this post, Google Closure is not working as expected, but should hopefully work soon.

CSS minifiers:

Enjoy it at squishify.apphb.com and fork it on GitHub.

DevSum Scheduler - Plan Your Attendance

DevSum 2012

Since I'm attending DevSum 2012 at the end of this month, I felt I needed to keep track of which talks to attend... but also the need to play around with some web-technologies.

From those needs I took some evening hours to build DevSum Scheduler. It's a web-app that allows you to highlight which talks you're going to attend.

The app uses HTML Agility Pack to get the data from DevSum's own website and then ASP.NET MVC Razor to display the content properly. To store this I've used HTML 5 LocalStorage to persist the choices made.

There are many other technologies used, which are listed on the about-page. Since the website is suppose to help the attendees by being available on their smart-phones, I've used CSS Media Queries for mobile layout and Modernizr for feature-detection in the web-browser.

Check out the full source-code on GitHub. Again, the outstanding AppHarbour has been used to quickly get the app on the Internet (through a GitHub-service hook of course).

HtmlEncoder - Testing out MVC 4 on AppHarbor & GitHub

ASP.NET, AppHarbor, GitHub

HtmlEncoder is a web-application built on ASP.NET MVC 4, source-controlled on GitHub, deployed on AppHarbor.

GitHub allows you to directly deploy to AppHarbor on checkin/push to the Git-repository, which is a very powerful and useful feature, to quickly get your ASP.NET web-apps online in the cloud.

It started out with a need to encode strings for HTML and developed into a quick test of how Web API on MVC 4 works in an AJAX-enabled web-app.

Try it out at http://htmlencoder.apphb.com and fork it on GitHub.