Creating A SEO Friendly Website Logo To Boost Ranking
Using a search engine friendly Website Logo can have a positive & dramatic effect on your website ranking, which in turn will mean more visitors to your website!
You see the main problem is that most website logos are not search engine friendly, simply because the search engines do not read text within an image, in fact this is the purpose of the “alt” tag, to provide a text style explanation to the search engines, of exactly what the image is about.
Now how many of you reading this are thinking “yeah cool I’ll just put my site name in an alt tag & keep my nice flashy banner or logo..?” Ahm sorry guys this will not work, you see when a search engine starts reading a page it will start at the top left corner & is looking for a title within either a h1 or h2 tag , this is where you score some points with the search engines and as any SEO guys will tell you, your title is all important. Have you ever noticed how some very bland and basic sites, seem to be ranked extremely well, yet they appear to be using nothing more than a bog standard WordPress theme.
You know the sort of theme, the ones with the big blue header with white text in the center of the header. Whilst these types of themes are lacking in any sort of Wow factor, they are conforming to what the search engines expect and as such very many sites that appear to us to be boring, do rank exceptionally well & as a consequence will also enjoy increased traffic. In fact one of our regular readers followed our advice & doubled his daily traffic, read what he has to say about this in his comments on the review of his website.
Logo or No Logo..?
Well I am not saying do not use a logo or banner for your website or blog, but what I do suggest is that you combine both a banner or logo, with a textual title in a H1 tag, at least this way you satisfy your readers with a pleasing design & you also satisfy the search engines with a H1 title at the top of your page. After only a matter of a few weeks you will see a great improvement with your ranking & obviously also your site traffic.
Lets Look At The Code
Ok now I know there are several themes available that actually offer a choice between a site logo or a text title, but I have yet to find a theme that will combine both, therefore we are going to do this manually.
Typical Code of Header.php:
Original code above only allowing a logo image.
A quick explanation, [line 1.] sets up an ID label called “header”, then [line 2.] applies your site URL to the logo image that you use & the [line 3.] simply assigns a name / label to your image so that we can refer to it in our CSS style sheet.
Inserting the H1 title tag:
Note: The added open & close h1 tags
Now if you compare the two images above, you can see what we have added to the header.php, this will now give us a label to work with in our CSS style sheet as we have declared this h1 tag under [div class="logo"] .
Changes To Our CSS Style Sheet
Note: Original header details in our style sheet
Here we can see that the style sheet now creates a header 90px in height, then places to the far left & within that header, it then places our logo.png the size being 220px wide x 60px high with a 15px margin at the top. So by altering this style sheet code we can actually place our website title over the image but still confined within the 220px x 60px invisible box.
Inserting the H1 code in the style sheet:
Note: added .logo h1 which now deals with our h1 title text.
Simply add that bottom block of code just after the .logo block of code in your style sheet, all this additional block of code does is to style the text that will now appear over your logo and will also now be within a h1 tag which is great for search engines.
That my friends is basically it, you can play around with the measurements, the font & also the colour until you are satisfied with your new creation which is now a 100% SEO friendly website logo.
Related posts:
Posted by Steve Nickson
on Apr 10 2012. Filed under Custom Graphics.
You can follow any responses to this entry through the RSS 2.0.
You can leave a response or trackback to this entry
