In this post I am going to discuss three things you should change in your default blogger account to make your blog SEO friendly. we are going to discuss it step by step.
Very first thing I found recently is that Google by default does not index your label page. When you assign label to post and click on label, URL is something like this "...blogspot.com/search/label/...". All this deails are defined in robots.txt file of your blog.
Now default content of robots.txt is:
This line Disallow: /search stops Google indexing all your label pages.
To set custom robots.txt Goto your blogger account > Settings > Search Preferences. Click on "edit" As shown in image.
Paste the following content in it and save changes.
Content of this file is understandable. It will not allow your archive pages to be indexed and will allow your label pages to be indexed.
If you want your archive pages to be indexed remove "Disallow: /*archive.html" line.
To customize title according to your blog pages follow these steps:
Now Goto your blogger Dashboard > Template. Click "Edit HTML". Look for line
"
<title><data:blog.pageName /></title>" and replace it with following code:
If you look at the code abstractly you should get the idea what it is doing. You can also replace string "Search results for" with suitable string.
If you click on label by default it will show every post fully having that label. When user click on Label default view is not user friendly. To change that again Goto your blogger Dashboard > Template. Click "Edit HTML". look for line
"<b:include data='post' name='post'/>" and replace it with following code:
Now click on any label on your blog and your should see That only titles of labeled posts apprear as list on your label pages, as shown in image below(Output for "SEO" Label for my blog).
Doing these changes will surely optimize your blog for SEO. If you are more interested in SEO have a look at this post How to Use Webmaster Tool to increase website's Page rank
.png "How to add custom Robot.txt in blogger | 101Helper tips,tricks, gadgets and widgets for blogger")
</body>The body tags makes up the general content in your webpage. Think of it like the settings panel of a website. If you were to delete everything in this section your site would turn into a blank white page.
<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh1TWMMl7XXwfLVvqBaSG1DkYBfhN1TH6xCTk6YdXa6rwaDZRz2_E4sw_3Jw4Rlxk8Pg8PVqbTpZbMA0ijyVJGCvVESP1Ssx64VVxmg1vYIKJyyYE_mXFi4zoDarD4qntfsAs6NGqmibaO/s1600/pinit-button.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='http://helplogger.googlecode.com/svn/trunk/pinterest-button1.js' type='text/javascript'>
// Visit helplogger.blogspot.com for more widgets and tricks.
</script>
var pinit_button_position = "center";To move the pin to a different area of the photo, replace center with one of these texts:
topleftAnd to change the Pin it! button that appears on mouse over, replace the address in blue from above with your own:
topright
bottomleft
bottomright
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh1TWMMl7XXwfLVvqBaSG1DkYBfhN1TH6xCTk6YdXa6rwaDZRz2_E4sw_3Jw4Rlxk8Pg8PVqbTpZbMA0ijyVJGCvVESP1Ssx64VVxmg1vYIKJyyYE_mXFi4zoDarD4qntfsAs6NGqmibaO/s1600/pinit-button.png";
#header-inner {If you have a small image and you want it to become full width, add this CSS instead:
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}
#header-inner {
background-size: cover;
width: 100% !important;
text-align: center;
}
#header-inner img {
width: 100%;
height: 100%;
}
#header-inner {
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}
#header-inner {Note: for larger images, you may need to resize them in order to make them appear side by side with the text.
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}
body {Just below body { you should see some lines that will look like this:
body {Where you see the highlighted line above in the code, remove the line and replace it with:
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
padding: 0px;Different templates will have minor variations, but you should still be able to find these lines within every template.
.content-inner {Just below it, you will see this line:
.content-inner {Remove the line in red and replace it with:
padding: $(content.padding) $(content.padding.horizontal);
}
padding: 0px;This will remove any of the padding around the inner content, so it won't leave any room on both sides.
$(content.background.color.selector){Just below it you will see this line:
$(content.background.color.selector){Replace the line in red with:
background-color: $(content.background.color);
}
background-color: $(body.background);Finally, search for this tag:
]]></b:skin>And just above it, add this CSS:
.main-outer {
background: $(content.background.color);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {And just below it you will see the following lines:
.content-outer, .content-fauxcolumn-outer, .region-inner {Delete the line in red and replace that line with:
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
max-width: 100%;
</b:template-skin>And click on the right arrow to expand the styles. Note: you will need to search for </b:template-skin> tag again, and just before it you'll see these symbols highlighted in yellow:
]]>Above this ]]></b:template-skin> section of code, add the following:
</b:template-skin>
.main-outer {Then run a search for:
max-width: $(content.width);
margin: 0 auto;
}
]]></b:skin>Add these lines of code just before/above it:
.tabs-inner {Save the template and exit out of the editor.
padding: 0px;
}
.section {
margin: 0px;
}
.header-inner .widget {
margin: 0px;
}
.post-body img {Adding the code to this section, automatically adds it between the <b:skin>....<b:skin> tags of your Template (Template > Edit HTML, above the ]]></b:skin> tag). So, no matter whether you add it above ]]></b:skin> or within the Add CSS box, the effect should be the same.
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}
.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;
}
.post-body img {Please consider that, if you have posts with photos floating either on the right or left side of the content, they will automatically go full width.
width:100%;
height:100%;
display: block;
}
