Webpage Scripts for SEO

There are different things you can do for the on-page SEO (search engine optimization) of your web pages and blog posts. Today we are going to cover how you can improve your on-page SEO through proper use of the back ground coding (HTML coding) used to create your pages. Optimization of the HTML coding is one of many on-page search engine optimization tasks you can look at when deciding on a content management system, an e-commerce software package and/or when selecting a theme/template for the site. It is also something you can add to your checklist when hiring a web designer.

When examining the search engine friendliness of a design or software package that you have not built or worked with yourself yet (e.g. Contemplating hiring a web designer or purchasing a theme/template) you will need to view the source code of the web pages.

We will look at the HTML coding of a well optimized page from the top down next.

DOCTYPE Declaration

The DOCTYPE declaration should be the first line of the web page background coding. This line defines what standard the web page is coded to. The browser uses this information to understand how the web page is constructed and to interpret the coding correctly. You can see if the designer has followed the standard specified in the DOCTYPE declaration by testing the page with the W3C HTML Validator.

Some would say that code validation has no effect on your search engine optimization but consider:

Code validation helps problems with browser compatibility. It does not solve all cross-browser compatibility issues but it eliminates your coding as the cause.
With cross-browser compatibility in mind, if visitors to your page(s) cannot see them because your site uses browser specific coding or just doesn’t render well in their chosen browser you are not going to get organic incoming links happening. They will just leave without seeing what great content you worked so hard to compose.
Web page load time influences the visitor’s decision to stay on the page. If the page download takes too long because of excessive codes, visitors tend to leave. You once again have missed out on an opportunity to earn organic incoming links. Also, web page speed is one of the many factors Google uses when evaluating your pages.

There is also the issue of website maintenance which is not SEO related specifically but if it is a chore to update your site then it does become an issue because you are not updating the content.

Character Encoding

Right after the opening <head> tag should be a line defining the character encoding for the site. This is an important line of coding as it tells the browser what character set your website uses. If it is not there or is further down in the head section of your page the browser has to guess which character set you are using. If it assesses wrongly, it will produce the page once it figures things correctly. Visitors may leave the page.

Title Tag

The content between the <title> and </title> set of tags will show in the topmost bar of the visitor’s browser window. It is also used when they bookmark your page in their browser and on bookmarking sites. The search engines will use the contents of the title tag in your search results also, if it suits the user’s search.

Each page needs a unique set of title tags. The contents of this tag need to describe the contents of the page while being catchy and using the keywords/phrase you are targeting for the page.

Some things to look for when deciding on a content management system or ecommerce software package are:

You can have unique titles for each page.
You can edit the title tag contents to whatever you want. Some systems you can’t.
You don’t have to have the name of your site first in the title of the page. Some systems won’t let you change this. If they won’t then this is an issue because all your results in the search results will start the same way, possibly cutting off the important part of the title, what describes the contents of the page.

Meta Description

Like title tags, unique meta descriptions for each page are important. These could be used in your search results or picked up by a bot collecting resources for another site, like a directory. Make your meta description a mini ad describing what the visitor will find on the page.

Meta Keywords

Now you may have seen that the major search engines are not using the meta keywords tag in their evaluation of your pages but it does not hurt to include this meta tag as things could change in the future plus your search function on the site could use them when producing internal search results for your visitors.

Major search engines have quit using the meta keywords tag in their evaluation as people misuse this tag to manipulate the search results. When meta keywords are used, should have keywords that are on the page and not be unrelated.

Heck, you have to do keyword research anyway for the content of the page, so why not include the keyword meta tag to help keep yourself focused on the theme of the page if nothing else.

Link and Script Tags

One thing with the advent of web design is the use of plugins and scripts to make web pages fancier. This is all well and good if it provides a great experience for your visitors.

A few things to look at for link and script tags:

Each line that links to something in the head section of your web page is called a request. The line requests (fetches) the function/feature associated with it. Each request adds to the download time of the page.
The link and script tags in the head of your page adds to the overhead of the page. i.e. makes the web page coding larger and more complicated for the browsers to interpret.
If the link line is fetching something from another site and the site is down this will stall the rendering of your web page on the initial fetch as the browser waits for a response from the other web server. It can also slow down the rendering of the web page if the other web server is busy or just slow.
If a script is used on multiple pages, it is better that it is in an external script file (preferably on your server). Once downloaded by the browser it is kept in the browser’s memory until you leave the site or the browser is closed.

One thing with blogs is there are a zillion plugins to manipulate the contents of your blog posts. Each plugin you add increases the head section coding and requests of the page(s). Some of these plugins are not necessary as a good web designer/theme designer can incorporate these functions into the design without using plugins.

Style Tags

Style tags are also in the head section of your web pages. These are called internal styles meaning that they are applicable to the page they are on. If the design you are looking at repeats the same styles on each page this adds to web page overhead, the browser has to reread the coding and increases the maintenance of the site. Using an external stylesheet (separate file linked to the pages with the link tag) is better all around. Reduces web page overhead, the browser keeps it in memory and it is much easier to maintain the site.

Going back to blogs, each time you add a plugin it could a) insert internal style tags or b) add a link to it’s specific external stylesheet. Something to consider when you have more important stuff to be on the page like content.

Heading Tags

Each page needs a heading (just like you expect a chapter in a book to have). For proper heading structure the first heading tag on a page should be the set of <h1> and </h1> tags. These should not be around your logo or any other image at the top of your page. This set of tags belongs around the title of the page which is within the web page. Don’t confuse this title with the title in the title set of tags, they are different.

There is a set heading hierarchy within the set of heading tags (h1 being the largest and at the top of the hierarchy and h6 being the smallest and at the bottom). Use these tags as they were meant to be used for, to create the headings within your web page to define sections of the page, and not for manipulation of the web page content’s appearance. If you don’t like the look of the h2 tag within your theme but want your headings to look like the style for the h3′s then this is fixable it in the stylesheet.

Using the heading tags out of logical order interferes with the usability, accessibility and search engine optimization of your page.

Web Page Content Formatting

All the formatting of your web page content (making it look nice) should be in your stylesheet, preferably the external one.

Some content management systems and ecommerce software provide a builtin HTML editor. This is great for those of you who don’t care to learn HTML coding but the problem is that buttons are being used that change colour/size it adds ‘inline styling’. Inline styling adds to the web page file size plus adds to the maintenance of the site in general if the particular styling you are applying is repeated throughout the site. Get you designer to add a style to the external stylesheet which you can reference within the content when you want it applied.

Web Page Construction

There are two basic ways to construct the background coding of a web page:

With tables
With CSS only (mostly)

Table Layouts

Tables take time for the browsers to render. The browser stops to assess all the table coding before sending it to the screen. Poorly constructed tables or nested tables (tables within tables to force formatting) slow the web page download speed.

The browser (and search bots) read the background coding of the page in the order it is in the page. Generally the designs that use tables for layout are not constructed so the search bots get to the content fast. e.g. If your design has a left navigation, usually the theme designer has not fixed it so the bots get to the center (or right) cell which contains the actual content of the page. The search bots have to read all the links in your navigation before getting to the meat of your page. While internal linking is a good thing, you don’t want to waste the search bot’s allotted time on your site reading links each time it comes to the site.

CSS Layouts

CSS layouts are a bit difficult for some people to get their head wrapped around but these make it so much easier to maintain a site. All the layout and formatting is manipulated through one file, the external stylesheet.

With CSS layouts (if the designer is good) you can construct the background coding in anyway you want between the opening <body> and closing </body> tags thus manipulating in what order the search bots see your web page content.