Our Moon

Our Creativity,
        Our Ingenuity,
                Our Hearts — Open to You

blog

Search Engine Optimized Headers

by Stephen in Best Practices | 16 Comments – Tags: , ,

It’s important as you’re working on a website to take into consideration Search Engine Optimization (frequently referred to as SEO). This is commonly misunderstood as a form of marketing. At its core, however, SEO is nothing more than taking steps to ensure that a search engine can read and -more importantly- understand your website. Here’s a brief walk-through on how to best format your page headers to ensure maximum visibility in search engines!


What HTML Means To Search Engines
One of the ways to ensure that a search engine can understand your website is to have proper HTML usage. There is more to HTML tags than formatting: they define what their content means. To that end, you should make it a habit to use each tag as it was intended to be used. For example, paragraphs should represent paragraphs of text, lists should represent any series of information, headers should be used for page headings, etc.

You can create pretty much any aesthetic with some combination of HTML and CSS. To a visitor your site will appear as you intended, but to a search engine it will look like the image below.

Our Homepage As It Appears To A Search Engine
How www.binaryd.com appears to a search engine

Even though we make extensive use of both text headings and image headings you will notice that the site still makes sense when seen through the eyes of the search engine. I’ll step you through how to do the same on your own homepage.

Getting Started
To start with you should make sure to use not only the classic <h1> tag but also the <h2> through <h6> tags as needed. At the very least, every page should have one and only one <h1> tag. This tells the search engine what is most important on the page. Subsequent headings should use <h2> through <h6> in an order that makes sense. This of course poses the first problem — by default, web browsers apply their own styling to tags which can lead to some strange and inconsistent results.

Example 1 — Default Browser Rendering
Default Browser Rendering

Fixing The Defaults
Obviously we don’t want those default styles getting in the way of our own styles so we’ll need to make use of a CSS Reset. Here’s an example of one that resets just the headers.

/* Example Header Reset */
h1, h2, h3, h4, h5, h6
{
	font-size: 12pt;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

We have set the default size of all header tags to 12pt with a normal weight. We have also removed the default margins and padding to header tags so that they are not spaced any differently. This gives us a much more consistent rendering.

Example 2 — CSS Reset Implemented
CSS Reset Implemented

You can now get fancy with your styling knowing that it is going to be applied consistently. You could skip using a reset altogether and just style the headers themselves but you run a few risks in doing so. First there is the risk of overriding the same properties over and over again making your stylesheet larger than it needs to be. This isn’t a huge deal with modern broadband connections but it still is a needless waste.

/* Repeated Styling */
h1
{
	font-size: 16pt;
	margin: 0;
	padding: 0;
}

h2
{
	font-size: 14pt;
	margin: 0;
	padding: 0;
}

More importantly there is the chance that you will miss a property when applying your own style. This could lead to headaches during testing as you try to track down the error in your CSS when it is actually the browser applying a default style. Worse, you might not notice the error during development and only learn of it after deployment – when fixing errors is significantly more costly.

Going Further
Basic text styling is all right in some instances but often designs call for much more complex graphical headings. When SEO is a concern, though, these are a bit trickier to implement. Say for example our design made use of a complex font that is not part of the standard web library of fonts. Complex text replacement is possible but the simplest solution is to use graphics instead. Like most things, though, there is a right way and a wrong way to do it – and just sticking in an image inside an <h1> tag is not the right way.

Don’t Do This

<h1>
	<img src="example.jpg" alt="Out of this world web design!" />
</h1>

Even though this will render correctly to both the user and our text-browser, semantically it is wrong. Why? Think about what each tag represents. <h1> represents a heading and tells the html interpreter that what’s inside is that heading. This should be text so that it can be indexed, but in this case it is an image which cannot be understood in any meaningful way. Even though the alt text has been set to what we want it will not be understood as such. What we need to do is have the text inside the header but have it appear to the user with the graphical element instead. The way to do this is to use backgrounds and text-indent.

The Right Way

/* Proper Heading Styling */
h1
{
	background: url("example.jpg") no-repeat;
	height: 46px;
	width: 454px;
	text-indent: -5000px;
}
<h1>Out of this world web design!</h1>

The background has been set to the graphical element we want our visitors to see. Obviously it would be disconcerting if that background tiled so we specify that it should not repeat. The dimensions of our graphical heading certainly do not match the default dimensions of the header so we set them. The final key is the large negative text-indent. We don’t want the text to not exist inside the heading, since that would violate our SEO goal. However, we don’t want the text to actually appear to our users since we have the graphical heading. The solution is to simply move the text off the screen where no one can see it. The final result is both attractive and a proper SEO graphical heading.

The Final Result
An SEO graphical heading done correctly

Riding A Fine Line
These techniques start to run dangerously close to violating some acceptable practice policies with the major search engines. Hiding text from the user in most cases is a poor practice and has been known to get websites removed from search engines — the exact opposite of what our SEO efforts are striving for! In particular Google’s Webmaster Guidelines make it clear that used inappropriately these techniques will cause more trouble than they’re worth. In this case though we are not hiding content on the site that is not normally visible to the user anyway. We’re skating close to the line but since we’re not crossing it there shouldn’t be any trouble.

In summary, you should make use of all of the tags in the HTML spec as closely as possible in the way that they were intended. When a third party attempts to interpret what you have done, how close you have stuck to that specification is the only clue to what part of your page is the title and which are actual content. Feel free to use graphics in headers so long as you optimize them for SEO! If you have any questions or remarks go ahead and leave us a comment below!

Comments

  1. Hi there,

    I looked over your blog and it looks really good. Do you ever do link exchanges on your blog roll? If you do, I’d like to exchange links with you.

    Let me know if you’re interested.

    Thanks..

  2. I found this article useful in a paper I am writing at university. Hopefully, I get an A+ now!

    Thanks

    Bernice Franklin

    [url=http://www.uggworld.eu]UGG Boots[/url]
    [url=http://www.uggworld.eu/ugg-boats-2010-collaboration-with-jimmy-choo-a-1.html]UGG Boats[/url]
    [url=http://www.uggworld.eu/bags-c-22.html]UGG Purses[/url]

  3. Wir sind einer der UGG Boots Günstig online shop.now Rabatt UGG Boots Günstig wird in unserem shop.if verkaufte Sie interessiert, Sie sind können Sie auf unserer Website für weitere Informationen.

  4. abubyEmbob [url=http://blackpenguin.net]free online games[/url], Injult [url=http://blackpenguin.net]free games online[/url], Nadeosy [url=http://blackpenguin.net]tetris online game[/url], Equals [url=http://blackpenguin.net]hidden object games online[/url], HefSeerm [url=http://blackpenguin.net]play online games[/url], midlyaliny [url=http://blackpenguin.net]play games online[/url], Hiegisgupe [url=http://blackpenguin.net]fun online games[/url], bumlousy [url=http://blackpenguin.net]online multiplayer games[/url], Roavajed [url=http://blackpenguin.net]online flash games[/url], Evisam [url=http://blackpenguin.net]best online games[/url], Unmaky [url=http://blackpenguin.net]pokemon online games[/url], Arrabsbuts [url=http://blackpenguin.net]mario games online[/url], Criffrup [url=http://blackpenguin.net]online rpg games[/url], eldeks [url=http://blackpenguin.net]online strategy games[/url], Plosypony [url=http://blackpenguin.net]online racing games[/url], nomlayela [url=http://blackpenguin.net]bakugan online game[/url], Shoolveli [url=http://blackpenguin.net]online games for girls[/url], unsobe [url=http://blackpenguin.net]online shooting games[/url], weimels [url=http://blackpenguin.net]sonic games online[/url], Bibreds [url=http://blackpenguin.net]online puzzle games[/url], Errofssix [url=http://blackpenguin.net]online football games[/url], Fluick [url=http://blackpenguin.net]ben 10 online games[/url], Taubwagma [url=http://blackpenguin.net]spiderman online games[/url], Appania [url=http://blackpenguin.net]online car games[/url], hofeAssex [url=http://blackpenguin.net]2 player online games[/url], offiret [url=http://blackpenguin.net]pacman online game[/url], Sailiply [url=http://blackpenguin.net]mmorpg online games[/url], illenitom [url=http://blackpenguin.net]online war games[/url], Sciesy [url=http://blackpenguin.net]online adventure games[/url], Spatty [url=http://blackpenguin.net]online word games[/url], eldectemn [url=http://blackpenguin.net]online card games[/url], eldectemn [url=http://blackpenguin.net]naruto online games[/url], tausty [url=http://blackpenguin.net]kids online games[/url], werbice [url=http://blackpenguin.net]3d online games[/url], Elongory [url=http://blackpenguin.net]online simulation games[/url], LikeVigemi [url=http://blackpenguin.net]online arcade games[/url], audiffugh [url=http://blackpenguin.net]top online games[/url], SiltFlifs [url=http://blackpenguin.net]online chess game[/url], erroppypab [url=http://blackpenguin.net]online pool games[/url], peliSlable [url=http://blackpenguin.net]online basketball games[/url], Douppy [url=http://blackpenguin.net]new online games[/url], bodsema [url=http://blackpenguin.net]cool online games[/url], gawaykenna [url=http://blackpenguin.net]star wars online games[/url], Meterard [url=http://blackpenguin.net]online golf games[/url], unsense [url=http://blackpenguin.net]online math games[/url], FERFISTURF [url=http://blackpenguin.net]two player online games[/url], Urbarfwah [url=http://blackpenguin.net]frogger online game[/url], satulp [url=http://blackpenguin.net]online fighting games[/url], bymnJeni [url=http://blackpenguin.net]online baseball games[/url], feavasse [url=http://blackpenguin.net]funny online games[/url], LakeAppope [url=http://blackpenguin.net]the game of life online[/url], onErnich [url=http://blackpenguin.net]online board games[/url], optiday [url=http://blackpenguin.net]top 10 online games[/url], dubpoep [url=http://blackpenguin.net]transformers online games[/url], anerype [url=http://blackpenguin.net]online tennis game[/url], moimaemefs [url=http://blackpenguin.net]download online games[/url], Immixels [url=http://blackpenguin.net]best online game ever[/url], Ovatry [url=http://blackpenguin.net]virtual online games[/url], Epheripew [url=http://blackpenguin.net]online sports games[/url], BardJard [url=http://blackpenguin.net]online hunting games[/url], Insipsy [url=http://blackpenguin.net]online horse games[/url], Bledly [url=http://blackpenguin.net]online driving games[/url], impece [url=http://blackpenguin.net]online action games[/url], Queuelalat [url=http://blackpenguin.net]online fishing games[/url], flitigo [url=http://blackpenguin.net]good online games[/url], StesstamI [url=http://blackpenguin.net]online game websites[/url], Breaslerm [url=http://blackpenguin.net]online sim games[/url], seabown [url=http://blackpenguin.net]online bowling games[/url], Buxurnesse [url=http://blackpenguin.net]online computer games[/url], Incomsnoms [url=http://blackpenguin.net]online pc games[/url], Deefenodes [url=http://blackpenguin.net]online games for boys[/url], gavarase [url=http://blackpenguin.net]all online games[/url], EnersNes [url=http://blackpenguin.net]online multiplayer games no download[/url], Eximbmoib [url=http://blackpenguin.net]online farming games[/url], fielioppek [url=http://blackpenguin.net]massive multiplayer online games[/url], FRAUSSYSUB [url=http://blackpenguin.net]online rpg games no downloads[/url], prooda [url=http://blackpenguin.net]online real games[/url], AdaleBleli [url=http://blackpenguin.net]shockwave online games[/url], EtheNd [url=http://blackpenguin.net]fun games to play online[/url], Elusly [url=http://blackpenguin.net]online space games[/url], SeedeGrema [url=http://blackpenguin.net]online fantasy games[/url], Itanipilla [url=http://blackpenguin.net]real arcade online games[/url], Alkant [url=http://blackpenguin.net]play arcade games online[/url], Doopynub [url=http://blackpenguin.net]massive online games[/url], Spusyrar [url=http://blackpenguin.net]popular online games[/url], assenly [url=http://blackpenguin.net]best online multiplayer games[/url], nesoth [url=http://blackpenguin.net]awesome online games[/url], vixtums [url=http://blackpenguin.net]online interactive games[/url], speterarot [url=http://blackpenguin.net]online games no download[/url], Sobacerb [url=http://blackpenguin.net]fun online multiplayer games[/url], abohotoRet [url=http://blackpenguin.net]google online games[/url], Sepvuntee [url=http://blackpenguin.net]online web games[/url], Emogma [url=http://blackpenguin.net]fun online games for kids[/url], suifymics [url=http://blackpenguin.net]play online multiplayer games[/url], Outsoub [url=http://blackpenguin.net]online internet games[/url], inconse [url=http://blackpenguin.net]3d online multiplayer games[/url], fulkseette [url=http://blackpenguin.net]unblocked online games[/url], Emuttog [url=http://blackpenguin.net]best online games in the world[/url], appapossE [url=http://blackpenguin.net]online quest games[/url], BootBese [url=http://blackpenguin.net]play online games now[/url]

  5. thank you for your post ,it is so benefit to learn from it ,will come back

  6. If you are going for best contents like myself, just pay
    a quick visit this web site everyday for the reason that it
    offers feature contents, thanks

  7. I love the precious facts you actually offer on your articles. We’ll take note of your current web site plus check out yet again in this article generally. I am modestly sure I will be up to date plenty of brand-new products proper listed here! All the best ! for one more!

  8. I all the time used to study paragraph in news papers but now
    as I am a user of net so from now I am using net for articles
    or reviews, thanks to web.

  9. Hello, i think that i saw you visited my website so i
    came to “return the favor”.I am attempting
    to find things to enhance my site!I suppose its ok to use a few of your ideas!!

  10. the Kooper is not as characteristic-packed as a regular-sized stroller but it beats typical-sized
    strollers ‘hands down’ when it comes to weight, maneuverability and compactness.
    A few of the best stand locations are effectively off access roads, near huge lakes
    or exactly where multiple ponds and lakes form a labyrinth of timber between them that deer should navigate during their daily travels.
    This will help you get acquainted with what turkeys sound like.

  11. vizag beach photos
    http://www.hivizag.com/

  12. The competition is tough for several companies of
    course, if you want to become a achievement and earn money, then you definitely need an edge.
    They’ve application-products that contain a
    wide range of gadgets, symbols, behaviour aspects, adjustments,
    and the rest you have to create an app of your personal.

  13. The competition is tough for several companies of
    course, if you want to become a achievement and earn money, then you definitely need an edge.


RSS feed for comments on this post. TrackBack URL

Leave a comment

 

write us a message




As much as we enjoy imaginary friends, we must insist that the name, email and message fields be filled. Thanks!

are you ready to blast off?

Wouldn't you love to have your own out of this world website? Use the form on the right or call or email us today!


We're conveniently located in the Redlands area of Southern California.


drop us a line at 909.844.7006
or write us at contact@binaryd.com