The Web Developer's SEO Cheat Sheet: Important HTML Elements Webmaster Tools Best Practices
Uploaded by
Ningsih SulastriThe Web Developer's SEO Cheat Sheet: Important HTML Elements Webmaster Tools Best Practices
Uploaded by
Ningsih Sulastri- Important HTML Elements
- HTTP Status Codes
- Webmaster Tools
- Important User Agents
- URLs and Best Practices
- Robots Exclusion Standard
- Mobile Best Practices
- Sitemap Syntax
- Important Social Metadata
- Rich Snippets and Structured Data
- Security
- Targeting Multiple Languages
- Sitemap Versioning
- Performance
The Web Developer’s SEO Cheat Sheet Get technical insights
with Moz Pro: [Link]/free
Important HTML Elements
These affect how you show up in search results Best Practices HTTP Status Codes Webmaster Tools
Title Tag • Best between 50–60 characters 200 OK/Success Google Search Console
<head> • Important keywords near the beginning [Link]/search-console/about
<title>Page Title</title> 301 Permanent redirect
</head> • Well-written descriptions influence
click-through rates (CTR) Bing Webmaster Tools
302 Temporary redirect [Link]/toolbox/webmaster
Meta Description Tag • Best around 160 characters 404 Not found
<head> • Each description should be unique Yandex
<meta name="description" 410 Gone (permanently removed) [Link]
content="This is an example."> • Well-written descriptions influence
</head> click-through rates (CTR)
500 Server error
503 Unavailable (retry later)
Image • Providing image height and width improves
page speed Canonicalization Best Practices
<img src="img/[Link]" alt="descrip-
tion of image" width="100" height="100">
Common Duplicate Homepage URLs • Preferred URL = [Link]
• Place the following in <head> section to
[Link]
Hyperlinks Best Practices
indicate preferred URL:
[Link] <link href="[Link] rel=
"canonical" />
Text Link • Use “nofollow” for paid links and [Link]
distrusted content More information at [Link]/canonical
<a href="[Link]
html">Anchor Text</a> [Link]
• Use “sponsored” for sponsored or
compensated links
[Link]
NoFollowed Link • Use “ugc” for links within user-generated
<a href="[Link] content
[Link]" rel="nofollow">
Anchor Text</a>
• For image links, the alt attribute serves as the
anchor text
Image Link
<a href="[Link]
[Link]"><img src="/img/[Link]"
alt="description of image" height="50"
width="100"></a> “URLs” next page
| The Web Developer’s SEO Cheat Sheet | v5.0 | [Link] | Copyright 2020 © Moz, Inc. 1
URLs Best Practices
Common URL Elements • Choose shorter, human-readable URLs with descriptive keywords
h t t p s : // s t o r e . e x a m p l e . c o m / c a t e g o r y / k e y w o r d ? i d = 1 2 3 # t o p • Exclude dynamic parameters when possible (see “Canonicalization” and “Pagination”)
• When possible, place content on the same subdomain to preserve authority
1 2 3 4 5 6 7 8 Recommended: [Link]
Less ideal: [Link]
1. Protocol 2. Subdomain 3. Root domain 4. Top-level domain
5. Subfolder/path 6. Page 7. Parameter 8. Named anchor
Robots Exclusion Standard Best Practices Important User Agents
[Link] • Only Meta Robots and X-Robots-Tag remove For [Link], Robots Meta Tags, and X-Robots-Tag:
Location: [Link] URLs from search results
• Googlebot (can be used as default for most • Baiduspider
• Don’t block CSS or JavaScript files with Google crawlers)
User-agent: googlebot
[Link] • FacebookExternalHit
Disallow: /[Link]
• Googlebot-News
Sitemap: [Link] • Applebot
• Googlebot-Image
More information at [Link]/robotstxt • Slurp
• AdsBot-Google
• Twitterbot
• Mediapartners-Google (Mobile Adsense)
• Rogerbot
X-Robots-Tag Important Parameters or Mediapartners
Location: Sent in the HTTP headers • Dotbot
• Googlebot-Video
• Noindex (do not index)
X-Robots-Tag: noindex
• Wildcard for all robots: *
• Bingbot
• Nofollow (do not follow links)
More information at [Link]/x-robots • Yandexbot
• Noarchive (do not show cache)
...or combine (noindex, nofollow)
Meta Robots
Location: In the HTML <head> If the robots <META> tag is not defined, the
default is "INDEX, FOLLOW"
<meta name="robots" content="[PARAMETER]" />
Don’t block noindex URLs in [Link].
More information at [Link]/x-robots They need to be crawled to be respected.
“Sitemap Syntax” next page
| The Web Developer’s SEO Cheat Sheet | v5.0 | [Link] | Copyright 2020 © Moz, Inc. 2
Sitemap Syntax Important Social Metadata
XML Sitemap Example: Default Location: Sample Meta Tag Template: "Article"
RSS and text sitemaps are also options [Link] Place this data between the <head> tags of your website.
<?xml version="1.0" encoding="UTF-8"?> sitemap: parent tag for each sitemap <!-- Required Open Graph data -->
<urlset xmlns="[Link] <meta property="og:title" content="Developer's Cheat
<url> loc: location of the sitemap Sheet to SEO" />
<loc>[Link] <meta property="og:type" content="article" />
<lastmod>2019-06-04</lastmod> lastmod: the last modified date <meta property="og:image" content="[Link]
</url> com/[Link]" />
</urlset> <meta property="og:url" content="[Link]
* A sitemap cannot contain over 50,000 URLs. com" />
Large websites should use multiple sitemaps <!-- Optional Open Graph data -->
listed under a single sitemap index file. <meta property="og:audio" content="[Link]
com/guide.mp3." />
<meta property="og:description" content="Description
Sitemap Index File Other Common Sitemap Types: here." />
<meta property="og:site_name" content="Your Site
<?xml version="1.0" encoding="UTF-8"?> Name, i.e. Moz" />
• Images <meta property="og:locale" content="en_us" />
<sitemapindex xmlns="[Link]
<sitemap> <meta property="og:video" content="[Link]
• Video
<loc>[Link] com/guide.mp4" />
<lastmod>2019-01-01T18:23:17+00:00</lastmod> • News <meta property="fb:app_id" content="Your FB_APP_ID" />
</sitemap> <!-- Find additional markup on [Link] -->
<sitemap>
<loc>[Link]
* Don't forget to submit your sitemap to Google <!-- Twitter Card data -->
<lastmod>2019-01-01</lastmod>
via Google Search Console. <meta name="twitter:card" content="summary">
</sitemap> <meta name="twitter:site" content="@Moz">
</sitemapindex> <meta name="twitter:title" content="Title of content
(max 70 characters)">
<meta name="twitter:description" content="Descrip-
tion of content">
<meta name="twitter:image" content="[Link]
com/[Link]">
Mobile Best Practices
Best Practices
There are 3 ways to implement a mobile website: • Your mobile version should display the same content as your
desktop site
• Responsive web design (adjusts for screen size) • Page title tags & meta descriptions should remain the same Default to Open Graph
Platforms that support Open Graph protocol include Facebook,
• Dynamic serving (serves different content based on • Use the meta name="viewport" tag in the head of your page Twitter, LinkedIn, and Pinterest.
a user’s device) to tell the browser how to adjust the content.
Separate URLs (different URLs that serve mobile-optimized For example: <meta name="viewport" content= Optimal Image Sizing
content). Not advised. "width=device-width, initial-scale=1.0"> Twitter:
• Minimum 144x144 px
Check to see if your site is mobile-friendly: Increase speed by optimizing the critical rendering path, • No larger than 4096x4096 px or 5MB
[Link]/mobile-friendly using HTTPS & HTTP/2, eliminating render-blocking resources,
removing unused CSS, and deferring offscreen images. Facebook:
• Minimum 600x600 px
More information at [Link]/mobile-seo • Try to use images that are at least 1080 px in width
More information at [Link]/social-meta
| The Web Developer’s SEO Cheat Sheet | v5.0 | [Link] | Copyright 2020 © Moz, Inc. 3
Rich Snippets and Structured Data
Enhance search results and help search engines understand your content.
Common Vocabularies: [Link] Common Structured Data Types:
• Local business • Product
Popular Formats: JSON-LD, RDFa, Microdata
• FAQ page • Article
• Person • Recipes
Breadcrumbs
• How to • QApage
<script type="application/ld+json">
{ More information at [Link]/rich-snippets
"@context": "[Link]
"@type": "BreadcrumbList",
"itemListElement": [
{
<---Repeat markup for additional list items--->
"@type": "ListItem", Security
"position": 1,
"item": {
"@id": "[Link]
"name": "Dinner" } When using target="_blank" to open a link in a new tab, make sure you're implementing
},
<---Additional list items here---> rel="noopener"
}] or
}</script>
rel="noreferrer" to avoid exposing your website to a surface attack.
SSL certificates are table stakes today. Your website must have one.
Reviews
Lighthouse ([Link]/lighthouse) helps to identify these vulnerabilities (and more) in the audit.
<script type="application/ld+json">
{
"@context": "[Link]
"@type": "Review",
"reviewBody": "The restaurant has great ambiance.",
"itemReviewed": {
"@type": "Restaurant",
"name": "Fine Dining Establishment"
},
"reviewRating": {
"@type": "Rating",
"ratingValue": 5,
"worstRating": 1,
"bestRating": 5,
"reviewAspect": "Ambiance"
}
}
</script>
Review stars won’t show up in search results.
“Targeting Multiple Languages” next page
| The Web Developer’s SEO Cheat Sheet | v5.0 | [Link] | Copyright 2020 © Moz, Inc. 4
Targeting Multiple Languages
Help search engines understand your location/language targets.
URL Structures for Country & Language Targeting Popular Languages Popular Regions
ccTLDs (Country-Level Only): [Link] en English US United States
Subdirectories with gTLDS: [Link]/de/ es Spanish GB Great Britain
Subdomains with gTLDS: [Link]/ zh Chinese CN China
hi Hindi IN India
rel="alternate" hreflang="x" ja Japanese JP Japan
Annotate alternate language & region versions of content
More language codes can be found at More region codes can be found at
[Link]/langcodes [Link]/regcodes
HTML version in <head>
Each version must identify all versions, including itself
<link rel="alternate" hreflang="x-default" href="[Link] /> (Specifies
Default)
<link rel="alternate" hreflang="en" href="[Link] /> (Specifies Lan-
guage; English)
<link rel="alternate" hreflang="en-GB" href="[Link] /> (Speci-
fies Language + Region)
Sitemap Version
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="[Link]
xmlns:xhtml="[Link]
<url>
<loc>[Link]
<xhtml:link rel="alternate" hreflang="de" href="[Link] />
<xhtml:link rel="alternate" hreflang="en" href="[Link] />
</url>
<url>
<loc>[Link]
<xhtml:link rel="alternate" hreflang="en" href="[Link] />
<xhtml:link rel="alternate" hreflang="de" href="[Link]
/>
</url>
</urlset>
“Performance” next page
| The Web Developer’s SEO Cheat Sheet | v5.0 | [Link] | Copyright 2020 © Moz, Inc. 5
Performance
Page Speed Image Optimization
The most common culprit of poor page speed is images!
Page Speed Tips:
Image Optimization Tips:
• Compress and minify your code
• Compress your images & experiment with quality settings
• Reduce page redirects
• Remove unnecessary image metadata
• Remove render-blocking JavaScript
• Explore lazy loading
• Use treeshaking
• Leverage SRCSET for different screen sizes
• Leverage browser caching
• Ensure that your images have alt text
• Use a CDN
• Invest in automated tools that can help ensure your image assets will always
• Leverage preconnect, prefetch and preload
be optimized (example: [Link]/imageopt)
• Analyze your critical rendering path performance for additional opportunities
in Chrome Dev Tools.
Test your Page Speed with:
Lighthouse: [Link]/web/tools/lighthouse
PageSpeed Insights: [Link]/speed/pagespeed/insights
Thanks for
GTmetrix: [Link]
WebPageTest: [Link] reading!
Modern JavaScript Sites
JavaScript Tips:
• Keep JavaScript bundles small (especially for mobile devices). Small bundles improve
speed, lower memory usage, and reduce CPU costs.
• Use server-side or pre-rendering to improve site speed, user experience,
and crawler accessibility.
• Stuck with client-side rendering? Try pre-rendering to help Googlebot get a
more immediate HTML snapshot of your page.
• Use Chrome Dev Tools “Performance” tab to test your runtime performance
and network “throttling” to simulate different device capabilities.
Explore Chrome DevTools’ Timeline & JavaScript Profiler to analyze the impact
of your JavaScript.
| The Web Developer’s SEO Cheat Sheet | v5.0 | [Link] | Copyright 2020 © Moz, Inc. 6
You might also like
- Creative Technosoft SEO Services OverviewNo ratings yetCreative Technosoft SEO Services Overview5 pages
- Week Focus Area Key Activities Expected Outcome100% (1)Week Focus Area Key Activities Expected Outcome1 page
- SEO Audit Strategy and Competitor AnalysisNo ratings yetSEO Audit Strategy and Competitor Analysis57 pages
- Topical Authority in Semantic SEO Case StudyNo ratings yetTopical Authority in Semantic SEO Case Study47 pages
- SEO Assessment Proposal for Website GrowthNo ratings yetSEO Assessment Proposal for Website Growth7 pages
- Essential Guide to Search Engine OptimizationNo ratings yetEssential Guide to Search Engine Optimization17 pages
- SEO Audit for Udacity Digital MarketingNo ratings yetSEO Audit for Udacity Digital Marketing26 pages