Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 9 – Part 3 – Styling Content for Readability Using Headings and Lists

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Styling Content for Readability and SEO Purposes

We are going to talk about styling content for readability and for search engine optimization using headings lists and links. You may or may not realized that web text is different than the text inside of a book. Books pretty much assume that you can simply read paragraphs and paragraphs of text and that’s what you assume too because that’s what you’re accustomed to. However, paragraphs of text are actually not very easy to read and also not easy for you to just skim through.

If you pay attention to what you’re doing on web page, what you’re really doing is skimming through trying to find content that is relevant to you rather than sitting there and simply reading it. Search engines do something very similar to that.

Search engines look to the content of the page for clues as to what the page is about. The same sorts of things that we will do to make a page readable for a person are the same kinds of things that you can do to help a search engine figure out what your page is about.

Mark Up Text for Search Engine Optimization (SEO)

First off, let’s talk about the context of search engines. I’ve said I’ll talk about styling content but that is sort of a generic use of the term “styling”. The more technical term for this is “mark up”. We’re going to talk about mark up for search engine optimization and mark up for readability. Mark up simply means the use of headings, lists, different kinds of text emphasis and links. That is HTML mark up that you would use in the body of text in order to help convey the meaning.

Your first line of defense are your headings. In HTML, headings start with an h1 tag and then h2, h3 through h6. There should only be one h1 tag on a page. It is generally imagined to be the largest heading on the page. The h1 tag should be the title of the page, it should be the big summary or quick explanation of what the page is about and more than one h1 tags suggests that the pages is about more than one thing.

We essentially that did the same thing last week when we’re talking about the hierarchical structure of our site where you have a page, a main page and then you have subpages and subpages. Then you have this hierarchy of information that follows the form of an outline.

That’s the same thing you want to do with a page. You want the page to be about a single topic and then you want to use headings to announce that topic, to break that topic down into sub topics and to break those subtopics down potentially into more subtopics.

The Purpose of Headings

The purpose for headings is not to have big text but to essentially have a summary outline of the content of the page. Let’s go back to my transcript and I’m going to paste the transcript in the HTML view so it doesn’t have any formatting whatsoever.

My h1 tag is actually my page title and Thesis makes that the h1 tag. Now that I’ve gotten my h1 tag taken cared of, I need some h2 tags. So we’re breaking the content of this down and this would be an h2 tag. We use this button here for that, applying the h tag to it using essentially this format drop down.

The “Business Purpose for the Site” is also an h2 and the “Two-Phase Development” is really an h3, it’s really a subcategory of this “Business Purposes Site”. And then the “Tools” again is an h2 but “Plugins and the Thesis Theme” would be an h3 because that’s really a subcategory of this topic of the tools.

We now have a hierarchy of information where you have the main topic broken up into a couple of broad categories and the broad categories broken into smaller categories or smaller sections using these headings.

Not only does this makes it easier for somebody to read because they can see what the main subheadings and the page are about but it’ll also give you the opportunity to anchor meaning for search engine optimization. This is the way in which you do it; you would use these heading tags as essentially the outline summary of the content of the page which allows both the reader and the search engine to determine what the page is about as they scan through it. That’s the headings.

The Use of Lists

The next thing you have to look at is the potential for using lists in styling the content for readability. Lists are easier for people to scan than paragraphs on a web page. You might take this paragraph here, “We’re creating a site that’s suitable for service professionals. So in this case Architects, Engineers, Design Professionals, Business Coaches or other kinds of consultants”. You might take this and just delete the sentence here and then create a list. You create a list by selecting this just like you would in any other Word processor.

You break it up into its lists and now, you have something a little bit easier for somebody to follow. Now they’re not reading the paragraph, they can see this is a WordPress site for service professionals – Architects, Engineers, Design Professionals, Business Coaches and you’ve automatically made this a little bit easier to read simply by putting in that unordered list.

If you haven’t made it easier to read, you’ve made it easier to scan. If you look at your own behavior, I think you’ll find yourself happier being able to see something like this and reading this kind of thing rather than reading each and every word as you’re working your way down a web page.

Providing Emphasis on Key Words or Phrases Texts

Another way to style content, provide emphasis and to improve readability is to use emphasis on key text. For example here we could say, “We’re creating a site that’s suitable for service professionals”. If you bold that, someone reading along here can see, “Suitable for Service Professionals” and again they get a better sense of what it’s about and so too Google.

Google looks for emphasized words – those are words that are italicized or are bolded. It looks at emphasized words as conveying meaning. It assumes that words that are emphasized are words that are indicative of the content of the page and therefore from its perspective are keywords.

When you bold or italicized or in some other way emphasized text like this, not only do you make it easy for somebody to read because it stands out for them but it also makes it easier for Google to understand what the content is.

Creating External and Internal Links

One final thing that you can do is provide links. Generally speaking a link is a link from some text to another web page but it can also be the same page but in the case that we are talking about here we’re going to talk about going off to another link. You can have external links and you can have internal links in your web page. An external link, of course, is a link that links off to somebody else’s site.

Let’s pretend that this text is a good link text to my site. I could take this “Architects Edmonds” and then click on the insert edit link and have it linked to my Architecture site, rickandersonarchitects.com. Place “Add Link”, “Update” and refresh it. Now, we have a link that goes off to my real Architecture site. The site that I’m not actually maintaining or doing anything with anymore. That’s the link to an external site.

Something that you’re going to do for search engine optimization purposes is to link to other pages on your own site from relevant link text. Let’s just say that we have some place on the site that talks about creating a membership website. If I take this piece of text here, “create a membership website” and I link to it, one of the things I can do is link to existing content.

Your link dialog might actually look like this to start off with but you can click here, “Link to Existing Content” and then you can go through your existing content and find a page that you might want to link to.

Adding a Title to a Link

When you do that, it automatically adds a title to it and you can say, “Open in New Window” or “Tab” and “Add Link”. If we update that, what we have is link text that Google assumes means something. When you hover over it, you can see the tool tip that pops up, “Testimonials”. That’s actually the title for the link, I deliberately left one off of “Architects Edmonds” here so you can see the difference. If you don’t put a title in, there’s no tool tip when you hover over it. If you do put a title in, there is a tool tip when you hover over it.

If we come back over here and pick a block of text and we select “Link”, we could pick this page here and instead of just accepting the title of the page as the title, we could say, “Go to our Home Remodel Design Services” and “Open it up in a new tab or window”, “Save” and “Update”.

When you refresh, here’s a link to that. It takes you off to that page and it opens up in a new window. If you hover over it, it says “Go to our Home Remodel Design Services”. That’s the title attribute of a link and WordPress makes it really easy using this link function to insert that.

WordPress also makes it easy for you to change the link. All I really had to do was come in here and click inside that link and by clicking on that, I can just change the link so that it links to some place else or I can break the link. I don’t have to select the whole thing. If I select the whole word, say, “create” and break it, the rest of it still is live and I just took off the link off of “create”. However, if I just put my cursor in there and break it, it takes the entire link out.

What a Good Link Tells Google

WordPress makes it very easy for you to add these links. The purpose for having a good link text here is that it will tell Google what you think the page that’s being linked to is about. It doesn’t actually tell Google anything about this page, it tells Google about the page that you’re actually linking to so you don’t want to use real generic text when you use a link. You want to use nice, specific text because that specific text helps Google understand the content.

Styling Content for Readability – Rules to Live By

There are a couple more rules to live by here. First, never use headings for styling. If there’s some reason you want a great big piece of text to stand out, don’t use the heading for that. Use headings always as an outline of the content.

Don’t Use Headings for Styling

That’s really the only thing headings are good for and I might be tempted to say, “Well, I want this thing to stand out and be nice and big” but you don’t want to use the heading for that purpose because that just confuses what the page is actually about from a Google standpoint and you don’t want to cause Google any confusion about that. So, don’t ever use headings for styling.

The Use of Inline Styles and “Shouting” from Your Page

Another thing is to minimize in styling content is the use of inline styles. For example, let’s take the text “same structure”. I could make that text red and and by doing so we have created an inline style.

You can see it says, “<span style=color”: ff0000;” same structure</span> “, this is the inline style, a style that is applied here immediately. You want to minimize the use of inline styles because they’re difficult and painstaking to change when you decide that you no longer want those styles because they clash with a new design or other change you may make in the future on your site.

You can see that I changed it from red to black but by changing it from red to black, it didn’t get rid of the red, it just added black instead. In other words, It didn’t get rid of the style change, there’s still a style change here even though it doesn’t look like there’s one because that’s black.

It’s difficult to remove an inline style without going into the HTML view to do so. That’s one of the reasons why it’s not a good idea to apply them and also because you may make stylistic changes in many places throughout the page and you may have many, many pages.

If at some point that red color doesn’t look good with your new site design, you’ve got to go back through your site and find all those places you made it red and make it some other color. Inline styling is not a good idea which is why this has very minimal amount of inline styling available to you. My point here is to minimize the amount of inline styles you use.

Don’t “shout”. I have clients who I’ve tried to convince not to “shout” from their page because when you “shout” from your page, nobody listens. In some instances I just failed to be able to communicate that concept.

By “shouting” from the page I mean, don’t make everything bold. Don’t make everything bold and bright red, don’t make everything big headings. If you’re trying to emphasize text, just emphasize that one little piece of text. Don’t try to emphasize the whole thing.

If you’re using the megaphone throughout the entire sermon, the loud part of the sermon no longer makes an impact so use your megaphone for those few places where it’s really necessary and it’s really important. Otherwise, keep the “shouting” to a minimum.

Create Easily Scanned Text

Don’t have long blocks of uninterrupted text. This is not practically easy to read and even though the paragraphs are relatively short, it’s still better breaking up your paragraphs into small paragraphs and subheadings and bulleted lists and reducing the amount of word for word reading people need to do in order to understand the content of your site. That’s pretty much everything I have to say about adding text to the site.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment