cnet w3school filehippo wikipedia yahoo google google google google google google google google google google WELCOME. Thanks for visiting our site. Comment an advise for the development of the site
Related Posts Plugin for WordPress, Blogger...

basic seo technique for blogs and website

Leave a Comment

These days, there is much discussion of how blog content can be optimized for search engines in order to receive better rankings. But have you considered how your blog template can be optimized too?
There are many themes available for WordPress users which are intrinsically styled for SEO. Unfortunately for those who use Google Blogger, such resources are few and far between.
Over a short series of three posts, I’ll share some of the tricks I’ve discovered which you could use to optimize your Blogger templates for search engine spiders, and achieve better rankings in search results.
In this part, I’m going to start from the top by explaining how your blog’s URL, title and meta tags can be easily optimized with a little thought and some slight changes to your Blogger template code. I’ll also explain how your blog’s title can be best optimized, even when using an image in place of the title and description text.

URLs, Title and Meta Tags

These are often considered the three most important components of search engine optimization, and can be easily optimized for Blogger powered blogs.

Your Blog’s URL

Whether you are posting on a BlogSpot subdomain (e.g: yourblog.blogspot.com), or have chosen to use the custom domain feature (e.g: www.yourblog.com), the URL of your site should reflect the content of your blog.
Choose your blog’s URL wisely, and if possible ensure this contains a keyword or two which is relevant to your content. If you are writing about cats, for example, a URL such as “thedogsdinner.blogspot.com” will do you no favors with Google, whereas a URL like “thecatswhiskers.blogspot.com” almost certainly would:)

The Title Tag

The <title> tag is a very important feature of any website, and is displayed most in search engine results.
In Blogger templates, a title tag is generated for each page of your blog (including the main, archive and post pages), which differs depending on the actual title of the page.
The title tag is called in your template like this:
<title><data:blog.pageTitle/></title>
Your home page will only feature the actual title of your blog, whereas post pages will feature your blog title, plus the title of your blog post.
When writing titles for your posts, you should bear this in mind to ensure your titles are keyword rich which will help your posts be indexed more easily by search engines. Try to place the most important keywords close to the beginning of the title, as many search engines limit the number of characters which are used in titles, both in their listings and in search results.
If you don’t mind hacking your template a little, you could even choose to display the title of your blog post before the blog title in post pages. This technique would ensure that keywords in your post titleswould be indexed much more easily, and can result in far better search rankings for your posts. For this, you should read Widget Based’s post: Changing the Blogger Title Tag for full instructions and the appropriate code to use.
Please note: For some reason, Blogger does not now support the hack I mentioned above. If you have already used this method in your template, this will continue to work for you. However, you will not be able to edit your blog’s template while this is still in place and may well get an error message explaining that a <b:section> is not permitted within the <head> tags. I can only assume that Blogger have somehow changed the way templates are parsed, and will be sure to update this section if I can discover an alternative method.

Meta Description and Keywords Tags

Many SEO experts argue that meta description and keywords tags are being depreciated in search engine results. Google for example, generally ignores the meta description tag and generates it’s own description. However, many search engines do still make use of these tags so it can be useful to include them anyway.
Meta description and keyword tags are not automatically generated for Blogger templates. Since we have full access to the HTML markup of our Blogger templates, we can add these manually below the title tags.
One important consideration you should understand before adding meta description and keyword tags is thatsearch engines look for different descriptions and keywords for each page of your site. If you simply add these to your template in the commonly accepted form, the same content will be distributed across all pages of your site, which search engines may well regard as spam.
So here’s the trick: only use these meta tags for your home (main) page!
This is easily achieved by wrapping your meta description and keywords in conditional tags which will then only appear on your main page.
For example, if I was writing a blog about cute cats, I could include meta description and keyword tags like this:
<title><data:blog.pageTitle/></title>
<b:if cond=’data:blog.pageType == “index”‘>
<meta content=’Cute cats and fluffy kittens for feline friends.’ name=’description’/>
<meta content=’cute, cat, kitten, fluffy, feline’ name=’keywords’/>
</b:if>
The parts highlighted in bold are those tags which prevent the data between them from being generated for the item and archive pages, so you can be sure not to spam search engines with repeated descriptions and keywords for your blog.
The example above could be used as a basis for adding your own meta description and keywords, by simply changing the values to those which are better suited to your blog.

Optimizing your blog’s title heading

Headings offer search engine spiders useful references about your content when indexing your site. You will probably be aware of the hierarchy of heading tags, which ranges from <H1> through to <H6>. Of these, the <H1> tag is considered the most important. In Blogger templates, the H1 tag would usually contain the title of your blog.
Blogger allows us to upload an image to the header section, which can either be used as a background image, or instead of the regular title and description text.
Those who choose to use an image instead of the title and description will not have the H1 heading tag present in their template. So if your blog title uses keywords which would be relevant to search engine results, you would be missing out on an important factor of SEO!
Luckily, this can be easily remedied! Provided you are using an image instead of the title and description in your template, here is how you can solve this dilemma:
  1. Go to the Layout>Edit HTML section of your Blogger dashboard, and ensure you have checked the “Expand widget templates” box.
  2. Look for the styling code for the H1 heading in the <b:skin> portion of your template. This may look something like this, though there are variations across different templates:
    #header h1 {
    margin:5px 20px;
    padding:45px 20px .25em 10px;
    line-height:1.2em;
    text-transform:uppercase;
    letter-spacing:.2em;
    font: $pagetitlefont;
    }
  3. Within this portion of code, you need to add the following line:
    display: none;
    Here is how this could appear when added to the style declaration above:
    #header h1 {
    margin:5px 20px;
    padding:45px 20px .25em 10px;
    line-height:1.2em;
    text-transform:uppercase;
    letter-spacing:.2em;
    font: $pagetitlefont;
    display: none;
    }
  4. Next, you will need to add the <h1> heading tags within the header widget. For this, you will need to locate the following section of code:
    <b:if cond=’data:useImage’>
    <b:if cond=’data:imagePlacement == “REPLACE”‘>
    <!–Show just the image, no text–>
    <div id=’header-inner’>
    <h1>Your Blog Title</h1><a expr:href=’data:blog.homepageUrl’ style=’display: block’>
    <img expr:alt=’data:title’ expr:height=’data:height’ expr:id=’data:widget.instanceId + “_headerimg”‘ expr:src=’data:sourceUrl’ expr:width=’data:width’ style=’display: block’/>
    </a>
    </div>
    <b:else/>
    You’ll notice that I’ve added the H1 heading (highlighted in bold) where it should appear in the template code. As we have set the style of the H1 heading to “display: none;”, this ensures that the H1 heading is present in the HTML markup of your blog pages, but that the title itself is not visible to the casual viewer.
This technique ensures that your blog’s title will still be indexed as effectively as if you had used the image as a background instead. Furthermore, by adding this H1 heading manually, you could even expand on your title slightly with a short description which contains keywords relevant to your blog content.
Note: if you use an image as the background to the title and description, or do not use an image in your header at all, you don’t need to worry about this issue, as the H1 heading will already be present in the mark-up of your pages!

Allow search engines to find your blog!

Finally (and most importantly!) you should ensure that search engines are able to crawl and index your blog.
The easiest way to check this is to look in the settings of the Settings>Basic section of your Blogger dashboard. Close to the bottom of the page is an option to “Let search engines find your blog”. You must set this to “Yes” if you want your site to be crawled and indexed by search engines.
If you have mistakenly set this to “No”, Blogger will add a “NOINDEX,NOFOLLOW” meta tag to your blog mark-up, like this:
<meta content=’NOINDEX,NOFOLLOW’ name=’robots’/>
Such a tag will prevent search engine spiders from ever indexing your site.
This may seem obvious to most of you, though you’d be surprised how many people have not checked this setting!

Further resources

Here are some useful sites you may like to refer to for further information about the tips suggested in this post:
In the next installment of this mini-series, I’ll explain how all of the links in your Blogger template (including those contained in widgets) can be optimized for search engines and better rankings.
While Blogger templates may not be naturally optimized for search result status, there are many easy adaptations we can make to ensure they are more accessible and search engine friendly.
Last week in the first part of the SEO series for Blogger templates, I explained some how the head section could be best optimized for rankings in search engine results. In this part, I will explain how best to optimize the links in your blog template, which can help ensure these are properly crawled and better adapted for search engine spiders.

Back to Basics

Before we get into the intricacies of optimizing links in Blogger templates, let’s get back to basics!
SEO experts universally agree that link text is one of the most important factors of optimizing a link. Link text is the word or phrase which is used as a link in text links, like this:
<a href=”#”>This is Link Text</a>
The easiest way to optimize text links is to ensure the value of the text link tells the regular reader (and also search engine spiders) a description of where the link will lead to.
Let’s say I wanted to create a link to Kelby Carr’s post, SEO 101. A poor way of linking to this resource would be using non-descriptive link text like this:
Take a look at Kelby Carr’s post here
The link text, “here”, features no descriptive keywords related to Kelby’s SEO post, nor do the surrounding words have any impact on how this link is understood, either by readers of my post, or search engine spiders.
A much better way to link to this article would be to use descriptive text within and around the link:
Are you looking for SEO tips? Kelby Carr’s article describes the basics of search engine optimization with particular reference to blogs.
You can apply this technique to any manually created links in your blog, whether this be in your blog posts or links within your blog template (for example, links to important pages). Search engine spiders will reference the keywords contained in the link text more easily, while readers will prefer the experience of having a full description of where the links will lead to.

Using titles in your links

Links can be optimized even further by adding titles within the anchor tags, like this:
<a href=”#” title=”This is title text”>An example of link text</a>
The “title” of an anchor link should be exactly that: a descriptive title which explains something about the link. Titles offer even more information about the link to search engine spiders, and when a reader hovers their cursor over a link with a title in the anchor tag, the title will appear in a small box to provide a visual description.
Going back to the original example of linking to Kelby’s SEO 101 post, I could add the title”SEO 101″ to the link, which is also the title of her post, like this:
>Are you looking for SEO tips? Kelby Carr’s article describes the basics of search engine optimization with particular reference to blogs.
Hover your cursor over the same link text in each of the examples above. Do you notice the difference? If you use this technique for all manually created links in your Blogger blog, both search engine spiders and regular readers will notice the difference too!

Applying these techniques to your Blogger template

These techniques are easy to apply to any manually created links in your blog template. But what about your blog title, link lists and labels which use code generated by Blogger specific tags?
Even though such links are not generated by regular HTML anchor tags, there are methods we can use to optimize them by using keywords which are relevant to your blog, and by adding title tags.
The methods you can use are slightly different, depending on the link you wish to optimize. So I’ll go through the most prominent links you may wish to optimize in your own Blogger template with instructions on how these links can best be optimized for search engines and accessibility.

Your Blog Title/Home Page Link

In Blogger templates, your blog’s title in the header section provides a link to your blog’s home page. By default, this is displayed as a regular text link (featuring your blog title as the link text), though you can also opt to use an image instead of the blog title.
Your blog title is one of the most important factors of SEO, so you really need to ensure this is well optimized if you want your blog to rank highly for related keywords in search engine results. Whether you use regular link text as your blog title, or choose to use an image instead, you can still ensure this link is well optimized and adequate to your blog’s SEO requirements.
The widget code for your blog header contains two distinct sections of code: one for instances where link text is used to display your blog title (and link to your home page), and one which generates the correct code for when an image is used instead.
If you are using regular text to display your blog title, you’ll discover that it’s very easy to optimize this link. Simply go to Layout>Edit HTML in your Blogger dashboard, check the box to expand the widget templates, then locate the following section of code:
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl' title="A Link Title Here"><data:title/></a>
  </b:if>
</b:includable>
The text which I’ve highlighted in bold red is additional code which I have added to the template in order to give this link a title.
You can optimize this title by using descriptive keywords which are relevant to your blog subject. For example, if you are writing a blog about blogs, and your blog title is “The Cat’s Whiskers”, you could use a link title such as “The Pussy Cat Lover’s Blog” to provide adequate reference for search engines and readers alike.
If you are using an image instead of your blog title, you will need to locate a slightly different area of code and can optimize the link in two different ways:
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == "REPLACE"'>
      <!--Show just the image, no text-->
      <div id='header-inner'>
        <h1 style="display: none;">Your Blog Title</h2>
        <a expr:href='data:blog.homepageUrl' style='display: block' title="Link Title Here">
          <img expr:alt='data:title' expr:height='data:height' 
expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' 
style='display: block'/>
        </a>
      </div>
You’ll notice that I made two changes in the code above: the first is to add <h1> tags just before the link tags, which ensures there is a reference to a first class title within the blog template (when using an image instead of the textual title, this is omitted from the template code). By including the style reference, “display:none” this means that the H1 tags are referenced by search engine spiders, while not being displayed in the visual make-up of the template.
The second change is the same as the previous example, adding a link title inside the anchor tags, to ensure optimization for search engines and readers. As before, this also makes the link title appear when your cursor hovers over it.

Optimizing Labels Lists

In “new” Blogger layouts templates, you can add an optional “Labels” widget to your blog’s sidebar. This widget lists all the labels you have used to categorize your blog posts.
Since we do not have direct access to each label link in this list, you may imagine that it is impossible to add link titles to these links. Fortunately by adapting the code slightly, we can still add appropriate titles to these links!
If you have added a label widget to your blog, you can look in your template code to find this section:
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='"Read 
more posts filed under " + data:label.name ' rel='tag'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
As before,t he code I added to make these labels more optimized for search engines is highlighted in bold red.
You will notice that I have referenced the titles for each label link using this formula:
expr:title=’”Read more posts filed under ” + data:label.name ‘
As the link to each label link is generated by widget tags, we cannot add the code for each link title individually. Instead we need to use the section of the widget code which is used to generate the title as an expression, along with more descriptive link text.
Furthermore, you will notice that I added “rel=”tag” to the anchor link code. This is because Blogger labels can be used as tags which are referenced by Technorati and other sites to collect and collate information about a blog’s content.

Optimizing Link Lists

Link lists can be optimized in a similar way. If you already have a link list present in your blog, simply find the expanded widget template for your link list widget which should look something like this:
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target' expr:title='data:link.name'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
Once again, I have added some extra code in red to show how the links in this list may be optimized with titles.
If all of the links in a particular link list are those of friends’ sites, you may also wish to add the tag rel=”friend” to the anchor link code. Similarly, if all the links in this list reference your other sites or social profiles, you may prefer to add the rel=”me” tag instead. Either of these tags may be added to the code like this:
<li><a expr:href=’data:link.target’ expr:title=’data:link.name’ rel=”friend”><data:link.name/></a></li>

These “rel” tags establish relationships between your blog and other sites, which is useful for those interested in the Social Graph API and for those who wish to link all their profiles using sites such as Ziki and OpenID
.

Final thoughts

One thing you must note is that keyword spamming is frowned upon by search engines, and could result in a negative impact, rather than a positive one! When adding titles to your anchor links, it is advisable to use well formed phrases and proper descriptions rather than simply adding one keyword after another! This will stand you in much better stead, and will also be more friendly for your readers when hovering over such links.
One of the great things about Blogger is that we have access to the complete template. With a few simple tweaks Blogger users can easily optimize their blog template to achieve better rankings in search engines, which in the long run can attract far more visitors to our blogs.
This is the third and final installment of the SEO Tips for Blogger Templates series. In Part 1, I explained how the header section, meta tags and titles could be adapted for search engine spiders, while Part 2 dealt with optimizing all of the links contained within the template.
In this article, I will offer some tips to help you optimize all of the images in your Blogger blog, including those contained within widgets and inside your blog posts.

How Search Engines See Images in Your Site

Search engine spiders can only see the textual elements of your site; images are virtually invisible to them, unless you use ALT and TITLE tags to add unseen detail which can be read (and understood) by search engines.
ALT tags are of particular importance in optimizing images in your blog, as these specify “alternative text”: a description of the image which would appear if images are disabled in the readers browser and provide accessibility information for disabled readers. Many search engines view alternative text for images as an important aspect of the mark-up in web pages, and the strength of your site may be penalized if many images do not have ALT tags in place!
Alternative text appears within the image tags, like this:
<img src=”images/example.jpg” alt=”An Example of an Image” />
TITLE tags give the image a title, providing information of what the image is about which will be displayed if you hover your cursor over the image.
Title tags also appear within image tags, and are constructed as follows:
<img src=”images/example.jpg” alt=”An Example of an Image” title=”Title of Image” />
Both of these tags are considered essential elements in the <img> tags of websites, so it is important that you optimize your Blogger powered blog to reflect this.

Optimizing Images in your Blogger Template

The most important (and often overlooked) image in your blog template is the header image or logo.
If you use a header image in place of the title and description for your Blogger blog, the default template tags provide the title of your blog as the “alternative text” like this:
<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId + "_headerimg"' 
expr:src='data:sourceUrl' expr:width='data:width' 
style='display: block'/>
You can find this section of code by checking the “expand widget templates” box as this is contained within the widget which displays your blog header.
Unfortunately, Blogger does not automatically provide a title for the header image. Luckily, it is very easy to add a title to the image tags, simply by adding the required code:
<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId + "_headerimg"' 
expr:src='data:sourceUrl' expr:width='data:width' 
style='display: block' title='The Title of your Image'/>
If you have manually added any other images to your Blogger template, you should also add title and alternative text for these images. You can find image tags in your template easily by using your browser’s search function and searching for img.

Adding ALT and TITLE Tags to Images Contained in Widgets

Many Bloggers choose to add images to their sidebar using a “Picture” widget. Again Blogger adds “alternative text” to your image which is generated by the title of the widget itself.
It is possible to add a title to the image, and also change the alternative text (if you prefer).
The following section of code is an example of how a picture widget would appear in your Blogger template:
<b:widget id='Image1' locked='false' title='My Picture' type='Image'>
<b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <img expr:alt='data:title' 
   expr:height='data:height' 
   expr:id='data:widget.instanceId + "_img"' 
   expr:src='data:sourceUrl' 
   expr:width='data:width' title='Your Image Title'/>
      <br/>
      <b:if cond='data:caption != ""'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
I have added a title to the image, which is highlighted in red.
Changing the alternative text for the image is a little different. You will need to change the following section in the widget code:
img expr:alt=’data:title’
to say something like this instead:
img alt=’Alternative Text of your Image’
This replaces the default alternative text with that which you have specified instead.
If you add an image in an HTML/JavaScript widget, or as part of a Text widget you can add ALT and TITLE text manually inside the image tags without having to edit your template code. Simply open up the editor for your widget (either in the Layout>Page Elements section of your dashboard, or by clicking the wrench icon displayed in a blog page) and add the relevant code to the HTML mark up of your widget.

Optimizing Images in Blog Posts

Like most Bloggers, I upload images to my posts using the image upload button. This adds the correct code to my blog post without having to code the whole thing by hand!
But (as usual!) Blogger does not optimize the image tags!
When you use the image upload feature, ALT text is added to the image tags, but nothing is contained inside itso it may as well be blank!
You can see this at work in the following example where the missing alternative text is highlighted in red:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" 
href="http://bp3.blogger.com/[...]/A_Picture.jpg">
<img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" 
src="http://bp3.blogger.com/[...]/A_Picture.jpg" 
border="0" alt="" id="BLOGGER_PHOTO_ID_5175851698930009362" /></a>
While it wont do any harm to have no value to the alternative text (that is, to define alt=”"), it won’t do your blog any favors either! The best way to remedy this is to add your own alternative text between the two speech marks, which will be displayed for visitors who block images or use text-based browsers to read your site.
As in all of these examples, you can add title text to the image tags in your blog posts too, simply by adding the appropriate code.
After optimizing the example above, the code would appear like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" 
href="http://bp3.blogger.com/[...]/A_Picture.jpg">
<img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" 
src="http://bp3.blogger.com/[...]/A_Picture.jpg" 
border="0" alt="A Picture" id="BLOGGER_PHOTO_ID_5175851698930009362" title="The Image Title"/></a>

Useful Resources

Here are some useful sites which can help you understand the techniques outlined in this post, and also for SEO in general: