Scribd
Upload
87 views

The Web Developer's SEO Cheat Sheet

This document provides a cheat sheet for web developers on important SEO elements. It covers on-page meta tags like title tags and meta descriptions, as well as other technical SEO factors like HTTP status codes, webmaster tools, image optimization, hyperlinks, canonicalization, user agents, URLs, and robots.txt files. The cheat sheet aims to educate developers on best practices for these elements to improve a site's search engine optimization and visibility.

Uploaded by

Gfdjd224
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
87 views

The Web Developer's SEO Cheat Sheet

This document provides a cheat sheet for web developers on important SEO elements. It covers on-page meta tags like title tags and meta descriptions, as well as other technical SEO factors like HTTP status codes, webmaster tools, image optimization, hyperlinks, canonicalization, user agents, URLs, and robots.txt files. The cheat sheet aims to educate developers on best practices for these elements to improve a site's search engine optimization and visibility.

Uploaded by

Gfdjd224
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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).

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


<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.
<!-- Required Open Graph data -->
<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" />
<!-- Optional Open Graph data -->
<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.
<!-- Find additional markup on https://ogp.me --> • Use dynamic serving.
<!-- Twitter Card data --> • 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


<?xml version="1.0" encoding="UTF-8"?>
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

You might also like