Skip to content

SEO best practices

Jump to bottom
linasmatakas edited this page Nov 30, 2015 · 3 revisions

SEO Best Practices

Summary of SEO cheat sheet from moz.com for front-end developers

Note that there are some additional information in the summary that is not presented in cheat sheet pdf.

Language

<html lang="en">
    <head>
        <!--(Specifies Default)-->
        <link rel="alternate" hreflang="x-default" href="http://example.com/" />
        <!--(Specifies Language)-->
        <link rel="alternate" hreflang="de" href="http://example.com/de/" />
        <!--(Specifies Language + Region)-->
        <link rel="alternate" hreflang="de-DE" href="http://example.com/de-de/" />

Mobile

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">

Title

It will be seen in search results and as tab title in the web browser

<head>
    <title>Page Title</title>
  • Less than 512px (50-70 characters)
  • Important keywords near the beginning
<title>Important keyword | Other keyword</title>
  • Leverage Branding, if the brand is known
<!--Brand is not very important-->
<title>Page Title | Brand</title>
<title>Keyword 1 | Keyword 2 | Brand</title>
<!--Brand is important-->
<title>Brand | Keyword 1 | Keyword 2</title>
<!--Especially in home page-->
<title>Brand | Home Page</title>
  • Each title should be unique

Description

It will be seen in search results

<head>
    <meta name="description" content="This is an example">
  • Best under 155 characters
  • Each description should be unique
  • Well written descriptions influence click-through rate

Images

Must have 'alt' attribute, even if it is empty

<img src="/images/frog.png" alt="Frog on the tree"/>
<img src="/images/pointless-shape.png" alt=""/>

Links

<a href="https://www.example.com/webpage.html" rel="nofollow">Keyword in Anchor Text</a>

Pagination

Use rel="next" and rel="prev" in the head section to indicate the relationship between paginated URLs
Google Support about "Pagination"

<!--First Page - https://example.com/article-->
<link rel="next" href="https://example.com/article?pg=2">

<!--Second Page - https://example.com/article?pg=2-->
<link rel="prev" href="https://example.com/article">
<link rel="next" href="https://example.com/article?pg=3">

<!--Final Page - https://example.com/article?pg=3-->
<link rel="prev" href="https://example.com/article?pg=2">

Rich Snippets and Structured Data

Enhance search results and help machines to understand your content
Common Vocabularies: schema.org, datavocabulary.org, microformats.org
Popular Formats: Microdata, RDFa, JSON-LD
why use
schema.org's item types

Rich Snippets Guide from builtvisible.com
itemscope – is an indicator that the content within this element is an item
itemtype – describes what the item is
itemprop – describes each property of the specific item

Breadcrumbs

schema.org's bread crumb list

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/widgets">
        <span itemprop="name">Widgets</span></a>
        <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/widgets/large">
        <span itemprop="name">Large Widgets</span></a>
        <meta itemprop="position" content="2" />
    </li>
</ol>

Review

schema.org's review

<div itemscope itemtype="http://schema.org/Review">
    <div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Book">
        <span itemprop="name">The Art of SEO</span> 
    </div>
    <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
        <span itemprop="ratingValue">5</span>
    </span> 
    stars - <b><span itemprop="name">A good read.</span></b>
    <span itemprop="author">Roger Mozbot</span>
    <span itemprop="reviewBody">The Art of SEO is a good book.</span>
</div>

Common Structured Data Uses

  • Events
  • Business Information
  • Recipes
  • Media Content
  • People
  • Mobile Apps
  • Contact Data
  • Email Markup
Clone this wiki locally