SEO On-Page Best Practices

On-Page Elements

SEO ITEMS IN THE <HEAD>

Meta Description

Length: 150-160 characters.

Note: Search engines don’t technically display content based on word count, they instead display items based on pixels. For example, "w" takes up more pixel space than "l". Staying between 150-160 characters at most is best. I shoot for closer to 150 characters when writing meta descriptions.

Keyword Density: Meta description should include keywords in a naturally occurring way. Do not stuff keywords or force a specific phrase to fit based a desire to rank. Write meta descriptions as information-relevant micro content posts.

Duplicate Meta Descriptions: Meta descriptions should not be duplicated across pages. A meta description is not necessary, but it’s an ideal opportunity to optimize organic search results. If a meta description is missing, Google will often self-select content based on the first few lines of content on your page — which aren’t always optimized, especially if the first few lines of your site are the same across the board (example: a tagline or navigational item).

Title

Length: 50-60 characters (fewer is OK)

Title tags appear in the tabbed section of a browser (at the top of the page). They are also important keys to letting search engines know what content should/is contained within the page. Relevant keywords should be included whenever possible. Fathom uses multiple keywords and hierarchical structure to build title tags. For example, a home lending page within a general lending subcategory could be displayed as: Apply for a Home Loan | KeyBank Lending

Open Graph Data

The Open Graph (OG) protocol allows a page to dictate social share items. For example, OG is used by LinkedIn and Facebook, and employing it allows page owners to pre-set images to be shared, as well as the descriptions, titles and URLs that go with it.

More info: http://ogp.me/

Sample Code:

<head prefix="og: http://ogp.me/ns# fb: http://ogp.en/ns/fb# website: http://ogp.me/ns/website#">

<meta property="og:type" content="website" />
<meta property="og:url" content="http://johndaters.com/digital-marketing-blog/domain-level-seo.html" />
<meta property="og:title" content="SEO Best Practices At The Domain Level | JohnDaters.com" />
<meta property="og:description" content="We're outlining critical domain and root-level SEO elements to consider when building a new webpage or website."/>
<meta property="og:image" content="http://www.johndaters.com/digital-marketing-blog/img/post-bg.jpg" />
<meta property="og:site_name" content="JohnDaters.com" />

Twitter Card

Much like Open Graph (OG), Twitter Card protocol allows page owners to pre-set share items for social shares over to Twitter.

More info: https://dev.twitter.com/cards/overview

<head prefix="og: http://ogp.me/ns# fb: http://ogp.en/ns/fb# website: http://ogp.me/ns/website#">

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@liquidohio" />
<meta name="twitter:creator" content="@liquidohio" />
<meta name="twitter:title" content="SEO Best Practices At The Domain Level | JohnDaters.com">
<meta name="twitter:description" content="We're outlining critical domain and root-level SEO elements to consider when building a new webpage or website.">
<meta name="twitter:image" content="http://www.johndaters.com/digital-marketing-blog/img/post-bg.jpg">
<meta name="twitter:url" content="http://johndaters.com/digital-marketing-blog/domain-level-seo.html" />

Canonical

Canonical tags tell search engines which page, among pages with similar or exactly the same content (including URL alternatives like https:// http:// www and non-www), they should serve up to users in the search engine results page.

The canonical tag should be placed on the duplicate page and reference the original page.

Code example:

<link href="http://www.example.com/canonical-version-of-page/" rel="canonical" />

Follow/NoFollow; Index/NoIndex

These relational tags tell search engines whether or not to place the specific coded page within their index of potential search results and/or if you want to allow SEO value to be passed along to sites that link to that specific page.

"NoFollow" is often used on a site’s paid links, within blog comments/user-generated content, embedded third-party content that links back to their site, though there can be other reasons to use it. By default all links are "followed," no if you want to retain SEO value between URLs, no action is needed. All internal links within one’s own website should be "followed."

"NoIndex" is used when you want a page to be viewable by someone using the web, but not found via search engines. For example, if you have an offer page you don’t want someone "stumbling on" via search, add a "noindex" to the page. Also, if you're working in development on a site or page, adding noindex will help keep it from being found within search before you’re ready to launch. If using noindex when to obscure a page from search during development, it’s very important to remember to remove this code when you go live. By default, all pages are index by default. You can add code that makes that more clear, but having “index” is not a necessity, search engines by default will index pages unless explicitly told otherwise.

Code Examples:

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW"> [this is the default setting for all pages, so this version, while correct, is not needed]
<META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">
<META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW">

Schema

Schema allows Webmasters to insert code snippets into a page that then allows search engines to know exactly what kind of content they are looking at. For example, a bank’s phone number and street address may both be comprised of numbers, which may or may not be obvious differentiation to search engines; with schema markup, a Webmaster can specifically indicate the official phone number and a specific address. Schema markup can be applied via Microdata, RDFa or JSON.

Schema can be implemented on page in either the header or the body, depending on schema type.

More information: http://schema.org/

Example: JSON Schema for social property indicators

<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "BankOrCreditUnion",
"name" : "KeyBank",
"url" : "https://www.key.com",
"sameAs" : [ "http://www.facebook.com/keybank",
"http://www.twitter.com/keybank",
"https://www.linkedin.com/company/keybank"]
</script>
}

Example: Microdata Schema for a movie

<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<div itemprop="director" itemscope itemtype="http://schema.org/Person">
Director: James Cameron</span>
(born <time itemprop="birthDate" datetime="1954-08-16">August 16, 1954</time>)
</div>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Schema integration can be used to indicate more than just on-page elements, it can also be used in the following initiatives, among many others:

Mobile/Desktop-equivalent pages
Paginated items
App deep linking

SEO ELEMENTS IN THE <BODY>

Headers

Header tags are used within content to indicate specific sections and sub-sections of content on a page, just like in formatting a Word document. Headers are available from H1–H6, and for SEO purposes, are weighted in descending order, with H1 having the most SEO value, and H6 having the least.

It's important to not abuse header tags by just including everything in H1 tags to increase potential content importance. Search engines view this as a black hat tactic and will penalize sites that nefariously engage in it. Rule of thumb is no more than two H1 tags per page. Relevant keywords should be included in header tags whenever possible — so long as it appears natural and not forced.

Often, brands include their logos as the H1 on every page. For a page or two this may be OK, but it's a lost opportunity to not customize the H1 based on specific page content useful to visitors.

Furthermore, have header tags in ascending order and without any gaps in deployment. (Example: H1, followed by H2, then H3 instead of skipping from H1 to H3 in on-page order.) Skipping header tags is a possible indicator to search engines that content is missing. The higher the tag value, the lower SEO value — if an H3 is used in place of an H2, SEO value is lost.

It's not uncommon for developers to build sites that do not follow the numerical hierarchical order of header tags and jump from something like an H1 to an H3. Usually this is done as a style element — that is, the H3 looks better for their purposes than the style of an H2, so H3 is used in its place.

Custom heading styles should be used whenever possible if a specific header style is needed that does not match header order to ensure downgrading header version is avoided. For example, a H2 tag can be coded via CSS to emulate the design (size, color, etc.) of the desired H3. Usually, these elements are found within the template, so a single CSS change with a div or span reference within the page code can trigger the style change.

Body Copy

Optimal Page Content Length: More than 250 words, and preferably 500-1000.

Write for the user, not for search engines. Long-form content appears to rank better in search engines, but should not be used just to fill space and include a home for keywords. Instead, assure content is not "thin" and actually serves a purpose instead of just trying to optimize for a specific keyword.

Do not duplicate content across multiple pages. Search engines will see this as trying to "game" organic search and may penalize pages/sites for willful duplicate content.

Within-Site Links/Anchor Tags

Links within a site indicate relational structure within a site. These include navigational items, but can also include in-content links. Search engine bots crawl sites by following links, ensuring that important and relevant pages are linked allows bots to draw conclusions about relational content within your site and can pass along SEO value to related sites when related keywords are used in search.

Additionally, while the URL provides an indication of what pages are important and relevant, so too does the anchor text itself. Anchor tags are the clickable part of the link, usually a piece of copy. Anchor information also provides information on what the linked page is about and how it relates to the originating page. While linking brand names or URLs written out can be done, it's best to also use keywords and keyword phrases that provide context into what the link will access. Additionally, it's usually better to link descriptive phrases other than call to action marketing copy. (Example: "View the monthly home mortgage rates" is a better link than "Click Here," which provides no content beyond the URL used in the a href code.)

Keyword Placement/Density

It's important not to over optimize a website by including too many keywords. There's no true mathematical equation to identify number of keywords and keyword variations to use per word count on page, but a few targeted, naturally placed keywords per page will clue in search engines into the relevance of your page as it relates to user term searched.

The key is to write for the user, and incorporating targeted and semantic keywords helps the user match their search, but keywords should NOT be forced into content. Quality content with a few well-placed and well-researched exact match and related keywords should be the strategy for content optimization.

As a point of fact, bots usually stop a crawl of internal links on a page at 150. This includes navigational links that repeat throughout the site.

Furthermore, links should be native to the page and not generated via dynamic content, which is often obscured to bots, since they don't truly interact with a page to get items to "appear."

Images

Pages with images are more often indexed by search engines and more often shared via social media.

Images often are the main culprit in slowing page load times. Everything should be done to ensure images are saved for quick load. Additionally, search engines are unable to view content of images. Webmasters need to provide search engines with cues as to what the image contains.

Alt tags should be used to give screen readers and bots. Alt tags need to be short and descriptive — use relevant keywords, but do not over stuff. Title tags can be used, but often can be clunky as they provide hover text, which can be obtrusive to users. Use title tags sparingly.

Additionally, file names provide additional information to bots about the context of the image. Only use hyphens between words when naming files. File names should be short, descriptive and contain keywords where possible.

To optimize images, ensure they are saved at 72 dpi, at the smallest file size possible without losing quality — usually no more than 100kb. Images should be saved and uploaded at the dimensions to be used within the page. JPGS are standard image file types, but GIF and PNG are among other acceptable file types.