Identify rel=”nofollow” Links without Viewing the HTML Source Code

One of the most important skills an advanced SEO must possess is the ability to analyze and understand the link structure of a given web page or website. This skill can be applied to many different SEO-related topics, such as information architecture, link building, and the mysterious practice of PageRank sculpting. Even “content is king” advocates rely on links to deliver traffic, increase rankings, and to make their content discoverable to search engine crawlers.
Anyone who’s serious about SEO needs to be able to easily identify links that (a) cannot be crawled, or (b) cannot flow PageRank. Two common examples of this are:

• links that include the rel="nofollow" attribute
• links that are embedded in a page via inline frames (i.e. <iframe> elements)

In this article, I will show you how I have customized my web browser (Firefox 3.5) to help me identify nofollowed links and iframes, without viewing a page’s HTML source code. If you don’t use Firefox, you can still benefit from the CSS examples in this post, but you will have to figure out how to add custom user-defined CSS styles to your browser. If you’re using Internet Explorer, just kill yourself.

Step 1: Install the Stylish Extension for Firefox or Chrome

Stylish is a simple Firefox extension that allows you to add custom CSS styles to your browser. In other words, it lets you override the author-defined styles on any website. There are other extensions out there that provide similar functionality, but Stylish seems to be the easiest and most popular. Plus, it’s what I use…and I’m the greatest SEO who’s ever lived. Install it from the official Stylish Firefox Add-ons page or the Stylish Chrome Web Store page.

Step 2: Create a New Style

After you install Stylish and restart Firefox, you should see the Stylish icon in the bottom-right corner of your browser. If you don’t see it, try clicking View => Toolbars => Customize, and then add the icon to your toolbar. The icon is a box with an “S” on it. Once you’ve found the icon and opened the Stylish menu, click on Write new style => Blank style.

Step 3: Pimp Your nofollow Attributes

Now it’s up to you to add your own custom CSS styles to make nofollowed links stand out in your browser. Here are some tips to get you started:

• Remember to add !important after every style declaration (but before the semicolon). Example: .black{color:#000 !important;}
• Take advantage of the powerful CSS 2.1 selector syntax, which enables you to select elements based on their attributes. To select all links with the nofollow attribute, you would use a[rel~="nofollow"]{...}
• If you’re the adventurous type, check out the CSS 3 selectors (not an official W3C Recommendation yet). Remember that you aren’t limited to cross-browser compatible CSS–you can use anything that your specific browser accepts.
• For more information about using Stylish, see Coding User Styles.

The possibilities are endless, but try the code example below and take it from there. This example will achieve the following results:

• Text nofollow links have a strikethrough in their anchor text.
• When you hover over text nofollow links, they turn red (and remove the strikethrough).
• Image nofollow links and iframe elements have a red border when you hover over them.

a[rel~="nofollow"]{
    text-decoration:line-through !important;
}
a:hover[rel~="nofollow"]{
    color:#F00 !important;
    text-decoration:inherit !important;
}
a:hover[rel~="nofollow"] img,
iframe:hover{
    outline-width:1px !important;
    outline-offset:-1px !important;
    outline-color:#F00 !important;
    outline-style:solid !important;
}

NOTE: If you’re wondering about these strange outline properties, they’re from the CSS3 Candidate Recommendation. They all work in Firefox 3.5. The difference between outline and border is that border adds to the width of a box, but outline doesn’t. The outline-offset declaration is set such that the red border falls on the inside of the box being outlined. In other words, using these declarations instead of border declarations should prevent you from unintentionally shifting the layout of the page you’re viewing.

If you feel this information will help you so please share it with others and like my Internetmarketingmantra Facebook Page

Source : seomofo