The Web Developer's SEO Cheat Sheet

WEB DEVELOPER’S
SEO CHEAT SHEET
You live and breathe SEO and can’t understand why others don’t share
the same sense of passion for search optimisation as you.
Sound familiar?
If you are struggling to get your web developers to see why you need a
constant stream of changes and adjustments made to keep one step
ahead of the game when it comes to effective SEO, we have got exactly
what you need.
Whether you need to optimise an on-page SEO element of a website,

such as its title tags and meta descriptions, or you have more technical
SEO issues that need fixing, our simple and straightforward Web
Developer’s SEO Cheat Sheet includes everything you need to know.
IMPORTANT HTML ELEMENTS HTTP STATUS CODES
Affecting how you look in search results, SEO-friendly meta tags HTTP status codes are short messages from the server that get
are a must if you want to increase your click-through rate. tacked onto a website. An invaluable tool when it comes to
Consisting of HTML code, the on-page meta tags you need to know diagnosing and fixing website configuration errors, you typically
about are as follows: only see these codes when something has gone wrong with a web
page.
BEST PRACTICES 200 - OK/Success
TITLE TAG
• Aim for between 50-60 301 - Permanent redirect
characters. 302 - Temporary redirect
<head> • Insert target keywords as early 404 - Not found
<title>Page Title</title> as possible.
</head>
410 - Gone (permanently removed)
• Avoid keyword stuffing.
500 - Server error
• Focus on high-quality writing
503 - Unavailable (retry later)
for maximum CTR.
BEST PRACTICES
META DESCRIPTION TAG
• Aim for 160 characters,
<head> including spaces.
WEBMASTER TOOLS
<meta name="description" • Make sure each description is
Webmaster tools allow you to see how your site is being viewed
content="This is an unique.
by search engines such as Google and can help you to uncover any
example."> • Focus on high-quality writing
for maximum CTR. areas that need fixing.
</head>
Google Search Console

search.google.com/search-console/about
BEST PRACTICES
IMAGE Bing Webmaster Tools
• Improve page loading speeds by
bing.com/toolbox/webmaster
providing image height and
<img src="img/keyword.jpg"
width.
alt=description of image" Yandex
• Always include an alt tag.
width="100" height="100"> webmaster.yandex.com
• Do not overstuff keywords.
HYPERLINKS CANONICALIZATION
Hyperlinks are needed to help users navigate between web pages Canonical tags are used to tell search engines that a specific URL
and websites. Links can point to other web pages, graphics, files, represents the master copy of a web page. Without canonicalization,
sounds, email addresses, and much more. Crucial for SEO, identical or duplicate content can appear on multiple URLs, which in
hyperlinks can increase a site's credibility, increase page views, turn has a negative impact on search engine optimisation.
and improve usability. Common Duplicate Homepage URLs
TEXT LINK
• Chosen URL = https://example.com/
• Add <link href=https://example.com/ rel=”canonical” /> to the
<ahref="https://www.example.com/webpage.html"Anchor Text</a>
<head>section
BEST PRACTICES
• Use "sponsored" for compensated links.
• Use "ugc" for any links used within user-generated content.
IMPORTANT USER AGENTS

NOFOLLOWED LINK
Each search engine identifies itself with a different user agent, and
you can custom your instructions for each one using your robots.txt
<a href="https://www.example.com/webpage.html"
file. There are hundreds of user-agents with some of the most useful
rel="nofollow"> Anchor Text</a>
ones for SEO, including:
BEST PRACTICES • Use "nofollow" for paid links or • Googlebot • Baiduspider

content with low levels of trust. • Googlebot-News • FacebookExternalHit
• Googlebot-Image • Applebot
• AdsBot-Google • Slurp
IMAGE LINK
• Mediapartners-Google • Twitterbot
• Googlebot-Video • Rogerbot
<a href="https://www.example.com/webpage.html"><img
• Bingbot • Dotbot
src="/img/keyword.jpg" alt="description of image" height="50"
• Yandexbot • DuckDuckBot
width="100"></a>
You can choose to block whatever bots you don't want to be able to
BEST PRACTICES • Use "alt" as the anchor text. crawl your site using your robots.txt file.
URLS ROBOTS.TXT BEST PRACTICES
Location:
• Ensure all important pages
URLs are a small ranking factor in SEO that helps search engines https://example.com/robots.txt are crawlable.
to determine a particular web page's relevancy to a search query. • Don't block your site's
There are a number of factors that are related to URLs that can User-agent: googlebot JavaScript and CSS files.
affect your ranking, with two of the most important being length Disallow: /example.html • Use proper capitalisation of
and the addition of keywords. Sitemap: directory, sub-directory, and
https://example.com/sitemap.xml file names.
BEST PRACTICES • Add your sitemap's location
to your robots.text file.
Common URL Elements • Aim for between 50-60
characters
1. Protocol • Add keywords that are
2. Subdomain relevant to the page's topic X-ROBOTS-TAG BEST PRACTICES
3. Root domain • Avoid the use of parameters Location: Sent in the HTTP
• X-Robots-Tag can remove
4. Top-level domain • Do not use spaces, headers URLs from search results.
5. Subfolder/path underscores, or other characters
6. Page • Try to place content on the
X-Robots-Tag: noindex
7. Parameter same subdomain for enhanced
8. Named anchor authority
• Use HTTPS protocol
META ROBOTS BEST PRACTICES
Location: In the HTML <head>
• Meta Robots can remove
URLs from search results.
<meta name="robots" content="
[PARAMETER]" />
ROBOTS EXCLUSION STANDARD
The robots exclusion standard, which is also known as the IMPORTANT PARAMETERS
robots.txt, is a standard used by websites to communicate with
web crawlers. More specifically, it tells web robots where not to • Noindex
scan on a website. This can help your SEO efforts as it cuts down • Nofollow
the amount of time it takes a search engine bot to crawl a site, • Noarchive
helping it to stay within its crawl budget and, in turn, improve a • Or a combination of noindex and nofollow
site's potential ranking.
SITEMAP SYNTAX DEFAULT LOCATION:
https://example.com/sitemap.xml
A sitemap is an integral part of any website and is needed for both
users and search engines. Essentially the structure of your sitemap: parent tag for each sitemap
website, it is similar to a book's contents page, but within the loc: location of the sitemap
sections are links. lastmod: the last modified date
XML SITEMAP EXAMPLE: * A sitemap cannot contain over 50,000 URLs.

RSS and text sitemaps are also options Large websites should use multiple sitemaps listed under a single
sitemap index file.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> COMMON TYPES OF BEST PRACTICES
<url> SITEMAP:
• Prioritise your web pages.
<loc>http://www.example.com/foo.html</loc>
• Visual Sitemap • Categorise your content
<lastmod>2019-06-04</lastmod>
• HTML Sitemap correctly.
</url>
• XML Sitemap • Place your sitemap on your
</urlset>
• Search Engine Sitemap homepage and root directory.
• News Sitemap • Restrict the URLs for each
SITEMAP INDEX FILE sitemap (for medium to large
RSS and text sitemaps are also options businesses only).

<sitemapindex
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap> IMPORTANT SOCIAL METADATA
<loc>https://example.com/sitemap1.xml.gz</loc>
<lastmod>2019-01-01T18:23:17+00:00</lastmod> Social metadata is needed to present your content in the best
</sitemap> possible way on your social media platforms. Rather than allowing
<sitemap> the likes of Facebook, Twitter, and Instagram to guess how you
<loc>https://example.com/sitemap2.xml.gz</loc> want your content to be displayed in social feeds, you can actively
<lastmod>2019-01-01</lastmod> tell them. Although you may not use social media tags as much as
</sitemap> you do basic on-page tags, they can still make a significant
</sitemapindex>set> difference to your overall social media engagement.
SAMPLE META TAG TEMPLATE: "ARTICLE"
BEST PRACTICES
Place this data between the <head> tags of your
website. • Use Open Graph tags on Facebook, Twitter, LinkedIn and Pinterest.
• Use optimal image sizing.

<meta property="og:title" content="Developer's Cheat Twitter = min 144x114 px, max 4096x4096 px
Sheet to SEO" /> Facebook = min 600x600 px
<meta property="og:type" content="article" />
<meta property="og:image" content="https://example. • Preview your page before sharing using tools such as Facebook
com/image.jpg" /> Debugger and Twitter's Card Validator.
<meta property="og:url" content="https://example.
com" />

<meta property="og:audio" content="https://example.
com/guide.mp3." /> MOBILE
<meta property="og:description" content="Description
here." /> Vital if you want to reach a wider audience, a mobile-friendly site
<meta property="og:site_name" content="Your Site is one that automatically scales to fit the screen size of your
Name, i.e. Moz" /> viewer's device. You can check how mobile-friendly your site is
<meta property="og:locale" content="en_us" /> using Google Search Console's Mobile-Friendly Test.
<meta property="og:video" content="https://example. There are three ways to create a mobile website:
com/guide.mp4" />
<meta property="fb:app_id" content="Your FB_APP_ID" /> • Use responsive web design.
 • Use dynamic serving.
 • Use different URLs – this is not advised.
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Moz"> BEST PRACTICES
<meta name="twitter:title" content="Title of content
(max 70 characters)"> • Display the same content on your desktop and mobile site.
<meta name="twitter:description" content="Description of • Keep page title tags and meta descriptions the same.
content"> • Focus on improving your page loading speeds.
• Make your button sizes large enough to work on mobile.
<meta name="twitter:image" content="https://example.
• Ditch text-blocking ads and pop-ups.
com/unique-image.jpg">
• Keep your web design simple.
RICH SNIPPETS AND STRUCTURED DATA REVIEWS
Rich Snippets, which are sometimes called Rich Results, are <script type="application/ld+json">
Google search results that display additional data which is pulled {
from the Structured Data found in a web page's HTML. Rich "@context": "http://schema.org/",
Snippets are more eye-catching than normal search results, which "@type": "Review",
can increase your organic click-through rate. "reviewBody": "The restaurant has great ambiance.",
"itemReviewed": {
The use of structured data can help a website to stand out in "@type": "Restaurant",
SERPs. Stick to schema.org for best results. "name": "Fine Dining Establishment"
},
BREADCRUMBS
"reviewRating": {
"@type": "Rating",
<script type="application/ld+json">
"ratingValue": 5,
{
"worstRating": 1,
"@context": "http://schema.org",
"bestRating": 5,
"@type": "BreadcrumbList",
"reviewAspect": "Ambiance"
"itemListElement": [
}
{
}
<---Repeat markup for additional list items--->
</script>
"@type": "ListItem",
"position": 1,
"item": {
"@id": "http://example.com/dinner",
"name": "Dinner" }
},
SECURITY
<---Additional list items here--->
}]
Making sure your website is secure is crucial for SEO as one of
}</script> Google's top priority ranking factors is website security.
Common Structured Data Types:
BEST PRACTICES
• Local business • Product • Install an SSL certificate.
• FAQ page • Article • Use strong passwords.
• Person • Recipes • Get security plug-ins installed.
• How to • QApage
TARGETING MULTIPLE LANGUAGES SITEMAP VERSION
Multilingual SEO focuses on optimising content for different

languages and allows users in different counties to find your
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
website in their native language. Allowing your site to become
xmlns:xhtml="http://www.w3.org/1999/xhtml">
searchable in new markets, multilingual SEO is a great way to
<url>
expand your business.
<loc>http://example.com/english/</loc>
<xhtml:link rel="alternate" hreflang="de"
URL STRUCTURES FOR COUNTRY & LANGUAGE href="http://example.com/deutsch/" />
<xhtml:link rel="alternate" hreflang="en"
TARGETING
href="http://example.com/english/" />
</url>
ccTLDs (Country-Level Only): example.de <url>
Subdirectories with gTLDS: example.com/de/ <loc>http://example.com/deutsch/</loc>
Subdomains with gTLDS: de.example.com/ <xhtml:link rel="alternate" hreflang="en"
href="http://example.com/english/" />
<xhtml:link rel="alternate" hreflang="de"
href="http://www.example.com/deutsch/"
rel="alternate" hreflang="x"
/>
</url>
Annotate alternate language & region versions of content
</urlset>
HTML version in <head>

Each version must identify all versions, including itself
POPULAR LANGUAGES
<link rel="alternate" hreflang="x-default"
href="http://example.com/" /> (Specifies
en - English US - United States
Default)
es - Spanish GB - Great Britain
<link rel="alternate" hreflang="en" href="http://example.com/en/"
zh - Chinese CN - China
/> (Specifies Language; English)
<link rel="alternate" hreflang="en-GB" hi - Hindi IN - India
href="http://example.com/en-gb/" /> (Specifies Language + Region) ja - Japanese JP - Japan
PERFORMANCE MODERN JAVASCRIPT SITES
The performance of your site is intrinsically linked to your Java-Script is a text-based programming language that allows you
customer experience and is, therefore, crucial if you want to stand to make web pages interactive for enhanced user engagement.
out from your competitors. There are several different aspects of
site performance, including:
BEST PRACTICES
PAGE SPEED • Keep JavaScript bundles small.

• Use server-side or pre-rendering.
Research shows that internet users expect a website to load in • Use Chrome Dev Tools "Performance" tab to test your runtime
under three seconds. Any longer, and they will bounce. Check your performance.
page speed using Google PageSpeed Insights; any score above 80
is regarded as strong, but the higher, the better.
BEST PRACTICES
• Reduce page redirects. IMAGE OPTIMISATION

• Minify CSS, JavaScript and HTML. Images are one of the most common problems when it comes to
• Remove render-blocking JavaScript. site speed.
• Leverage browser caching.
• Improve server response time. BEST PRACTICES
• Use a content distribution network. • Reduce the file size.
• Optimise images. • Pick the right file format for each image.
• Use alt tags.
• Optimise the image title.
• Include captions.
• Explore lazy loading.
TEST YOUR PAGE SPEED WITH:
Lighthouse: developers.google.com/web/tools/lighthouse
PageSpeed Insights: developers.google.com/speed/pagespeed/insights
GTmetrix: gtmetrix.com
WebPageTest: webpagetest.org

The Web Developer's SEO Cheat Sheet

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

The Web Developer's SEO Cheat Sheet

Uploaded by

Copyright:

Available Formats

WEB DEVELOPER’S

SEO CHEAT SHEET

Whether you need to optimise an on-page SEO element of a website,

Google Search Console

IMPORTANT USER AGENTS

BEST PRACTICES • Use "nofollow" for paid links or • Googlebot • Baiduspider

XML SITEMAP EXAMPLE: * A sitemap cannot contain over 50,000 URLs.

<?xml version="1.0" encoding="UTF-8"?>

Multilingual SEO focuses on optimising content for different

HTML version in <head>

PAGE SPEED • Keep JavaScript bundles small.

• Reduce page redirects. IMAGE OPTIMISATION

PageSpeed Insights: developers.google.com/speed/pagespeed/insights

You might also like