Kathy Smith
Sr. Website Designer

Behind the Scenes, Part II: How to Make Your Website Search-Engine Friendly

This is the second in a series of blogs about HTML for the layperson. You can read the first blog here.

It is good for you, the layperson, to understand what is going on in your web pages and see if your needs are being met. Even if you don’t have the budget to hire a professional design firm and you are using website building tools yourself, it’s valuable to know a little bit of HTML.

If you look at the source code for a typical website page, it includes two main sections. (To see your website’s source code, right-click on the page you are on and click on “View source” or similar language.) First is the “head” section, which is generally not visible on your website itself. The “head” section is where a bunch of gunk like definitions for webpage styles, metatags, etc., is stored.

The other main section is the “body” of the website. It contains the code for the visible portion of your website, the information displayed on your web page.

So, when you look at the code for a very very basic web page, you might see something like this:

The head section’s scope is also deliminated by “<head>” as a starting tag and “</head>” as an ending tag. And similarly, the body section’s scope begins with “<body>” and ends with “</body>.”

Typically each tag begins with the tag type wrapped in “<” and “>” and ends with the tag type (for instance “meta description” or “title” prefixed with a forward slash mark.

You can see what the actual web page this creates looks like here.

The text on the web page, “My Website’s Main Topic” and the paragraph that starts out, “Intro paragraph” are defined in the code with the h1 and p tags. The h1 tag is used to describe the main topic of your web page. The “p” tag is used to delimit paragraphs on the website. Each paragraph begins with a “<p>” and ends with a “</p>.”

H1 tags are special. On the tippy top of your site, the very first page of your website (usually index.html, the “Home” page), it behooves you to make the h1 tag describe the main purpose of your entire website. The reason for using the h1 tag is not only because it is typically formatted in a topic style, but because it helps people and search engines understand the purpose of your web pages. Search engines need something to understand what your site is all about, so this helps point them in the right direction.

Web pages should always have one (and usually only one) h1 tag in order to conform to structures. There are exceptions to this, but that is an advanced topic.

Looking at the part of the code in the head, the main two items are the “title” and “meta” tags. Notice that the meta tag does not have a bounding end tag. This is because the entire definition for the meta tag is within itself and it does not have to wrap around anything.

The title tag is very similar to the h1 tag in that it is all about topic. If you look at the web page, you’ll find the title tag usually appears way at the top left and not actually on the website.

The title tag should also be topical, succinct and appealing to readers. It frequently appears in search engines. For instance, if I google “Cleveland Jazz Orchestra” (one of the sites we developed) I see this in the Google search results:

The title tag from the home page is picked up as the title of the Google listing, shown in purple. And it shows a description, “Led by Sean Jones,” etc. This description is defined by the meta tag in the “head” section of Cleveland Jazz Orchestra’s home page.

In conclusion, it is a good idea to pay attention to your website’s title and meta description tags, as they help both people and search engines understand what you are about. The title and description tags show up in Facebook and other social media platforms when your web page is shared, too.

Kathy Smith has developed more than 200 websites – everything from n-tier enabled applications to ecommerce to your friendly brochure-style website. She is senior developer at Lakenetwork.net, a website development company in Eastlake, Ohio.

 


about lakenetwork

Lakenetwork is a family-owned business providing website design and development for companies, professionals and organizations in the Cleveland, Ohio area and beyond. We specialize in providing the most cost-effective and appropriate solutions for clients’ online needs. We are located in Eastlake, Ohio.

Get in touch...