I'm designing a new site which I want to be as SEO friendly as possible, fast and responsive, semantic and very accessible. A lot of these things, embarrassingly are quite new to me. Have I miss applied anything? I want the template to be perfect.

Live demo:


<!DOCTYPE html>      

<html lang="en">  

    <meta charset="UTF-8" />    
    <title>Welcome to Scirra.com</title>    
    <meta name="description" content="Construct 2, the HTML5 games creator." />    
    <meta name="keywords" content="game maker, game builder, html5, create games, games creator" />    
    <link rel="stylesheet" href="css/default.css" type="text/css" />     
    <link rel="stylesheet" href="plugins/coin-slider/coin-slider-styles.css" type="text/css" />    


<div class="topBar"></div>    
<div class="mainBox">
        <div class="headWrapper">    
            <div class="s searchWrap">    
                <input type="text" name="SearchBox" id="SearchBox" tabindex="1" />    
                <div class="s searchIco"></div>    

            <!-- Logo placeholder -->       

        <div class="menuWrapper"><nav>    
            <ul class="mainMenu">    
                <li><a href="#">Home</a></li>    
                <li><a href="#">Forum</a></li>    
                <li><a href="#" class="mainSelected">Construct</a></li>    
                <li><a href="#">Arcade</a></li>    
                <li><a href="#">Manual</a></li>    
            <ul class="underMenu">    
                <li><a href="#">Homepage</a></li>       
                <li><a href="#" class="underSelected">Construct</a></li>    
                <li><a href="#">Products</a></li>    
                <li><a href="#">Community Forum</a></li>    
                <li><a href="#">Contact Us</a></li>    

    <div class="contentWrapper">    
        <div class="wideCol">    
            <div id="coin-slider" class="slideShowWrapper">    
                <a href="#" target="_blank">    
                    <img src="images/screenshot1.jpg" alt="Screenshot" />    
                        Scirra software allows you to bring your imagination to life

                <a href="#">    
                    <img src="images/screenshot2.jpg" alt="Screenshot" />    
                        Export your creations to HTML5 pages    
                <a href="#">    
                    <img src="images/screenshot3.jpg" alt="Screenshot" />    
                        Another description of some image
                <a href="#">    
                    <img src="images/screenshot4.jpg" alt="Screenshot" />    
                        Something motivational to tell people    
            <div class="newsWrapper">    
                <h2>Latest from Twitter</h2>    
                <div id="twitterFeed">   
                    <p>The news on the block is this.  Something has happened some news or something. <span class="smallDate">About 6 hours ago</span></p>    
                    <p>Another thing has happened lets tell the world some news or something. Lots to think about.  Lots to do.<span class="smallDate">About 6 hours ago</span></p>    
                    <p>Shocker!  Santa Claus is not real.  This is breaking news, we must spread it. <span class="smallDate">About 6 hours ago</span></p>    
        <div class="thinCol">    
            <h1>Main Heading</h1>    
            <p>Some paragraph goes here.  It tells you about the picture.  Cool!  Have you thought about downloading Construct 2?  Well you can download it with the link below.  This column will expand vertically.</p>    
            <h3>Help Me!</h3>    
            <p>This column will keep expanging and expanging.  It pads stuff out to make other things look good imo.</p>    
            <h3>Why Download?</h3>    
            <p>As well as other features, we also have some other features.  Check out our <a href="#">other features</a>.  Each of our other features is really cool and there to help everyone suceed.</p>    
            <a href="#" class="s downloadBox" title="Download Construct 2 Now">    
                <div class="downloadHead">Download</div>    
                <div class="downloadSize">24.5 MB</div>    
        <div class="clear"></div>   

        <h2>This Weeks Spotlight</h2>    
        <div class="halfColWrapper">    
            <img src="images/spotlight1.png" class="spotLightImg" alt="Spotlight User" />    
            <p>Our spotlight member this week is Pooh-Bah.  He writes good stuff.  Read it. <a class="moreInfoLink" href="#">Learn More</a></p>
        <div class="halfColWrapper r">    
            <img src="images/spotlight2.png" class="spotLightImg" alt="Spotlight Game" />    
            <p>Killer Bears is a scary ass game from JimmyJones.  How many bears can you escape from? <a class="moreInfoLink" href="#">Learn More</a></p>    
        <div class="clear"></div>    
</div><div class="mainEnder"></div>   

    <div class="footerWrapper">    
        <div class="footerBox">     
            <div class="footerItem">    
                    <li><a href="#">The Blog</a></li>    
                    <li><a href="#">Community Forum</a></li>    
                    <li><a href="#">RSS Feed</a></li>    
                        <a class="s footIco facebook" href="http://www.facebook.com/ScirraOfficial" target="_blank" title="Visit Scirra on Facebook"></a>    
                        <a class="s footIco twitter" href="http://twitter.com/Scirra" target="_blank" title="Follow Scirra on Twitter"></a>    
                        <a class="s footIco youtube" href="http://www.youtube.com/user/ScirraVideos" target="_blank" title="Visit Scirra on Youtube"></a>    

            <div class="footerItem">    
                <h4>About Us</h4>   
                    <li><a href="#">Contact Information</a></li>    
                    <li><a href="#">Advertising</a></li>    
                    <li><a href="#">History</a></li>    
                    <li><a href="#">Privacy Policy</a></li>    
                    <li><a href="#">Terms and Conditions</a></li>    

            <div class="footerItem">    
                <h4>Want to Help?</h4>    
                <p>You can contribute to the community <a href="#">in lots of ways</a>.  We have a large active friendly community, and there are lots of ways to join in!</p>    
                <a href="#" class="ralign"><strong>Learn More</strong></a>    
            <div class="clear"></div>   
    <div class="copyright">    
        Copyright &copy; 2011 Scirra.com.  All rights reserved.    

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>    
<script type="text/javascript" src="js/common.js"></script>    
<script type="text/javascript" src="plugins/coin-slider/coin-slider.min.js"></script>    
<script type="text/javascript" src="js/homepage.js"></script>     


  • Can someone remove the "accessibility" tag. I tried multiple times and I get stuck in a chain of javascript validation telling me that my edit summary needs more than 6 characters – MrJinPengyou Feb 13 '14 at 14:16

No SEO expert, but to get the ball rolling take the meta-keywords: game maker, game builder, html5, create games, games creator -- and put them in the visible content in a way that a human reading the site would get the idea right away that was the focus of the site. Beyond making sure the search engines can see the content, not doing things search engines don't like (for example spam) -- my experience has been in large part that if human will like it, search engines will too. For example, search engine like pages that load fast; humans do too. Any rate, I'm no expert; meaning I don't current get paid to do seo; have in the past though.

| improve this answer | |
  • +1 thanks, none of the main content is written though, but will plan to add keywords in - in a non obtrusive way. – Tom Gullen Mar 4 '11 at 0:17
  • @Tom Gullen: No problem, point is if you're writing content you're not "adding keywords" your writing content that's worth reading and clear. For example, "Game maker builds games to create games for game creators." ...is a bad sentence; both for humans, and search engines. – blunders Mar 4 '11 at 0:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.