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 - ,

The next thing we want to talk about here is how to use the text editor to style content for our business/professional Genesis theme website. There’s a couple of reasons why we are styling this content and one of the reasons is to make the content more readable for a person visiting our site.

Google Search Engine Optimization Starter Guide

The other reason we’re styling the content is to make the text more indexable by Google or to help Google understand the content of the article. We’re going to start off with the Search Engine Optimization Starter Guide.

If we come over here in the Lesson 9 Resources, you’ll see this download link, you’ve seen it before in this class, but there’s a download link for the Search Engine Optimization Starter Guide. In this guide, they have this section called optimizing content and that’s what we’re going to be talking about tonight, this third section on Optimizing Content.

Optimizing Content for Readers and Search Engines

Optimizing the content on your Genesis theme site for Google will have a way of making your content more easily read by your users as well. We’re going to start off here with this section, Optimizing Your Content which is right here, “Offer quality content and services”. This starts off really with writing easy-to-read text and staying organized around a single topic.

This is something I’ve found that new people have difficulty with and that is that each page should be about a single topic unless it’s an index page that directs people to other places on your site. Each page should really have a single topic and you want to organize your content around that.

We’re starting off by talking about this from the context of Search Engine Optimization. It’s important that you create your content primarily for users and not for Google. There’s a whole industry out there around creating content that attracts search results and that content is created exclusively for the purpose of tracking search results.

Because the process of creating real content is time consuming, people have tried to trick Google by essentially creating fake content or creating content of marginal value in order to draw search traffic to the site in order to promote advertising.

Google is on the hunt for content that was not created primarily for users but that was created primarily to attract Google. You’re going to be ahead of the game as Google finds ways to crack down on those sites, if you just keep that in mind.

Just remember that your content is not for Google, your content is primarily for your users. Keep it organized around the single topic, make sure your content is primarily for your users and use your heading tags appropriately.

Use Heading Tags Appropriately

HTML has 6 heading tags, marked H1 through H6. You may have seen this in your word processor as well because it does come originally from word processing and was adopted to HTML quickly.

Those H tags are very easily accessed from inside of your text editor, under the section which says paragraph. This actually gives you a dropdown for a couple of primary text types like paragraph, Address then Preformatted and gives you access to all 6 headings, heading 1,2,3,4,5 and 6.

If you go into a section here and click in the middle of one of these pieces of text, come down and select heading, it’ll automatically make the entire line of text a heading. So we just made this a Heading2, made this a Heading 3 and so on.

The way you use H1 through H6 is to represent the structure of your content. When you’re doing that, you really need to imagine that you are writing an outline, that’s actually the way I write. I start off with the outline of my main subjects.

When I have my main points outlined, I go back into those main points and I drop in subpoints and sub-subpoints then I write once I have that outline done. If you don’t write that way when you’re laying your site out, you need to at least imagine you’re writing an outline so that you can use your heading tags represent the structure of that outline.

In terms of H1 tags, they should only be used once and that is on the title of your page. As it turns out, Genesis automatically makes your page title an H1 so you won’t actually ever use an H1 on your page unless for some reason or another, you’ve suppressed the page title and you want to insert it in some other location but that’s really a specialized situation.

Generally speaking, you’re not going to use H1 because your page title is automatically added as H1. The first level of headings you’re going to use is H2 and those should be the primary structure of your content. Inside that primary structure you’ll have sub headings which would be H3 tags and inside of that you may have H4 tags or sub-subheadings and you can imagine that continues all the way through to H6.

As a practical matter, I really don’t use anything less than H4 but from a theoretical standpoint, that’s how H5 and H6 get used as they continue to be sub outline bullets of parent H4s or parent H3s. Anyway, you should only use H1 once and  it’s used automatically for you so you won’t actually use it at all.

H2 is for the big structural elements of your content, H3 is for the subheadings inside and H4 is for the sub-subheadings and so on. That makes your content easy for somebody to scan. It makes it really easy for somebody to look at the page, look at the main headings and be able to anticipate what the page is about.

Google does exactly the same thing with those heading tags and that’s why Google looks for those tags for structure of the page because it assumes the structure of the page, tells the story of the page or tells what the page is about and it’s why Google pays attention to those things.

Emphasize Key Points

Google also pays attention to other things and those are bold text, italicized text and text links. The purpose for using those is to emphasize key points. You’re not going to bold everything, you’re not going to bold the whole sentence, you’re not going to italicize everything or use text links for everything.

What you’re going to do is use these things to emphasize something specific inside the body of text that needs to be emphasized. Both your reader and Google will use that for understanding what the page is about. That’s the SEO end and I guess we’ve blended this in with the markup for readability.

Markup for Readability

When you’re looking at your text, the place to start from is understanding that people don’t read a web page, they scan a web page. They may read blocks of text inside of that but they’re only going to read blocks of text inside of it if they’ve found something by scanning for it. If you pay attention to how you behave, that’s exactly what you do, that’s what everybody does.

You’re scanning to find relevant or important content, that’s what we mean by markup for readability. That is you’re not writing prose the same way you would write a business letter or the same way you would write a report. What you’re doing is writing for the web and you’re keeping in mind that web readers scan so you use your headings to present the content structure.

If you’ve got a bunch of points to make inside of a paragraph, you might consider using bullet points or lists instead of paragraph text so that somebody can scan through that list rather than reading a block of text. Of course you’re using bold and italics to emphasize that key text inside of either a paragraph or inside of a list.

Adding Links to Text

Another critical part of emphasizing text and of telling Google what pages are about are links. This may seem simple but a link is a link to either another place in the page for the convenience of the reader or it is to other important content outside of the page.

What Makes Good Link Text?

From our standpoint, we primarily care about internal links that is links from one of our Genesis theme pages to another one of our pages to another one of our pages. This is also an important part of Search Engine Optimization.

If we come over and take a look at this Search Engine Optimization Starter Guide again, they have this whole section on how to choose link text and essentially, the question is, what makes good link text? The answer is that good link text tells users and Google something about the page that is being linked to.

It should be a nice short descriptive text and this is especially important for internal links because at this point, an internal link doesn’t really tell Google what the current page is about, it tells Google what the page being linked to is about.

That helps you explain to Google what the page is about even if Google is not on that page. It looks to the link text, it follows that link, if that link text is nice and descriptive of the page then it takes that into consideration when it is indexing the content on that page.

I should show you good example of link text. Let’s take a look at this finished site, this isn’t a good example of link text. This link text is helpful to the reader because it helps them understand where they’re going if they click on the link but it’s not a good link text from an SEO standpoint because “Learn More About this Project” does not actually tell Google what that project page is about.

It tells the reader something about where they’re going but it doesn’t tell Google anything about the page so the better link text for that might have been, “Learn More About this Custom Design West Seattle View Home”. Link text like this doesn’t provide any real SEO benefit.

You may want to weigh the SEO benefit of link text against the convenience benefit but had I been thinking about this when I was creating this project, I would’ve said, not “Learn More About this Project” but “Learn More About this View Home that I Designed” so that there was a more descriptive keyword-rich content inside the link.

Rules to Live By

When we are styling our Genesis theme website content for readability and for SEO, there’s a set of rules here.

Never Use Headings for Styling

The first rule is, never use headings for styling. There is a member of my site that I just cannot convince, this is really written for her. I know she’s never going to watch this but it doesn’t really matter but this is really written for her because she always uses heading for styling.

If she wants text to be big, she puts it in the heading. If she wants text to be big and red, she uses inline styles, she shouts all of the content, everything is capitalized, lots of exclamation points, everything is bold, everything is big chunks of text, may be bold, bright red, capitalized, italicized and a heading.

Don’t Shout Everything in the Content

Clearly, what she’s trying to do is convey that what she’s saying is important but obviously if you shout all the time, your shouting is meaningless. You want to emphasize important stuff but don’t emphasize everything. If you think everything you have to say is important enough that it should be shouted, you probably want to reconsider the content that you have. Anyway, don’t shout.

Minimize Inline Styles

I have this rule to live by and that is to minimize inline styles but I should show you what I mean by that. I don’t really show you much about inline styles because I don’t think you should use them but an example of an inline style here is for example this phrase, “main living spaces”, let’s say that’s a particularly important phrase. If you’ve highlighted that, you could select that as bold, so there’s bold in your text, that’s adding some importance to it.

You could also say, “better opportunity” is an important text so you could italicized that. However, there are bunch of other things you can do with text too like you can come along here and take this block of text and say center it. That’s an inline style that I think you want to minimize.

Maybe the a worse version of that is to come along and say, I want this text to be green. If we update this and view the page, there’s our green text, here’s our centered text, here’s our bold text and our italicized text, all that was done this way.

It can very well be that for the style of the site, “main living spaces” always wants to bold, “better opportunity” always want to be italicized. From my perspective, the one exception to this rule about the use of inline styles is for a bolding and italicizing text. However, the day you decide to change the style of your site to a completely different color scheme, that’s the day that lots of this kind of inline styling becomes problematic.

I have a client who went through her site and changed all of the colors of her headings by using an inline color picker so she came along her H2 tags and she made them let’s say, blue. When she changed the color scheme, what she had to do is go to all of her pages and all of her posts which at that point were hundreds and she had to make this change because blue just didn’t look good.

What you’re better off doing if you need to make changes like this is living with the way your theme does it or learning how to do CSS so that you can make those kinds of changes yourself on a blanket basis rather than on a line by line basis.  That’s what I mean by minimizing inline styles.

You can get yourself back to normal formatting by using this “Remove Formatting” button. That got rid of the formatting for the color but left the heading. You can also just go back to paragraph style text using that. Inline styles can be useful but a good rule is to minimize it.

They can be useful but you should minimize it and if you find that there are lots of instances where you want to do something like change the color of a text or center text, you should be prepared to learn CSS so that you can do that using CSS. That way, it’s very easy for you to change when your color scheme changes.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment