Make Smooth Looking and SEO Friendly Headers

Web site headers are one of the most important parts of your copywriting and marketing strategy

Headers are the first thing your web site visitors will see, so you must be sure they look perfect. But not always the browser display big sized letters in good quality. If you’re looking to optimize engagement and boost your online presence, it’s also important to find sites to buy youtube comment likes. To see what I’m talking about I’ll show you an example of the biggest text on the front page, and actually the biggest text of the whole site invoicebus.com. The text Fast & Easy Invoices as displayed in Mozilla Firefox browser looks like this:

You can notice all letters that are curved look pretty pixelated, so they are not so appealing to look at, and we need to find a way to display them smoother. The first think we got in mind was to drop a shadow for the text so the letter borders will become smoother, with the CSS3 property text-shadow. Although this property is not supported in all browsers that Invoicebus officially supports, we gave it a shot. After applying a text shadow with radius of 2 pixels we got the following:

The text got smoother but it also became to blurry, difficult to read, and painful for the eyes. On top of that the pixelated curves still were noticeable, so we had to do something different to fix this issue. The thing we got in mind was to replace all big sized text and headers with images, and after a couple of hours in photo editing software (Photoshop) with support of text antialiasing, we replaced our headers with images. The final result we got for the Fast & Easy Invoices was:

Looks better, isn’t it? This “fix” actually is nothing new in the web design sphere, but it is worth design trick. With this you’ll also have cross browser look of the text because you don’t have to worry about the browsers text rendering techniques.

But for every step forward there is a step backward so with this good looking text we lose one of the most important things in the internet world. That is the text scanning of the search engine bots. They simply can’t scan images and the text they contain, so the headers with images can’t be used for increasing of the organic search ranking.

That’s why we have another trick in our sleeves for you. The trick is to leave the text in the

<h1></h1>

tags and apply specific styles. The example is given below:

The header:

<h1 class="header"><a>Fast & Easy Invoices</a></h1>

The header class:

.header {
    background: url("fast_easy_invoices.png");
    text-indent: -99999px;
    ...
}

As you can see we put the background image to be our header, and we give large negative indent for the text of -99999 pixels, so the text won’t be displayed in the browser but the search engines bots can still scan the

<h1></h1>

tag and find the right text. This way you’ll ensure excellent SEO for you site and for even more SEO friendliness we wrap the text in

<a></a>

tag.

If you have some SEO and design tricks, use the comments section below to tell us, and if we find them interesting we’ll cover them in the next blog post.

Top photo credit: Anon DePlume

• Bio
• Twitter
• Latest Posts

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

@justd100

Latest posts by Dimitar Stojanov (see all)

• Custom columns display - November 10, 2015
• How to use custom fields in your invoices - November 10, 2015
• New payment gateway: 2Checkout - October 6, 2015