My Favorite Books For Growing My Blog.

Today I'm sharing my favorite books that I used for growing my blog.

How to Add Breadcrumb Navigation Menus At the Top of Your Blog Posts

Breadcrumb navigation is becoming a more and more relevant when it comes to a blog’s user friendliness (which trickles down to search engine friendliness).   Most SEO and marketing experts agree that breadcrumb paths are a positive addition to almost any site, especially those where the content can be categorized with some sort of hierarchy. Today we’re going to discuss exactly what breadcrumb navigation is, why it is important and how you can install it on your Blogger blog if you don’t have it already. 

What is breadcrumb navigation?

Breadcrumb paths are the horizontal menus found at the top of a post or page that show the hierarchy of post content.  On Blogger, the cascade is typically:  Home >> Post Category >> Post Title

The term “Breadcrumb” is a homage to the fairy tale Hansel and Gretel where the children left a trail of breadcrumbs to find their way out of the forest.  In that same way, your breadcrumb navigation shows the path of your content. (Although not necessarily in the order you actually got there.) It is more of a roadmap of your site structure to help users navigate through your content.

I have been using breadcrumb navigation on my DIY site for a while now and it has been great for reader retention and increasing pages per session.  This is what they breadcrumbs look like on my blog:

Why are breadcrumbs so important? 

Breadcrumb navigation is extremely important especially on large commerce sites.  For example, Amazon prominently uses breadcrumb paths on their site:

and even though the structure of most blogs is not nearly as complex as Amazon, it still can be very valuable for a good user experience and SEO.

BENEFITS OF BREADCRUMBS FOR USER EXPERIENCE:

1. Aids in navigation: Having a breadcrumb path allows for easy discovery of related content. Since most blogs are written chronologically, the “next” and “last” post navigation options may not result in related or relevant content.  They are typically easy to understand for most users (and not as difficult to find as your menus in your header or sidebar) and don’t take up a lot of space or slow down you site.

2. Reduces Bounce Rate: Having a breadcrumb trail available has been proven to reduce a page’s bounce rate. By giving users an easy way to find related content they are less likely to leave after they have finished reading the content on the current page. I also increases time on site and pages per session.

3. Gives user a frame of reference: Many site visitors will not land on a home or menu page but will instead find themselves on a single post.  A quick glance at the breadcrumb path makes it quickly obvious where exactly they are located on your site, relative to the rest of your content.  Additionally, the label the current post is categorized under provides insight into the type of content available on your site.

4. Allows for easy back tracking: Breadcrumb navigation makes it easier for a user to backtrack to a parent directory (or in blogger’s case, to an entire category label).  Since breadcrumb paths tend to narrow down content by increasing specificity, they allow users to ‘back out’ of a post into a larger segment of your site’s content. 

BENEFITS OF BREADCRUMBS FOR SEO:

All of the benefits for user experience chould technically also be listed under SEO benefits, since user friendliness and engagement is such an important factor when it comes to a page’s search engine rank.  There are also some ADDITIONAL SEO perks from having breadcrumb navigation available on your blog independant of user experience.    

1. SERP results markup: Google recently announced that they are updating the MOBILE algorithm to show breadcrumb paths instead of URLS on SERPs (Search engine results pages).  To insure your links show up that way requires some additional RDFa markup separate from the HTML for navigation.

With that markup search results now look different on mobile.
2. Keyword Density: Listing the keyword rich post and category names on each page increases the keyword density on your site.

3. Internal Linking: This navigation system links together similar content via the same category label. These additional links are beneficial SEO wise.

How do you install the breadcrumb navigation to your blog posts?  

It isn’t super difficult if you have a standard template.  Custom templates may be slightly more complicated, but for most blogs it is a few simple lines of HTML added to your template.  This is what this blog’s breadcrumb menu looks like using this tutorial. 

INSTALLING BREADCRUMBS ON A BLOGGER BLOG:

From your Blogger dashboard go to Template and create a backup. Next click on “Edit HTML”   Click INSIDE the window and search for: 

<b:include data='top' name='status-message'/>

Remember you need to click ON THE CODE and THEN hit “Control-F” or else you won’t actually search the HTML! 

Now Replace the highlighted text with the following (we are adding the navigation menu to the top of your posts):

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

Now you want to find this part of your code:

<b:includable id='main' var='top'>

Replace it with the following  (What we are doing here is adding code to generate the actual text in the menu itself) :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>  » <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>

»Unlabelled

</b:if>

» 

<span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a>

 » All posts

<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

Finally we need to format how the menu appears.  To do this you have to add the CSS (styling) to the text.  Find: 

]]></b:skin>

Paste the following immediately before it:

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
}

This is CSS markup and you can change the way your menu looks by changing this text.  This is just the most basic formatting, but feel free to play with this code if you are comfortable with CSS.

For example, here is a much more complicated CSS markup you could use instead:

.breadcrumbs {
font-size: 14px;
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: linear-gradient(top, #eeeeee 0%,#cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
height: 25px;
line-height: 25px;
color: #454545;
border: solid 1px #cacaca;
width: 100%;
overflow: hidden; 
margin-bottom: 25px; 
padding: 0px
}

With that CSS this is what the menu would look like this on my blog:

Depending on how comfortable you are with your template, you also can move your menu to different parts of your post.  I put mine under the title, but you could also put it in the footer or near the comments.  It really will depend on your layout.  The standard location is at the top of your post.

Now you should have everything you need to install this extra navigation option for your readers and will help drive those readers to all the other related content on your site.

Post Planner for Bloggers: Improve Facebook Reach And Engagement

I discovered the power of Post Planner a few months ago when Gail, from MyRepurposedLife (who has a HUGE Facebook page) told me she was using it and really liking it.  She had seen her engagement skyrocket (which is really difficult for pages with more than 100K followers) and she told me she was saving a ton of time.

Optimize Your Blog's Meta (Search) Descriptions Using Keyword Research

One of the things many bloggers struggle with when it comes to SEO is what exactly to include in their posts' meta descriptions.  The meta description (also called the search description on Blogger) is the short text snippet that appears on SERPs (search engine results pages) under the page title and URL.  Typically the meta description is a summary of the page content.

How to Add RECIPE Rich Pins on Blogger

I have previously shared a tutorial on how to add rich pins for articles to your Blogger Blog.  I have had a ton of positive feedback on that article, and since the majority of bloggers on Pinterest need article pins, it is relevant to most bloggers.  If you are a blogger who shares content on Pinterest, you want to have rich pins installed! 

There is a another subset of bloggers who could also use the additional resource of RECIPE rich pins.  Even if you only occasionally share recipes, it is a something you can use.  It is a little more complicated but it isn’t hard once you know what to do. 

How to Block Your Own Pageviews from Google Analytics

I am constantly being asked by other bloggers: “Why do my Blogger page views not match my Google Analytics page views?” and the answer is: Because crawlers and bots are recorded in Blogger analytics, while google analytics only records legitimate page views.

It can be a little depressing, since Blogger analytics can be orders of magnitude higher than Google Analytics (GA), but those page views aren’t real.  When search engines load your content in order to index it and add it to search engines, blogger analytics counts that as a page load.  But that is a computer program that isn’t actually ‘viewing’ anything.  On the other hand, google analytics records every time a script is loaded and your page is displayed in a browser window… TO SOMEONE READING IT.  The difference in those numbers can be dramatic.

Search Engine Title Swapping: Make Post Titles Appear Before Blog Titles on Google

How your blog posts show up in Google’s search results is extremely important.  Since search engines take into account how frequently a displayed listing is clicked when ranking content, you want to make sure that your search results accurately reflect what your post is about.  Since the most predominant part of a search result is the post title, ensuring that it is displayed in full is very important.  But by default, Blogger does not have your search listings formatted that way.