Content driven web design - Step 2

And we are back :-)
Time to break our website and make it better, right? Do you remember what we are trying to achieve here? Hope so, if not please read our previous post about content driven web design.
So we have our website, where you can find best bars in the world, as a bar owner you can register and list your venue. We want to make sure our content if formed the way it could be easily understood not only by humans, but also by crawlers, so hopefully we would get a better position in search results.
Our website is developed with ASP.NET, so we have a site master file (which is pretty much a template with predefined HTML and logic that can be applied to any other page that uses the site master). In site master we have our header and the footer and a placeholder for the page content which is populated on each page individually.
Let's start with site master first, pretty it up, and then switch to the page itself.

Step 1: comment out all linked styles and javascript libraries.
Why are we doing this? Because we want also to refactor our code a little bit and make sure that we do not load key parts of our content dynamically with javascript. Styles - well we want to see our HTML the way search engined would see it.

Step 2: check how it looks now.

Generally speaking this is what we wanted for now. Site master is good enough, we have our header with the title, and our footer. Problem is what we have inbetween. As you can see from the screen shot, we don't have any information displayed to tell us what is this page about. Some bits of data, like top rated bars, recently reviewed etc, they are supposed to be headings as well, and they are not. And there is no actually any information about those bars.

Step 3: Let's touch up our page. The same way, commenting out all the styles (in case there are some linked) and javascript libraries.

Step 4: Since we will be re-doing our styles, current styles can be removed, so let's delete all applied class attributes.

Step 5: Apply h1-h4 tags to existing elements.
We would be starting from the top, the title of the page - h1, next heading - h2, next - h3 etc.

Step 6: Add information about the page.

Looks a bit better now. At least now we have some extra details, we know what is the title, headings etc.

Step 7: Display missing information.
Well in our case it would require some programming since we are loading information from the database. So for now let's just indicate where the information is going to be displayed:

So now our HTML structure looks more or less okay, it is clear what we are talking about.
What else can we do with it prior to making things pretty? Structured data! What is it? Well it is an extension of your HTML code with extra atrtibutes to make search engines' life easier letting them know which sections of our page is related to some local business let's say, or it is contact details of some person, or we are talking about some cool event next week, where is date, how many reviews some bar has na dmuch more.
We'll give you more input on structured data in our next post. So keep reading folks!