Onpage optimization standards january 2012

  • 94 views
Uploaded on

by devon auerswald

by devon auerswald

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
94
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Onsite Optimization Standards Onpage Factors ● Adhere to HTML Standards ● Images ○ Non-content images should never reside within a <img> tag. Images that only aid design/layout should be CSS backgrounds ○ All images within <img> tags must, without exception, contain an alt attribute to concisely describe the image, using keywords when necessary. ○ All images must have a set width and height attribute to prevent browser reflow. The height and width attributes must reflect the actual height and width of the image. ○ Images must be optimized for page-speed ■ All images should be optimized for best page-speed. In photoshop use File>Save for Web & Devices. JPG’s usually work at 61% compression. ■ Images with a limited amount of colors may be optimal as PNG-8 without transparency. Within Save for web & devices, reduce the scope of Palette while retaining the images original look. ● Links ○ Any and all links to mailto: or tel: in the href attribute should have a rel=”nofollow” attribute ○ All links, without exception, should have a title attribute that concisely, within 66 characters, describes the destination page and is consistent with the destination <title> tag ○ All phone numbers must be contained within a link using <a href=”tel:+18008885555” title=”Call 1-800-888-5555” rel=”nofollow”>(800) 888- 5555</a> for mobile compatibility ○ All links, with a priority on internal links, must link to a 200 status code and never to 404, 500, 301 status codes. 302 status codes may be linked to only when linking to content areas that are not to be crawled such as an account administration area. ○ Outbound links that link to non-reputable or potentially non-reputable websites, or potentially temporary content must contain a rel=”nofollow” attribute. ● Headings ○ All headings, without exception, should reside as in-content items. Template items that are repeated across several pages must not reside in a <h> tag. ○ Headings have a parent-child relationship. There is no H2 tag without an H1 tag before it, likewise, there is no H3 tag without a prior H1 and H2 tag. H2 is a subsection of the primary subject, h1, H3 is a subsection of H2.
  • 2. ○ Its possible for long-copy to contain multiple H1 tags. This content must be separated from the other content by an <hr> tag to signify a thematic change in content. ○ H1 must be consistent with the <title> tag ● Forms ○ All forms must contain <fieldset>, <legend> and <label>. The legend may be hidden via CSS. ○ Form labels must contain a for attribute corresponding to it’s <input> counterpart ID. ○ All input,select,textarea tags must contain a tabindex attribute beginning with 1 to signify the order form elements will be selected when a user presses the TAB key on their keyboard. ● Microformats ○ All microformats should be tested in and recognized by the Google Rich Snippets Tool & the Pinterest rich snippet validator http://developers.pinterest.com/rich_pins/validator/ ○ Open Graph ■ All pages must contain: ● og:title ● og:type ● og:image ● og:url ● og:video (In every case as applicable) ● og:audio (In every case as applicable) ■ All open graph properties must conform to the open graph protocol metadata standards and reside within the <head> tag. ○ Breadcrumbs ■ All pages, somes with the index as an exception, must contain shema.org breadcrumb microformats. ■ The HTML used to create the breadcrumb microformats must be an ordered list <ol> ● Example: <ol itemprop="breadcrumb"> <li><a rel="home" href="index" title="title">Pinnacle Cart</a> <span class="divider">&raquo;</span> </li> <li class="active"><strong><a href="#" title="">Features</a></strong></li> </ol> ■ Breadcrumbs must conform to schema.org standards ○ Products ■ All product pages must contain product with as many semantic attributes as available with a priority on aggregateRatings, price, highPrice,
  • 3. lowPrice, brand, Manufacturer, Model, logo, color, itemCondition, sku, weight, width, height ■ Product Reviews ● AggregateRating ● Each review must contain the review schema attribute ■ Related Products ● Related products must contain the isRelatedTo schema attribute for each related product. ■ Similar Products ● Similar products must contain the isRelatedTo schema attribute for each similar product listed on the page. ● Navigation ○ A comprehensive, redundant navigation is critical ■ Header ■ Footer ■ Anchors ■ In-content ● Social Media ○ AddThis.com may be an ideal option depending on the client and is acceptable under our standards. ○ Icons ■ We recommend adding social media icons in a prominent location in the header site-wide. ■ Prioritize social media icons in this order: Facebook, Google+, Twitter, Yelp if applicable ○ Integration ■ Use facebook comments rather than regular HTML comments ■ Include Facebooks “Like”, Pinterests’ “Pinit”, Twitters “Tweet” on product pages. ○ Key pages ■ Social media integrations, calls to action, invitions to join us on our networks should be prominent on both the Contact Us and About Us pages at least. ● About Us ○ We want the best about us page of all time, inclusive of available images, video, press, social media integrations and at least 3 paragraphs with 3 headings ■ Example ● Who are we? ● Our mission statement ● Our commitment ● Contact Us ○ Contact pages must be the best possible contact pages available. ■ Contact pages include: ● Address
  • 4. ● Phone number(s) ● Google Maps widget (if applicable) ● A brief paragraph tag explaining for inviting contact ● One or more clickable mailto: links without @ - Use the actual email address and deal with the spam off-site. ● Frequently Asked Questions ○ Include as many questions & answers as possible. Use logical headings for both the contents of questions and answers. ○ Cover even seemingly obvious questions & answers ○ Include shipping/product questions/answers that are even clearly answered on other areas of the site. ○ Make the FAQ comprehensive ● Privacy & Terms ○ Real websites have privacy & terms. ○ Privacy policies are required by any website that collects data ● Sitemaps ○ XML ■ XML Sitemaps must be valid ● http://www.validome.org/google/ ○ HTML ■ Include HTML sitemap using ordered/unordered lists ● New URLs ○ If the URL’s for existing content change, 301 redirects must be in place to prevent 404 errors. ● www or non-www ○ While officially www/non-www urls are considered a matter of preference, we prefer non-www urls because they do not force a 301 redirect from type-in urls as most users do not begin web addresses with www. ● Title tags ○ Title tags must be under 66 characters, with primary keyword(s) in close proximity to the very beginning of the tag content. ● Meta descriptions ○ Meta descriptions must be under 156 characters, contain relevant keyword(s) and contain a call to action.