Headline Formatting In Blogs

 

When most people write content, they think about how that content looks in their WYSIWYG editor, and probably in their preview of page contents.
I am sure after publishing, they take a look at their published version of the content.

Here is how an H2 Headline looks on this blog currently, without any additional special CSS that you would expect for special things like post titles.

H2 Headline on AndyBeard

This is how an H3 Headline currently looks on this blog

H3 Headline on AndyBeard

There is a slight difference but very small.

However I have made a tough decision today

Stop Using H2 For Subheadlines Within Posts

At least only use them for very short headlines for a specific emphasis.

Why H2 Headlines are Bad

A huge and growing proportion of blog readers are subscribers, and their first impression of each piece of your content is within their feed reader.

How your content is displayed is in the hands of the feedreader developers.

First of all I should note that this does not affect post titles. They are universally handled in a different way.

Here is what I saw today that helped me

Here is what H2 titles can look like in the Feedburner management screen

H2 Headline on Feedburner

Here is what H3 titles can look like in the Feedburner management screen

H3 Headline on Feedburner

Now it should be noted that view of my RSS feed is never seen by the public. However I have seen many sites that use H2 headings that large.

Feed Readers

Let’s take a look at how this looks in Google reader

H2 Headlines in Google Reader

H2 Headline on Google Reader

H3 Headlines in Google Reader

H3 Headline on Google Reader

H2 Headlines in Pageflakes

H2 Headline on Pageflakes

H3 Headlines in Pageflakes

H3 Headline on Pageflakes

Pageflakes handle H2 by adding a page wide underscore and additional space under the headline rather than a massive increase in display size compared to H3.

Lets take a look at H2 in Bloglines

H2 Headline on Bloglines

Here is Bloglines H3 Headline

H3 Headline on Bloglines

It should be noted that Bloglines alternates backgrounds for the posts.

Bloglines differentiates H2 and H3 using colour more than size, though H2 is slightly larger. It should also be noted that H3 in Bloglines looks exactly the same as a post title.

A reader of Bloglines would typically focus on post headlines more than content headlines, thus it is my opinion it is better to have subheadings that look like post titles.

Want to be sneaky? I haven’t tested this but if you make every subheading a clickable link back to your original post you might have more click-troughs. To achieve this you would have to work out your post URL in advance. Hmm, another idea for my plugin list.

Email

Lots of people subscribe to blogs by email. In fact on many blogs this may be as many as 50% of subscribers, so it is important how your blog is presented.

Lets take a look at Gmail (after being sent by Feedburner)

This is a H2 heading

H2 Headline on Gmail

This is a h3 headline

H3 Headline on Gmail

Feedburner in their email preferences does give you specific control of post headlines and body text. They do not give you control of other elements such as heading tags.

My feeling is that with a basic H2 tag in gmail, a long sub-headline is going to look very messy.

Retro fixed formatting?

It would be possible to use fixed font sizes for all your content, but in my opinion that is a backwards step.

Conclusion

It is important to think about how your content will look where your reader will read it.

It is my belief that H2 is more likely to be defined with an excessively large font than H3 if your content is picked up for syndication on another site.

Current feed reader CSS settings are such that unless you apply a custom CSS modification to your browser for a particular site, H2 could be ugly.
In the case of Bloglines, there could be an advantage using H3 hyperlinks for all your subheadings, if you could work out post URLs before you publish.

Things like heading sizes in the content you read are subjective, but based on my own research as above, I am going to switch to using H3 headlines for most of my blog content.

 

Liked this post? Follow this blog to get more. Follow

Comments

  1. says

    Isn’t H3 for headers within posts logical for the following reason:

    a typical blog layout will have:
    - H1 for the Blog title
    - H2 for the post titles
    - (and thus) H3 for headings within blog posts

  2. Andy Beard says

    There isn’t any fixed rule for it

    Many SEOs would argue that you should have post titles as H1 as the blog title might not be relevant for SEO purposes.

    Or in your header you might use H1 then H2

    And then in the post H1 H2, or H2 H3

    On your blog you can control the look separately for each section of the page.

    Unfortunately that is a lot harder to do in your RSS feed.

  3. says

    It may not be logical for SEO purposes, but it is logical for semantic purposes. Heading tags should be looked at as a type of table of contents.

    See HTML 4.0.1 Headings and Heading Elements.

    H1 being your main, or overall topic (hence the title)
    H2 being a main topic within the main topic (hence the blog post title)
    H3 being a topic under the secondary topic (hence, used within the blog posts)

    Personally, I’ve found that semantically constructed blogs do better in the search engines than those who use multiple H2 tags solely for SEO purposes.

    Headings should be used to build a structure. Of course, this is still open to debate (and it has been debated a lot).

    My personal rule of thumb is to look at the individual blog entry and develop a basic table of contents for it. That table of contents then becomes my heading structure for it.

    ~ Teli

  4. says

    A lot of theme designs are semantically well constructed.

    Among those are your Optiniche themes which I use frequently, and this one I am using on this blog.

    It is semantically correct to have post titles H1, and subheadings H2, if you use a graphics header.

    For some niche sites I have modified the markup for SEO experimentation, for others I haven’t.

    I don’t need H1 for my blog title here. It doesn’t contain any keyword I have difficulty in gaining top rankings for ;)
    In fact it is not even the full keyword currently “ndy Beard”

    But the whole context of this post is I wasn’t thinking about how content was appearing in RSS readers.

    There are lots of bloggers or template designers who do very weird and illogical things with markup.

    Take for example Darren Rouse’s Problogger.net

    I can’t for any logical reason work out why the theme designer used H1 in that way.

    The temptation is to use markup in a way that the existing CSS makes what you create look good on your site, without thinking about how it looks in RSS.
    Sometimes the better option is to change the CSS rather than the markup, but that is not a WYSIWYG option.

  5. says

    I’m with the H1 blogname, H2 post title, H3 subtitle crowd.

    You’re right, graphic blogname, H1 post title, H2 subtitle could also be considered semantic HTML.

    Let’s check with W3C..
    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    http://www.w3.org/TR/html401/struct/global.html#h-7.5.5 :

    A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

    There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    http://www.w3.org/QA/Tips/Use_h1_for_Title :

    <h1> is the HTML element for the first-level heading of a document:

    * If the document is basically stand-alone, for example Things to See and Do in Geneva, the top-level heading is probably the same as the title.
    * If it is part of a collection, for example a section on Dogs in a collection of pages about pets, then the top level heading should assume a certain amount of context; just write <h1>Dogs</h1> while the title should work in any context: Dogs – Your Guide to Pets.

    Unlike the title, this element can include links, emphasis and other HTML phrase elements.

    The default font size for <h1> in some browsers have, unfortunately, motivated many writers and tools to use an <h2> element in stead. This is misleading to tools that take advantage of heading structure of pages, such as Amaya’s table of contents view. Consider using Cascading Style Sheets, which are designed to express the author’s preferred font sizes corresponding to elements such as <h1> and <h2>

    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

    After reading that I’m still not sure :)

    Cheers,
    Al.

  6. says

    It is semantically correct to have post titles H1, and subheadings H2, if you use a graphics header.

    Depends on how you use the graphic, but yes, it is still semantically correct. It’s important that you provide adequate alt text and an even better solution would be using some sort of image replacement.

    I see your point where it concerns blogs that don’t have keywords in the title, however, that doesn’t absolve the blog from using a heading structure on the site.

    What I’m trying to get at is there should only be one H1 heading on any page. It’s the most important heading and the one that encompasses all others. Deciding to use an H1 tag for post titles simply because the title of the blog doesn’t contain keywords won’t cut it.

    Of course, this is my personal view and there’s no definitive documentation. But, it appears to be the accepted norm, especially for accessibility.

    ~ Teli

    P.S. Thanks for the compliments on the templates. :)

  7. says

    And another note, I completely agree about the ProBlogger set up. That coding – especially the use of the H1 tag – is brutal. It serves no purpose, not even SEO, and it was even styled with the CSS which indicates that it wasn’t an accident or a momentary lapse in judgment…

    Frankly, the date should have been wrapped in a paragraph tag, the blog’s title should be in a heading level one and each of Darren’s post titles should be in heading level 2. Again, just my opinion. ;)

    ~ Teli

  8. says

    That’s an interesting article and worth knowing.

    However, I don’t think you should use heading tags incorrectly just to accommodate weaknesses in current RSS feeders.

    Also, I don’t think on a pragmatic basis that RSS readers are enough of an issue to ditch the correct sue of headings. The benefits for SEO and accessibility of using semantic HTML (as as semantic as you can manage) far outweigh this downside.

  9. says

    Of course H3 looks better than H2 tags, its visible or more clear than H2 tags, anyway its a good conversation between H2 and H3 tags…Thanks for this blog got a clear idea about the difference in heading tags…

Trackbacks