SEOs know that viewing the page source of a particular web page is an essential first step to analyzing how much and what kind of SEO strategy may be needed for a site. A lot can be seen in just a few minutes by taking a look under the hood and viewing some of the publicly available innards of a page. A lot can be hidden from view within the source code, but a lot is freely available- and many of these elements are critical SEO indicators of what SEO has been done, and what may be needed. Some of these deficiencies will be easily remedied, while others may be major problems “inherent in the system” (please forgive the Holy Grail reference).
What is the Source?
Every HTML page includes source code that can be easily seen within any browser. Simply right click on the page and click the view source option. Remember, just because you can see the code- doesn’t mean you’ve now captured the secret sauce of the site. The server side code is not displayed. Generally, it’s basic layout HT
ML and references to CSS files, with meta data (see our post on Meta Data). The really good stuff is hidden from view- but you’ll be able to see more than most people realize- especially SEO relevant info.
Best Tools for Viewing
Firefox: My preferred browser for viewing source code is Firefox, because of the well formatted display. In contrast, Safari, a great and user-friendly browser, is awful. It displays the code in ugly black and white, with no formatting, indenting or coloring of tags.
Firebug: An even better view of the source code is available when you install the Firefox (also available in Safari) plugin ‘Firebug’. This handy tool allows you to view even more information with the best formatting available. Take a look at a well done Firebug tutorial video for a more in-depth look. Some of the features that I love include:
– The source code displays in the bottom half of the screen, allowing me to see the viewable page and the source code on one, split browser screen.
– Hover over any element of the page, right click and select the ‘Inspect Element’ option to see the source code highlighted for that specific portion of the page.
– Collapsible formatting within the code section.
– CSS code that is available for preview.
– Edit any of the code, right within the tool, and see the effects (temporarily) of the changes on the page.
Top 5 Things to Look for
1. Meta Tags: SEOs can quickly see the meta title, description and keyword (pretty useless) tags. It’s a great way to see what 3-4 phrases the site may be focusing on for SEO. If these are missing, you can anticipate that no SEO is going on- as these are some of the first and most basic changes that are applied. I find looking into competitors title tags to be a useful first step in analyzing and creating a profile about their SEO strategy. Additionally, I can see what types of ‘calls to action’ they may be using on the SERPs page- as this is often what the description tag is used for.
2. Meta Robots: Meta robots are page-specific directives for controlling crawlers for Google, Bing, etc. Specific pages can be kept out of search engines by utilizing this tag. It looks something like this:
<meta name=”robots” content=”noindex”>
The tag will keep the entire page, and URL (the robots.txt file command will keep the page, but not the URL out), so it is often the preferred way to keep a page from being seen by everyday Google searchers.
Sites that include this are usually pretty heavily involved in SEO, so I may pay particular attention to them when analyzing their links, on-page SEO, etc.
3. Frames: A frame is essentially an HTML page inside another HTML page. They are not good for SEO. The content within the frame doesn’t count towards the page it is embedded on, so SEOs should stay free of this coding technique when trying to get the most bang out of a page’s buck. Look for code that looks something like this:
<FRAMESET COLS=”20%,*”>
<FRAME SRC=”recipesidebar.html” NAME=SIDEBAR>
<FRAME SRC=”recipes.html” NAME=RECIPES>
</FRAMESET>
Look for code snippets such as: ‘frameset’, ‘frame’ or ‘iframe’
4. Flash: Search engines are getting better at reading and indexing Flash elements, but these should still be used in moderation (if at all), and only for small portions of the page. An entire page should never be all Flash! When viewing the source code, look for code that might include:
<object width=”550″ height=”400″>
<param name=”movie” value=”somefilename.swf”>
<embed src=”somefilename.swf” width=”550″ height=”400″>
</embed>
</object>
Look for code elements such as: ’embed’ and ‘object’
5. JavaScript Links: As in the case of Flash, search engines are getting better at identifying javascript, but the search engines haven’t been very clear about what types (as js can be written several different ways) they support. Links that use javascript are in danger of not being followed- so link juice may be limited. Clean HTML links are always the best choice. A javascript link may look something like this:
window.location.replace (‘http://www.javascriptlinkexample.com’);
Feedback? What do you look for when viewing source code and analyzing a site or competitors site? Do you have different or better tools for viewing source? Please, comment below with your feedback.