Well.. Our blog is also use BlogEngine.NET. We have used this CMS for long time. In this article, we will share short tutorial how to make your BlogEngine.NET site optimized perfectly and improve your google SEO score.

Creating a theme

I've never created a blog theme before, for any engine, but BlogEngine.NET has a handy tutorial that walks you through the necessary steps. I had to refer to some of the stock themes occasionally for clarification, but most of what I needed was in the tutorial - if you've done any ASP.NET development before you won't have any problems.

There are really only 4 things you need to create for your theme:
- Master page (site.master) - This is the master page applied to every blog page. Use this to define your basic layout, etc.
- Post View (PostView.ascx) - This defines the user control for displaying a single post.
- Comment View (CommentView.ascx) - The user control for displaying comments.
- Your own CSS to style the elements created above.

(These are all described in more detail in the tutorial)

We took the appropriate bits of boilerplate HTML from the sample index.html that came with Skeleton and used them as the start of my site.master:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head runat="server" profile="http://gmpg.org/xfn/11"> 
    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <!—CSS
  ================================================== -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/skeleton.css">
    <link rel="stylesheet" href="css/layout.css"> 
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]--> 
    <!—Favicons
    ================================================== -->
    <link rel="shortcut icon" href="images/favicon.ico"> 
</head>

Make sure you include that mobile-specific meta if you want your responsiveness to work on mobiles. Html5shim makes your HTML5 elements work in older versions of IE.

We then roughed out where everything needed to go and used the Skeleton grid to lay things out on the page, eg. this is the header:

<div class="header">
        <div class="container">
            <div class="ten columns">
                <h1><a href="<%=Utils.AbsoluteWebRoot %>"><%=BlogSettings.Instance.Name %></a></h1>
                <h4><%=BlogSettings.Instance.Description %></h4>
            </div>
            <div id="headerextra" class="six columns">
                <div id="headerlinks">
                    <ul>
                        <li><a href="<%=Utils.AbsoluteWebRoot %>page/My-CV.aspx">CV/Resume</a></li>
                        <li><a href="<%=Utils.AbsoluteWebRoot %>contact.aspx"><%=Resources.labels.contact %></a></li>
                        <li><a href="<%=Utils.AbsoluteWebRoot %>archive.aspx"><%=Resources.labels.archive %></a></li>
                        <li><a href="<%=Utils.FeedUrl %>" class="feed"><img src="<%=Utils.RelativeWebRoot %>themes/<%=BlogSettings.Instance.Theme %>/images/rss.png" alt="Subscribe" title="Subscribe" /></a></li>
                    </ul>
                </div>
                <div id="headersearch">
                    <blog:SearchBox ID="SearchBox1" runat="server" />
                </div>
            </div>
        </div>
    </div>

Bingo!!

Now, you can see that your site has optimized for mobile phone. Your site scales perfectly down to small, phone-size screens.