While the structural components of the source code are critically important to optimize, so too is the technical aspects of optimizing the information presented on each page. This lesson presents recommendations and code snippet examples to make the content found in the
section of each page optimized for search engines.
These typically appear horizontally across the top of a web page, often below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page, or in hierarchical site structures, the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point. Typical breadcrumb links look like this:
Homepage > Category Page > Sub-Category Page > Current Page
One nice thing about breadcrumbs is that if marked up correctly, Google may choose to display your breadcrumb trail in their search results, rather than the URL of the page. Typically this is cleaner and can show potential visitors that your page sits in a well-structured category. In order to be eligible for this kind of rich snippet in Google’s search results, your breadcrumbs should be marked up with Micro-data as follows:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/category" itemprop="url"> <span itemprop="title">Category Title</span> </a> › </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/category/sub-category" itemprop="url"> <span itemprop="title">Sub Category Title</span> </a> › </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/clothes/category/sub-category/page" itemprop="url"> <span itemprop="title">Page Title</span> </a> </div>
The Data-Vocabulary.org reference is pointing to a set of Microdata Formats that search engines can utilize to understand that this is a breadcrumb. This is very similar to Schema.org.
Heading tags set the tone for the subject matter that will follow. There are six heading tags h1, h2, h3, h4, h5, h6 and typically content that is associated with these tags will be styled differently than the default body content of the page.
h1 tags are typically used to present the title of a page, and will often be presented at the top of the body content on the page. But, this is not absolutely necessary. If the page design does not call for a large written heading at the top of the page, then the h1 tag can be styled to appear like any other text. It can also be incorporated into the breadcrumb for the page. However, it is very important that there is one and only one h1 tag per page.
The H1 tag gives search engines a strong contextual clue as to what topic the content on the page will address.
As opposed to the recommendation that only a single "h1" is used on each page, it is recommended that multiple "h2" tags are utilized on each page. The best way to use H2 tags is to emphasize section headers that appear within the body content. However, H2's can also be used to call out page elements such as menus that appear in sidebars. Wherever heading tags are used, there should be an attempt to include important keywords.
An easy way to ensure that H2's are included and used properly on your webpages is to first create a keyword assignment that is well aligned with the intended subject matter, and from that keyword assignment to create multiple questions or statements. Those questions and statements should become the "h2’s" for the page, and in this way the supporting paragraphs cannot help but further discuss the strategically specific and keyword rich subject matter.
How the H3-H6 tags are used it completely up to the designer of each site, however it should always be kept in mind that these tags provide search engines with clues as to how content is structured for the user experience. These tags should be used in conjunction with important keywords whenever possible to convey relevance. Here are some examples of how these tags should be used:
- h3 tags should be used as sub-categories, often associated with bullet points.
- h4 tags should be used in conjunction with block quotes.
- h5 tags should be used for on-site additional information references and other sections of similar importance
- h6 tags should be used for off-site additional information references.
If the desired page design does not allow room for the necessary amount of content, an expandable div can be implemented using a combination of Javascript and CSS so that the content will be available in the code for search engines to index, and available to users that are interested in reading all of it. However, upon page load some of the content can be hidden.
It is important to use Javascript to fire the CSS that actually hides the text while the div is not expanded because search engine spiders ignore Javascript and therefore the page will get full credit for presenting the content. However, if Javascript is not used, and the content is simply hidden using CSS, then the search engines will pick up on that and the page will not get credit for the hidden content.
It is also important to note that if this technique is implemented in a way that seems to be solely for the purpose of getting keyword rich content in to the code and not actually as an attempt to offer the user with valuable content and a rich user experience, then this strategy could be seen as “spammy” and the site could face a penalty from Google. Therefore, it is important to always show at least a teaser of the content to the visitor and that the teaser is placed prominently enough that an average user would have no trouble finding it.
Implementation of Expandable Div:
In order to implement an expandable div, you will need to add both CSS and Javascript to your document. It is preferable to add the following CSS and Javascript to your existing externalized Javascript and CSS documents, however, it will still work if you add the following code snippets within the page itself. If adding the code to the individual page, it is strongly recommended that you add the CSS and Javascript at the end of the body text.HTML for Expandable Div:
Place the following code into the HTML of your page with the expandable text within the div tags.
<div class=“expandable-desc”> Text to be revealed goes here. </div>
CSS for Expandable Div
The following CSS .custom-collapsed overflow: hidden; height: can be adjusted from 30px to either reveal more or less of the expandable text before the “Read More” is displayed.
<style> .expandable-desc { padding-top: 3px; margin-bottom: 10px; line-height: 20px; } .custom-expand-collapse { margin-bottom: 20px; text-align: right; } .custom-collapsed { overflow: hidden; height: 30px; line-height: 20px; } </style>
Javascript for Expandable Div
This Javascript should ideally go into the footer of every page where you will be using Expandable Divs. You want it to load near the bottom of the source code so that the text and page design elements will load faster. However, it is rot recommended that you add this extra Javascript to any pages that do not really need it. if you are not going to use the Expandable div on a page, this code should not be added. You should always try to avoid unnecessary code bloat.
<script type=“text/javascript”> jQuery(document).ready(function() { jQuery(‘.expandable-desc’).each(function() { if (jQuery(this).height() > 55 { jQuery(this).addClass(‘custom-collapsed’); jQuery(this).after(<div class=“custom-expand-collapse”><a href=“#”>Read More</a></div’)’ } }); jQuery(‘.custom-expand-collapse a’).click(function(e) { e.preventDefault(); var element = jQuery(this).parent().prev(); if (element.hasClass(‘custom-collapsed’)) { jQuery(this).html(‘Show Less’); element.removeClass(‘custom-collapsed’); } else { jQuery(this).html(‘Read More’); element.addClass(‘custom-collapsed’); } }); }); </script>
Every link on the site should receive a title tag that is a match for one of the most important keywords, that the page it is pointing to, is attempting to rank for. The anchor text of the link should also be an exact match for the title tag and one of the most important keywords, that the page it is pointing to, are trying to rank for.
The table summary attribute should contain a single keyword with the code looking like this:
<table summary=“keyword">>
Only add this attribute when it makes sense on the page and do not overuse table summaries. Do not add a table summary to empty tables.
Every image should have an alt tag associated with it that utilizes one of the most important keywords that the page is attempting to rank for where the image appears. This is a 508 accessibility attribute and works with programs that help the blind use the internet. Search engines get valuable relevance information from the alt attribute. Each image should also be renamed to match one of the most important keywords that the page is attempting to rank for where the image appears. The image name and the alt tag should be identical. However, it is also important that the image name and alt tag are accurate depictions of the image.
Schema.org is the result of the largest companies in online search and big data collaborating to create a unified set of structured data mark-up so that webmasters can properly identify different types of content on a very granular level. This allows search engines to clearly understand how to properly categorize and present data more appropriately. This structured data feeds Google’s knowledge graph and is an absolute necessity for sites that wish to remain competitive for years to come. There is an incredible variety of types of structured data and every webmaster should spend some time on Schema.org identifying any data types they are presenting on their site and learning about how to make that data more accessible online. The following are some of the most common types of Schema.org mark-up:
- Images
<div itemscope itemtype="http://schema.org/ImageObject"> <h2 itemprop="name">Beach in Mexico</h2> <img src="mexico-beach.jpg" itemprop="contentURL" /> By <span itemprop="author">Author Name</span> Photographed in <span itemprop="contentLocation">Location where photo was taken</span> Date uploaded: <meta itemprop="datePublished" content="yyyy-mm-dd"> <span itemprop="description">write a short description of the photo</span> </div>
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject"> <h2>Video: <span itemprop="name">Title</span></h2> <meta itemprop="duration" content="T1M33S" /> <meta itemprop="thumbnailUrl" content="thumbnail.jpg" /> <meta itemprop="contentURL" content="http://www.example.com/video123.flv" /> <meta itemprop="embedURL" content="http://www.example.com/videoplayer.swf?video=123" /> <meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" /> <meta itemprop="expires" content="2012-01-30T19:00:00+08:00" /> <object ...> <param ...> <embed type="application/x-shockwave-flash" ...> </object> <span itemprop="description">Video description</span> </div>
- https://developers.google.com/webmasters/business-location-pages/schema.org-examples
- http://schema.org/LocalBusiness
Many additional types of Schema.org markup exist. The following list includes the most popular types of Schemas that marketers are currently using to drive more SEO traffic (based on a large scale study of websites that are effectively reaching the top of Google's search results).
- SearchAction Markup
- Offer Schema
- WebPage Schema
- Aggregate Rating Schema
- Product Schema
- Review Schema
- Rating Schema
- MobileApplication Schema
- Website Schema
- Pharmacy Schema
- Exercise Schema
As search engines continue to develop a more and more granular ability to understand data as representative of entities, attributes, actions and relationships that occur both online and in the real world, additional opportunities for appropriately identifying and categorizing data through the use of structured data markup will emerge.
Most webpages should really have just one main keyword, with 2-5 highly thematic supporting keywords. The supporting keywords should represent various conjugations or phrases that use the main keyword slightly differently. Keyword density for the primary keyword assigned to a page should be between 4-6% for up to 500 words, 3-5% for 500-1,000 words and 2-4% for up to 1,500 words.
All supporting keywords should be adequately represented with an average of about 1-2% keyword density for each.
Remember, for keyword density calculations, we are only talking about “exact match” terms.
Here is the calculation. Let’s say that the page is being optimized for the keyword “trip cancellation insurance”. That is a three word phrase. If the page is 100 words and that keyword phrase is used one time, that would equal a 3% keyword density. If the keyword phrase were used twice, that would equal a 6% keyword density. Here is the keyword density calculation:
((number of words in keyword phrase) x (number of times phrase is used)) / (total number of words on the page) = Keyword Density
It is important to ensure that your keyword density does not go much higher than 6% or it will appear that you are “Keyword Stuffing” which is a very old and long-since defunct SEO strategy that will get your site penalized. There is really no way that you can write 500+ words of content, while hitting a 10% keyword density and maintain high quality content.
Think of keyword density like a bell curve. If keyword density is too low, it does not appear that your content is focused on the topic. If keyword density is too high, it appears that you are keyword stuffing and your content must be low quality. So, when it comes to your main keyword, staying in that 3-6% is just right.
The main keyword for a page should be placed as the first word in the text content when possible. The higher up the keywords appear in the text content, the more relevant they appear to be to the page. The primary keywords should certainly appear within the first paragraph. When creating supporting content for each of the heading tags on a page, it is recommended that the first supporting paragraph begin with the target keyword and that the last supporting paragraph in that section end with the target keyword.
One of the most important areas where Google is quickly advancing is in the understanding of natural language. Google has brought on Ray Kurzweil to oversee engineering in the artificial intelligence division. Specifically one of the big areas where they are gaining considerable ground is in semantic search technology. Meaning, they are getting better at understand not only the subject matter of your content, but the depth of discussion as it related to all possible aspects of that topic. Google is starting to understand what things are, what they are related to and how they are interacting on the web. Therefore, your written content must present depth to rise above the noise. One important way to do this is to demonstrate, through language that your content is exploring the subject matter from all angles. To do this you will need to use synonyms, discuss all manner of highly related topics, common nouns, verbs and adjectives related with the subject. And once that content can begin a conversation there is an additional level of data scoring that can take place.
The keywords assigned to the page should be used in both bold and italics a few times within the content of the page. The use of these elements sends signals to the search engines that these terms are being called out and therefore given special significance to the reader. You can also use underline and quotes to add significance to specific phrases on the page. Google sees these highlighted phrases as indicative of page relevance. For bold, it doesn't matter if you use the "b" tag or the "strong" tag. Either are seen as having the same effect and meaning.
The most important types of links that you can possibly build are contextual cross-links that appear within relevant content. This is an indicator to search engines that the creator of content that is of relevant subject matter, felt that the resource being linked to is both relevant and important enough that it could possibly help the reader find further information on the subject matter being presented. The anchor text of the text link should be a match for the keywords that have been assigned to the page being linked to and the link should also have a title tag as described previously in this document.
You want to use contextual cross links as much as you can, but do not exceed one link for every 100 words of text.
Pagination is a very necessary component for most websites. Pagination commonly appears at the bottom of blogs, search results, forums and to break up in-depth articles. Pagination is great to keep any single page from becoming too large while providing access to a long list of similar content. It helps your website by increasing page views and giving you more chances to expose visitors to advertising and calls to action. However, if done incorrectly, pagination can lead to duplicate content and link dilution. Therefore, it is important to ensure that your paginated pages utilize these best practices.
- Pagination Links: Every page in the paginated chain should include the following links in the section. The “prev” link should point to the preceding page in the pagination chain, and the “next” link should point to the following page in the pagination chain. In the below example, these links would appear on page 2 of the pagination chain.
<link rel=“pref” href=“http://www.example.com/long-article-pg1” />
<link rel=“next” href=“http://www.example.com/long-article-pg3” />
Note: the first page in the pagination chain would not include a “prev” link, and the last page in the pagination chain would not include a “next” link.
Now That You Know How To
Optimize Your Body...
Next In the next lesson we will take a look at the proper