There are lots of people who would class themselves as a developer and would say they can code in any given language. Often the difference between a good developer and a great developer isn't anything to do with the program, how well it works, and how few bugs there are. The great developers make programs that work but they make them in a way that isolates the various components from each other.
I want to run through a few examples and apply these very same thought processes to SEO. There are a number of places where it would be beneficial to separate the various logical components of, for example, a web site.
Many of you will have heard of the acronym MVC (Model - View - Controller), which is one example of a software pattern designed to separate the various components of a website. In this case the pattern is designed to separate the information storage (the model) from the user interface (the view). The controller manages the communication between the view and the model.
In a large development team you often find experts in each stages of the development, so you have someone who understands the model (which normally maps to a database) and all the business rules. At the front end (the view) you have experts in HTML and CSS. I've never quite been able to separate the role of the controller from the model, so I'll skim over that and hope you don't notice.
No matter what software pattern is used to code your webpage, it is (and has been for a long while) good practice to separate the structure of a site from the presentation of the site. The HTML should contain no information about how to display the page. This should purely be the structure and semantic information required for the page. This is one of the major failings of websites that use tables for layout purposes, which in almost all situations has to place a lot of the presentational information within the HTML.
The final level of separation that most websites employ is to separate the content from the structure of the site. This is normally done by placing the content in a database and embedding this in the HTML when the page is requested.
In fact, we (and many others) take this one step further and store this content in a text based format with (the majority) of HTML stripped out, and replaced with a markup language called markdown. This means our clients don't have to learn HTML in order to update their website, but by following a few simple rules we can still have semantically marked up code.
The theory is all well and good, but how does this help you as an SEO? Just like a development team, the main benefit is that you can have different people working on different areas of the site.
1. Technical site review changes
The vast majority, if not all changes we request early on in a project are found in a technical site review, which should be implemented by the team working on the backend (or often the template of a site). This can normally be looked at completely separately from any content changes, and can be implemented as such.
Those of you without a templating system will almost certainly know the heartache involved with having to update every page of a site to make a simple change. That was the way most sites were written 6,7 or 8 years ago, and is why most of those sites were rarely updated.
2. Content creation
In most large organisations its hard enough asking people creating content to think in terms of keywords. The last thing you want is for them to also be the ones creating the HTML. By separating the content from the template, you can ensure that the content created by people with no understanding of HTML or semantic markup is still optimised.
3. Site re-designs
I'm certainly guilty of getting bored with websites quickly, and we have seen two major versions of the Distilled site within the last two years, and there have been many more tweaks in the intervening times. All of this would have been much much harder (to the point of not worth doing) if our content wasn't stored without any information about how it will be displayed in our content management system.
On a side note, one of my pet peeves is when I am digging around the source code and (I kid you not) you see something like the following:
<div class="blue-arial-14pt-bold">Text</div>Creating class names like that does not count. Imagine your designer comes along and wants to change the style of the above elements to green text in 12pt verdana. You now have text labeled "blue arial 14pt," which is green and verdana. The guy who takes over updating the CSS is going to LOVE you for that.
Consistency
One of the issues with sites that have a large number of pages is that without a tool sat helping you it is impossible to look at the code of every page. With the confidence that comes with knowing the site was written using templates or a pattern that includes views, you can be confident that if a given page uses the H1 tag in the correct way then the other pages of a similar type will also.
I guess the point I'm trying to make is that having good developers who understand not only how to write good websites (or tools, or programs, etc), but how to write them *well* will make a huge difference. This isn't immediately obviously an SEO benefit, but anything that can make development or creating content will in the long run make your SEO efforts more effective.
Agreed with what you said, although there wasn't any direct advice in the article (practical tip, just to be more seo-like).
I have to add one thing: osCommerce. The best negative example. It almost makes me cry all the time.
I hate osCommerce. And Joomla.
I try to duck when I see someone coming along with a problem with those.
The only problem I run into working on a very large news CMS is when the content people are to overworked to update "traditional print headlines" to more webish headlines.
Have you ever spent any time explaing why the headline "County Roundup" doesn't work on the web, only to be told, "well, that's what it is"? It makes for a loooong afternoon.
Completely right, that's the way to go. I think you come off best if the web-framework you're using kinda forces you to do the right thing. We're using apache wicket for some of our projects - and it really has great advantages.
one of our apps has some hundred pages (from a developer's perspective - from a google-bot perspective some 2,000,000 :-)) and decreasing all headlines one level, i.e. h4 to h3, h3 to h2 and h2 to h1 didn't take me longer than half an hour. Just imagine having to go through all of the several hundred pages ...
But finding the right technology and doing the right things early when it comes to template concepts and structure is definitely, as you said, what makes the difference between script-kiddies and web-developers ... well yes, you said it slightly less offensive :-)
Good post Duncan. Definitely important to remove as much presentation logic from your data. I'd be interested in any more details about "markdown". Does this still contain some markup for links and emphasis?
Markdown rocks. You use things like # at the beginning of a line for h1, links are done as [anchor text](https://www.example.com). Very easy for clients to understand :). See more here.
Thanks for the link Will. Seems like a very nice language - probably better than many of the wiki languages that do a similar thing.
I particularly liked the link on that page to the html2text utility that converts a HTML document into Markdown. See the SEOmoz homepage in Markdown format to get an idea of how simple it is.
I also found an implementation in PHP which can be used with Wordpress and bBlog (or obviously your own site if it's implemented in PHP).
All good points Duncan.
Since no one's mentioned it, I just want to put in a plug for the Drupal CMS: Drupal.org
Theme and content are totally separated, and it couldn't work better for SEO. Googlebot adores Drupal websites.
well...this is interesting for me too..even though I'm not a coder...I was trying to explain to my boss why the developer they are looking for needs to be SEO savvy on the technical side...and this helps me explain why :) aswell as helping me learn more about the techy side..
nice post
i agree with you but when it comes to changes of view which is design, believe be they are very hard, and when you have external company who are doing development for you?
thanks for sharing this information, i think most important is the structure of the website, and i found most of the website are poorly structred...
Yes, seperating source code and content is much better than implementing it throughout your website. Using a style sheet in particular will allow you to display your content in order of imporatance, so that you can find things much more quickly. Templates should also be used; again allowing you link back to your other pages and style sheet. Great post!
very informative article. setting up a templating system at the moment, so will take this on board. thanks
Wow! What a great blog you have published. I adore it and will share to my friends.Thanks!
Great post, content/code separation is a must
Does anyone have any suggestions which CMS, based on ASP.NET would be best pick?
I checked Sitefinity CMS, Umbraco CMS and InsiteCreation CMS.
All very different, but still i am not sure which would do best also for accessibility purposes which nevertheless coincide with quite a few basic SEO strategies.
I can't stand having to work on horribly designed websites and archaic code. What is actually worst is the number of small business customers that utilize sitebuilders that are structured to disallow real seo techniques to be used. I certainly hope more web developers adapt your methods.
I wholeheartedly agree. I know this blog was written almost 3 years ago, but separation of the various layers of code development, especially with websites, is an absolute must, and was as important then as it is now.
Designers and software developers need to keep just two major things in mind when going to work on their projects: "Can this be extended or modified easily?" and "Could someone else read it if I had to show it to someone else?"
That's why it's imperative that every software developer and web page/site designer out there, especially professionals, need to keep up to date on the latest technologies in their respective fields.
Do you think that using CMS/Blogging tools such as WordPress fit the bill exactly?
The one thing I have against Wordprss is it doesn't seperate the HTML and PHP.
There are many template based CMS (my favourite is Modx) that use tags to insert code into the template. This make both the HTML and the PHP much easier to read.
For those 'rolling their own' code, Smarty Tags work great.
I don't know about that. Most of what you do in a WP template uses WP functions written in PHP mixed in with HTML. The same thing happens in a lot of other CMSs (ExpressionEngine and ModX are two I've used which are similar) except that they use their own tags. The tags and the PHP functions both accomplish the same sort of things.
Wordpress infact recommends template tags (wordpress specific) and not generic php code for use in wordpress themes.If someone uses anything other than template tags, it is bad design practice.So don't blame it on wordpress.It perfectly fits the bill here...
We had a similar conversation with one of our clients with whom we built their website. After launching the site and making a huge jump in the SERPs they were happy. However after a few months of SEO in which they had little budget and high expectations they saw no more noticable jump.
We suggested they go with another firm to see if they could do better with the alloted SEO budget. They and their new SEO were stuck on having the ability to FTP to individual page to change the site. The SEO tried to redesign the site to not use our templates. They now have 1/2 the visitors as they had before.
Time for you to put a quote in, to put it all back how it was...
If they now have half the visitors, they already have some numbers to crunch as to your cost against the expected revenue increase... question is, will fixing it really get them back where they were, or is the site now tainted?
No, I completely agree with you. Separation of content and logic (and the use of templates) is definitely the way to go in most instances. Saves a lot of time in the long haul reworking SEO, design, content, miscellaneous updates and the whole lot.
Great post Duncan!
MVC is a great pattern as long as you don't take it too far. The concept is perfect, separating controller logic (queries, etc) from the presentation will make things *infinitely* easier in the long run.
It especially comes in handy when developing alternate versions of sites (think mobile). All your logic is already in place, you just have to show a different view (presentation layer) and you're good to go. Can you imagine creating a mobile version if all the app logic and views are in the same file? Nightmare.
What I don't understand is when people insist on NO php code being in the presentation. They would rather have it full of things like {row.value} instead of <?php $row['value'];?>. Why bother? php is perfectly fine for templating, why increase the processing load by parsing a template with a templating language? Unless you're building the presentation layer to work across multiple backends - asp, jsp etc., I see this as a total waste of time.
That low amount of PHP is probably fine, but often you will see a whole lot more than just the simple output of the value in the variable - stuff like calculations or decision-tree logic. That should always be avoided if you can.
Just wondering: do you know of a good source for SEO optimized templates? I've learned a lot in the past few months and much of it from this site. Thanks for the indepth write up.