(Note: This podcast was originally published 1n 2006 under another domain name – bastioninternet.com/blog. In 2010, the blog was later migrated to this site. Some links may be outdated or there may be issues with RSS feeds)
In Search Engine Optimization – Part 2 we discuss On-page Coding. What steps should we take in coding our website to gain in search engine rankings.
Click the “more†link below for a full transcript of the show.
Here is a summary:
(Note: In this podcast, on occasion I refer to the “Content†meta tag. That should be the “Description†meta tag. I guess my “Content is King†theme from Show #3 stayed with me a little too strongly. Sorry for any confusion.)
The code you use on your web pages was designed to tell users more about that page. Thus, it also tells search engines more about your page. Over the past 5 years the importance of that code has diminished somewhat, but it is still a valuable tool for both the viewers of your page and for the search engine crawlers.
First it’s important to have an understanding of the web itself and how it works. I briefly discuss and explain the following:
1) What is the Internet
2) Web Page Technology
3) How crawlers crawl
4) HTML – the language of the web
5) Specific on-page coding
Within Item 5 – Specific on-page coding, I take a look at 7 items that can help you to higher rankings:
1) Title Tag
2) Alt Attributes
3) Headings tags (like an H1 tag)
4) Meta tag – Description
5) Meta tag – Keywords
6) Internal linking structure
7) Clean code
(see examples here)
This is not a tutorial but is meant to give you an understanding of the relative importance of on-page coding, it’s likely importance in the future, and some of the top areas to examine if you want to pursue your on-page coding in more detail.
If you’d like to get more into the details, there is one excellent resource at www.seomoz.org. I also recommend frequenting www.searchenginewatch.com and www.webmasterworld.com.
Download the Podcast here:
Subscribe to Drive It – Convert It! here:
Read a full transcript here …
Hi and welcome to Drive It – Convert It, for April 27th, 2006. This is episode #4.
Search Engine Optimization – Part 2 – On-page Coding.
Drive It – Convert It is the podcast where Small and Medium Sized businesses learn the marketing strategies and tactics behind Driving More Traffic to your website and Converting that Traffic into qualified and identifiable leads and sales.
Drive It Convert It
I’m John Boulter. I’m the president of Bastion Internet and podcasts and show notes can be found at BastionInternet.com/podcast. That’s B A S T I O N internet.com/podcast.
Today we’re going to look at how special coding can work on your site to improve your overall rankings. I’ll give you a checklist to go through to make sure your site is adequately coded.
Welcome back to you returning visitors. If you’re new, welcome aboard.
Last episode we discussed the content of your website. How important it is to have good, original content and how to get that job done.
It’s probably a good time to also review the scope and intension of these podcasts. The main focus is to arm you, the business person or marketer with the information you need to adequately communicate and direct the Internet Marketing efforts being made on behalf of your site.
If you are a do-it-yourselfer, and are looking to learn how to do all the detail work yourself, then you’ll need to use these podcasts only as a starting point. They aren’t meant to be full tutorials. Use the Drive It – Convert It! podcasts to 1) nail down the business strategy and 2) familiarize yourself with the technology at a high level.
I’m going to list in the show notes some excellent sites that you can visit to get deeper into the technology if that’s where you want to go. Here are a few great resources:
– seomoz.org
– sewatch.org
– webmasterworld.org
So for those of you that want to be able to talk to the techs in your life without them looking down their noses at you, listen on. And for you techs listening in, you might be able to find a few good analogies to help you communicate the importance of technology to those simply looking at a website from a pictures and colors point of view.
So what is on-page coding. To explain this, I have to make sure we’re all starting with a base level of knowledge. Here’s how we’ll break it down.
1) What is the Internet
2) Web Page Technology
3) How crawlers crawl
4) HTML – the language of the web
5) Specific on-page coding
1) What is the Internet
Picture the Internet like the road system. You live on a street. Multiple streets connect your neighborhood. You have roads connecting your neighborhood to your city.
You have highways connecting your city to the state. And finally, you have interstate highways connecting your state to the rest of the country.
So once you step onto the street, you are basically connected to every single place in the country that is also connected to a street.
Now, also connected to these roads are buildings. You have two kinds – commercial buildings and residential buildings.
So think of the Internet as simply a bunch of roads on which you can travel anywhere. The commercial buildings are those places that have websites. The residential buildings are where people live. You can send and receive mail from there, but you aren’t open for business.
Computers that are specially set up to host a website are like the commercial buildings. Computers just set up to access the web are like residential buildings.
That’s it. Now you understand the Internet.
2) Web Page Technology
I know I’ve got listeners out there at all different technical levels. So, if some of this is old hat to you, bare with me.
When you want to learn about a business, you hop in your car, travel out to a commercial building, let’s say a retail store, and go in and look around.
Now with the web, you tell your computer to hop onto the road (i.e. the Internet) and travel to the store. Now your computer in reality never actually goes into the store. It just sends a message telling the store’s computer to send some information about the business. The store’s computer sends it, and your computer loads it up for you to read.
The information your computer receives isn’t all pretty and easy to understand, it’s just a bunch of lines of computer code. You need software to look at that code and turn it into something that makes sense and is easy on the eyes. That software is called a browser. You probably know it by names such as Internet Explorer, Firefox, Opera, Safari, or Netscape.
Your Internet Explorer reads that computer code and transforms it into a pretty, easy to follow website. All this is being done on your local computer using your installed software.
Now, if you’ve never done this, you need to. The next time you are on a website go to your browser’s menu and click on View, and then on Source, or Page Source.
You’ll see a whole bunch of computer code that if you’re not real familiar with it, looks like a bunch of gobbledygook. That gobbledygook is what your computer reads and more importantly, it’s what a Search Engine Crawler reads.
So each web page is really just a file – a bunch of lines of code – located on another computer that gets transferred to your computer when you click on something.
3) Search Engine Crawlers.
So, we know how the Internet works and we know what a web page actually is – a bunch of code. How do Search Engines work. Well, what they do is they write these little programs called crawlers or bots (that’s short for robots). The bots go out to your site and get the code from the web pages and they read it. They then send the information back to their main computers where it gets indexed and stored. Part of the procedure is to “score it†for the purpose of ranking the results when people search for terms that match that page.
The bots will also come across code that is a link to another page on your site, or a page on a different site. They’ll follow that link and then read what’s on that page. By doing this, they eventually crawl the entire Internet (or so they’d like you to think).
Now bots are capable, but they aren’t very smart. If you’ve constructed your site in such a way that they can’t follow a link, they won’t make an educated guess, they’ll just leave the way they came. More on that later.
4) HTML – the language of the web
Our final piece of background information is HTML. HTML is the main programming or scripting language that is used to construct web pages. For the most part, it’s what tells the browsers how to display a good looking site. The bots understand HTML.
HTML has different ways to classify and understand what to do. There are things called tags. A Title tag, is a piece of HTML code that tells a browser to display the text attached to it at the very top of the browsers window.
A paragraph tag tells the browser that all the words that follow it are regular text that is part of a paragraph. The browser displays this, too.
You may have heard of something called a meta tag. That’s a type of code or element that the browser doesn’t display. However, the bots, know what it is, and they can use the information that’s attached to it to help them classify or index your site.
Wow! You are a techie star. You know how the Internet works, you know how websites work, you understand how search engines work, and you understand the language of the web – HTML.
Now we need to put it to good use.
5) Specific on-page coding
Different search engines are going to weight on-page coding differently. For example, MSN may put some weight (give some value) on the Meta tag – Keywords whereas Google may hardly consider it at all.
Additionally, the engines will change the way they value, or weight, the different components from time to time.
What I’m recommending you do, is to make sure you’ve got the basics covered.
Let’s look in some detail at 5 on-page coding components and talk about 2 others for a total of 7 items:
There are more, but if you cover these off, you’ll be in pretty good shape.
1) Title Tag
2) Alt Attributes
3) Headings tags (like an H1 tag)
4) Meta tag – Description
5) Meta tag – Keywords
6) Internal linking structure
7) Clean code
I’ll post links to examples of each of these components in the show notes. I’ll put the links both in the Summary and in the transcript area of the show notes.
Here is where I’ve gotten a little ahead of myself with the podcast series. You see, all this optimization is going to revolve around your targeted keyword and keyword phrases. I haven’t really gotten into how you determine how to choose the best keywords. We’ll get to that next show – so between now and then, start considering it.
1) Title Tag
(Example of Title Tag)
Many of you have probably never even noticed this. It does show up on your browser screen, but it’s not actually a part of the web page area. It is way up in the top left corner above the browsers menu. Look above the File menu button and you’ll see it.
Search engines read it and use it to determine what your page is about. So you want to tell them.
This is also the text used when someone bookmarks your page. Don’t try to stuff everything in. Generally, go with a keyword phase (2-4 words and then I usually put some branding like the company name). Now make sure that you’ve repeated whatever the keyword phrase is in the content of the page.
2) Alt Attributes
Back in the day, people with dial up Internet access would sometimes turn off images on their browser to make pages load faster. Browsers would then display an alternate text description of the image. So if you had a picture of people at a party and your page was describing your Disc Jockey service, you might put as an Alt Attribute “Party enjoying DJ serviceâ€. Now part of Alt Attributes is that they are also used by the blind who use screen readers to describe what an image is telling them. So, try to make the description really describe the action, too.
I don’t want to try to tell you over this podcast how the code actually looks. Come to the bastioninternet.com website to view an example if you’re going to be doing this yourself.
If you’re using the Firefox browser, it’s really easy to see if your site has Alt tags. Just right-click on an image and select “propertiesâ€. It will then display a box that includes the Alternate text. In other browsers, find where you can unselect showing images and the images will be replaced with the Alt Attribute text. In Internet Explorer it’s found under Tools – Internet Options – Advanced – Show Pictures.
Finally, you can view the page source and search for the word “imgâ€. “img†denotes an image and immediately following it is typically the Alt Attribute.
Opinions vary on how much weight the Alt Attribute has on overall ranking especially if the graphic is also a link. I say, put it in. In makes sense to do it on a number of different levels.
3) Heading Tags (H1, H2, etc)
(Example image)
These are typically the first words of content (that’s the page text not counting menus, images and the like). I consider this the headline of the page – like a newspaper has a headline.
Anyway, by denoting something as an H1 Title you are giving it more importance (and usually more font size). Make sure each page has one and preferably it will include the same keyword phrase or variation of it, found in the Title Tag. Now if it just looks stupid because it makes for a poor headline then consider ignoring it. If your page sells better with a different headline, then don’t lose sleep over it.
Now further down in the page you can have sub-headings at the H2 and H3 levels or in a Bold or Strong font. This may or may not have a impact on rankings, but it will probably make your page easier to skim and read. So do it.
4) Meta tag – Description
(Insert Example image)
Meta tags are HTML elements that are used to store data about a web file (or page). They don’t show on the web page but are read by search engine crawlers.
The Discription meta tag consists of a few sentences which should describe the specific web page. You can have a different Description meta tag for each page on your website.
Most SEO professionals believe that this element has basically become meaningless as far as impacting your ranking. You see, it was vastly overdone and abused in the past. Many webmasters put misleading and “spammy†descriptions in solely to get better rankings for their sites in areas where the web page wasn’t relevant.
I give it some attention for 2 reasons:
First, it can be the content that gets picked up and displayed on a search engine results page. So if it’s compelling copy, it makes your search listing more likely to be clicked.
Second, what goes around comes around. It’s like men’s ties, never throw them out because eventually they come back into style.
Let me expand on this a little. Every time the search engines figure out a better way to evaluate sites, the webmasters and SEO professionals start to exploit them. So the search engines have to come up with new ways to base their evaluations and rankings. Well, they’ve pretty much run out of ways. Now, they just have to get better at evaluating the information that is there. So when too many people abused the Description Meta tag by misrepresenting what their page was actually about, the search engines just started ignoring that element. Soon, I believe the engines will take a look at it again with now improved technology to judge the relevance of that tag to the rest of the website’s content.
Bottom line –do it now and you won’t have to worry about it.
Danny Sullivan of Search Engine Watch had a good, quick technique for accomplishing this if you’re in a hurry. Copy the first few lines of your pages’ text, and stick that in the meta tag area.
5) Meta tag – Keywords
(Insert Example image)
The Keywords meta tag consists of 10-20 keywords for which you’d like your page to be ranked. Just like the Description meta tag, you can have a different meta information for each page on your website.
Don’t go crazy here with too many keywords. The engines don’t read past a certain point anyway. Make it relevant to the page. This can be a good place to put in misspellings. So if you sell “jewelryâ€, consider also adding “jewlery†to the Keywords meta tag.
Once again, this element doesn’t currently add a lot of weight to overall rankings. However, it does have an impact and should be done. If nothing else, it will focus you on the keywords you want to include in your content. I’ll often refer back to the keyword meta tag as I review page content to make sure I’m including the relevant words. It keeps focus on them.
That’s 5 basis on-page coding elements that will take your site a long way. Let’s look at a few other more global items.
6) Internal Linking Structure
Internal links are links that go from one page in your site to another page in your site.
There is a lot of analysis and speculation about how much an internal linking structure may have to do with transferring ranking weight that comes from linking. I’m not going to address that here. It’s a little beyond the scope of this podcast.
What I want to address is more of a crawl-ability aspect. Can the search engine crawlers navigate your entire site and how easily can they do it.
So test your site for crawl-ability.
Use only your mouse and click on HTML links and see if you can get to everywhere on your site. You can’t click on anything programmed in Flash or inside a Frame. Also, if you have any menus that “fly out†which means when you hover over the main part of the menu, a new sub-menu shows up. Don’t use a drop-down menu and you don’t use the keyboard to type in any type of search criteria like a part number.
Finally, you should count the number of click levels deep you have to go to reach a page. Ideally, it should be 3 or less.
I believe in Show 3 we talked about one good method of making your site accessible and that is to have a site index easily accessed from the Home page, and to have all of your pages accessible from it.
7) Clean code
Search engines often don’t read all the way to the end of your web page. They also may value the content at the top of your page much more than that at the bottom of your page. If you use clean code (and now Cascading Style Sheets tend to be in vogue), you make it easier for the engines to read your site and your content tends to be much higher on the page (from a bots perspective).
So, if you are having development done for you, find out how your developers are designing and if they are using CSS technology.
Well that covers most of the basics and starts to edge into the intermediate. There are a whole bunch of variations and other factors such as database driven or content managed sites, other tags and attributes and more accessibility factors. To really understand them even to the extent of just being able to judge if your current webmaster or SEO talent is employing them, gets far more complex.
If you want to get to that point, welcome to my world.
Start by visiting some of the sites I talked about in the beginning.
Coding for the search engines is fairly standard for the most part. You can probably get 80-90% of the benefit by looking at the areas I’ve outlined. If you are in a highly competitive space, you’ll likely want to address that other 10-20%. However, to do that, you’ll have to double the effort you put in.
That wraps up Search Engine Optimization – Part 2 – On-page Coding
Next episode will be Part 3 of driving traffic to your site through Search Engine Optimization. It will cover key word analysis. The keywords you choose to optimize for can make or break your optimization strategy.
So subscribe to Drive It – Convert It!, and automatically download episode number 5 when it comes out. You can follow the subscription links on our site. Or if you use iTunes, do a search for drive it convert it and pick us up there.
I’m John Boulter, for Bastion Internet’s Drive It – Convert It! Podcast.
Visit us at bastioninternet.com or Email us at podcast@bastioninternet.com.
