<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SEO Cheat Sheet by 9elements</title>
<meta name="description" content="A sorted list that provides technical On-Page SEO best practices.">
<meta property="og:title" content="SEO Cheat Sheet by 9elements" />
<meta property="twitter:title" content="SEO Cheat Sheet by 9elements" />
<meta property="og:image" content="https://9elements.com/seo-cheat-sheet/src/img/seo-cheat-sheet.png">
<meta property="twitter:image:src" content="https://9elements.com/seo-cheat-sheet/src/img/seo-cheat-sheet.png">
<meta property="og:description" content="A sorted list that provides technical On-Page SEO best practices.">
<meta property="twitter:description" content="A sorted list that provides technical On-Page SEO best practices.">
<meta property="og:url" content="https://9elements.com/seo-cheat-sheet/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@dahfab">
<meta name="twitter:label1" value="Made with ❤">
<meta name="twitter:data1" value="in Bochum by 9elements">
<link rel="icon" href="src/img/favicon.svg" type="image/png" />
<link href="https://fonts.googleapis.com/css?family=Audiowide|Fira+Code|Fira+Sans:300,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="src/css/main.css">
<script src="src/js/cookies-eu-banner.js"></script>
</head>
<body>
<div class="t-keyvisual">
<div class="t-keyvisual__body">
<h1 class="t-keyvisual__title">
SEO
<span class="t-keyvisual__subtitle">Cheat Sheet</span>
</h1>
</div>
<div class="t-keyvisual__decoration"></div>
</div>
<div class="t-intro">
<p>
When it comes to SEO there are a lot of things you need to consider
to keep your website up to date. This tool aims to help you with
the technical side of On-Page SEO and includes a sorted list of best practices.
And since I know that you're a busy person, I tried to implement them in
a TL;DR way.
</p>
<p>
For questions or suggestions for improvement, find me on <a href="https://www.linkedin.com/in/fabian-dahlke/">LinkedIn</a>.<br />
And last but not least…if you like the little Astronaut, we made some <a href="#wallpapers">Wallpapers</a>.
</p>
</div>
<div class="t-page-layout">
<a id="page-navigation"></a>
<aside class="t-page-layout__sidebar">
<nav class="t-main-nav" id="main-nav" aria-label="main">
<ul class="t-main-nav__list">
<li class="t-main-nav__item">
<a class="t-main-nav__link" href="#standard-blocks">HTML Tags</a>
<ul class="t-main-nav__list t-main-nav__list--second">
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#title+tag">Title Tag</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#meta+description+tag">Meta Description Tag</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#heading+tag">Heading Tag</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#alt+tag">Alt Tag</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#canonical+tag">Canonical Tag</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#open+graph+tag">Open Graph Tag</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#responsive+site+meta+tag">Responsive Site Meta Tag</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#robots+tag">Robots Tag</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#hreflang+tag">Hreflang Tag</a></li>
</ul>
</li>
<li class="t-main-nav__item">
<a class="t-main-nav__link" href="#form-blocks">Structure</a>
<ul class="t-main-nav__list t-main-nav__list--second">
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#html+structure">HTML Structure</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#structured+data">Structured Data</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#url+structure">URL Structure</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#redirection">Redirection</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#internal+linking">Internal Linking</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#xml+sitemaps">XML Sitemaps</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#nap">NAP</a></li>
</ul>
</li>
<li class="t-main-nav__item">
<a class="t-main-nav__link" href="#layout-blocks">Extra</a>
<ul class="t-main-nav__list t-main-nav__list--second">
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#page+speed">Page Speed</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#featured+snippets">Featured Snippets</a></li>
<li class="t-main-nav__item"><a class="t-main-nav__link" href="#javascript+frameworks">JavaScript Frameworks</a></li>
</ul>
</li>
<li class="t-main-nav__item">
<a href="#tools" class="t-main-nav__link">Useful Tools</a>
</li>
<li class="t-main-nav__item">
<a href="#links" class="t-main-nav__link">Further Reading</a>
</li>
</ul>
</nav>
</aside>
<main class="t-page-layout__main" id="main">
<div class="t-section">
<h2 class="t-section__headline" id="standard-blocks">HTML Tags</h2>
<p class="t-section__intro">
Even though the term "tag" is not 100% correct
in many places (some tags should correctly be
called "elements" or "attributes"), we use this
term because most people tend to look for tags rather than
the correct technical terms.
</p>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="title+tag"></a>
<h3 class="t-card__headline" omit>Title Tag<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>Perhaps the most underrated but also most important tag of them all. Every page should have a unique title tag and include relevant keywords for that specific site.</p>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span></span><br><span class="highlight-line">Website.com - About</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span> </span><br><span class="highlight-line">Primary Keyword – Secondary Keyword | Brand Name</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span></span></code></pre>
<ol>
<li>Order matters. The first word in the title has more “power” than the last one.</li>
<li>Always ask yourself: what’s the most relevant Keyword for this page?</li>
<li>Get creative. Indeed, one of the largest job searches on the web includes dynamic dates into their titles to always stay relevant.</li>
</ol>
<img src="https://9elements.com/seo-cheat-sheet/src/img/indeed.png" alt="Indeed dynamic title tag"/>
<ol start="4">
<li>If it’s your index page switch the order to:</li>
</ol>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span></span><br><span class="highlight-line">Brand Name – Relevant Keywords for your Page</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span></span></code></pre>
<p>Because you want your main page to rank for your brand name.</p>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="meta+description+tag"></a>
<h3 class="t-card__headline" omit>Meta Description Tag<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>Meta descriptions have no direct impact on your SEO rankings. Nevertheless they are very important for good click-through rates on your search results.</p>
<ol>
<li>The recommended length is between 50 and 160 characters.</li>
<li>It’s the place where you should “advertise” your content for potential visitors. Write compelling ad-copy.</li>
<li>Use keywords that are specific to that page. Don’t overuse them.</li>
<li>As with title tags, generate a unique description for every page and avoid duplicate description tags.</li>
</ol>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="heading+tag"></a>
<h3 class="t-card__headline" omit>Heading Tag<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>You know, heading tags are those <code><h1></code> to <code><h6></code> things which should be used on every title in your website. They are important for SEO as well as for usability. A few things to keep in mind while using them:</p>
<ol>
<li>Make sure that every page of your website has one <code><h1></h1></code> tag. Only one, but this one is a must have.</li>
<li>Make it relevant to your page content and use keywords that describe that page.</li>
<li>Use heading tags in order to correctly structure your content for your visitors. This is also important for <a href="#featured+snippets">featured snippets</a>.</li>
</ol>
<p>Good structure:</p>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Main Heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Secondary Heading 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Sub-section of the secondary heading 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Secondary Heading 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Sub-section of the secondary heading 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span></span></code></pre>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="alt+tag"></a>
<h3 class="t-card__headline" omit>Alt Tag<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>Every image on your website should have an alt attribute. A lot of people tend to oversee them but they are actually pretty important for image SEO. If you use them properly a lot of users will find you through Google’s image search.</p>
<ol>
<li>If you can picture the image in your head when someone reads the alt text to you without you seeing the image, then you have a good one.</li>
<li>Keep it relatively short but very descriptive.</li>
<li>Avoid keyword stuffing – c’mon it’s 2020.</li>
<li>Don’t use “image of” or “picture of”</li>
<li>End the alt-text with a period. This will make screen readers pause a bit after the last word in the alt-text, which creates a more pleasant reading experience for the user.</li>
</ol>
<img src="https://9elements.com/seo-cheat-sheet/src/img/escalator.jpg" alt="man with headphones walking down escalator"/>
<pre class="language-html"><code class="language-html"><span class="highlight-line">Bad alt text:</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>escalator.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"></span><br><span class="highlight-line">Okay alt text: </span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>escalator.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>man on escalator<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"></span><br><span class="highlight-line">Better alt text: </span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>escalator.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>man walking on escalator<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><br><span class="highlight-line"></span><br><span class="highlight-line">Best alt text: </span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>escalator.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>man with headphones walking down escalator<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span></code></pre>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="canonical+tag"></a>
<h3 class="t-card__headline" omit>Canonical Tag<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>A canonical tag is a way of pointing Google to the master copy of a specific page. Using it correctly generally prevents problems with “duplicate content" and potential ranking losses.</p>
<ol>
<li>The canonical tag can point to the current URL. If page A is your master copy you can also include the URL for page A into the canonical tag of page A.</li>
<li>Bad code can sometimes lead to problems like different tags for every version of the same URL. Check all of your pages and make sure that this is not the case.</li>
<li>In order to prevent problems Include a canonical tag into your index page.</li>
</ol>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span>”canonical”</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span>”https://myhomepage.com”</span> <span class="token punctuation">/></span></span></span></code></pre>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="open+graph+tag"></a>
<h3 class="t-card__headline" omit>Open Graph Tag<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>Open Graph tags are a way of formatting your content for correct output on Social Media sites like Facebook and Twitter. It’s not so much a ranking factor than it’s a conversion factor but in any way it’s important in 2020 and beyond.</p>
<ol>
<li>A lot of platforms do have their very own structures and because of this it’s very difficult to list all of them in a short way. Therefore we would recommend checking out <a href="https://moz.com/blog/meta-data-templates-123">this article</a> by Cyrus Shepard in which he includes some great templates for you to copy.</li>
</ol>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="responsive+site+meta+tag"></a>
<h3 class="t-card__headline" omit>Responsive Site Meta Tag<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>Google introduced mobile first indexing in 2018 and since then has evaluated search results exclusively based on the information found on the mobile version of a website. Therefore mobile friendliness should be a top priority for every website.</p>
<ol>
<li>Responsive site meta tags let search engines know that this site has a responsive design available. Include it to make sure your site is surfaced when searching through mobile devices.</li>
<li>If you want to check if your site is mobile friendly go to: <a href="https://search.google.com/test/mobile-friendly">Google's mobile-firiendliness-check</a></li>
<li>Include this tag as a bare minimum for mobile friendliness:</li>
</ol>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><meta name=”viewport” content=”width=device-width, initial-scale=1” /></span></code></pre>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="robots+tag"></a>
<h3 class="t-card__headline" omit>Robots Tag<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>Robots meta directives are pieces of code that provide crawlers recommendations for how to crawl or index web page content. On the other hand there are robots.txt file directives which give crawlers recommendations for how to crawl a website’s pages.</p>
<ol>
<li>The included parameters are only suggestions. Especially malicious robots may decide to ignore these suggestions.</li>
<li>For sensitive or private data use more secure mechanisms like password protection to prevent them from being indexed.</li>
<li>If you don’t want a page to get indexed use a robots meta directive with “noindex, follow” instead of the robots.txt version.</li>
</ol>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span>”robots”</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span>”noindex,</span> <span class="token attr-name">follow”</span> <span class="token punctuation">/></span></span></span></code></pre>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="hreflang+tag"></a>
<h3 class="t-card__headline" omit>Hreflang Tag<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>With the hreflang attribute you can tell Google which language you are using on any given page of your website. This may not directly benefit your rankings but will help search engines serving users the right content.</p>
<ol>
<li>You can place the hreflang attribute in 3 different locations: on-page markup, HTTP header or in the sitemap. Use only one of those locations.</li>
<li>Every hreflang attribute should include a reference to itself as well as to all pages that serve as alternates for it.</li>
<li>Use it in the following way:</li>
</ol>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>alternate<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://myhomepage.com<span class="token punctuation">"</span></span> <span class="token attr-name">hreflang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en-en<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>alternate<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https:// myhomepage.com/de/<span class="token punctuation">"</span></span> <span class="token attr-name">hreflang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>de-de<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>alternate<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https:// myhomepage.com/fr/<span class="token punctuation">"</span></span> <span class="token attr-name">hreflang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fr-fr<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span></code></pre>
</div>
</div>
</article>
</div>
<div class="t-section">
<h2 class="t-section__headline" id="form-blocks">Structure</h2>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="html+structure"></a>
<h3 class="t-card__headline" omit>HTML Structure<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>Nowadays a semantic HTML structure is a must for every web page. It helps search engines evaluate the given content and correctly serve it to its users. See it as the backbone of your website on which every other SEO is based upon.</p>
<ol>
<li>Correctly use and implement all of the mentioned HTML tags on this page.</li>
<li>Not every element should be a <code><div></code>. Make use of every section element available – like <code><section></code>, <code><nav></code>, <code><article></code>, <code><aside></code> or <code><footer></code></li>
<li>Correctly structuring your HTML base will make the difference between you showing up in Google’s featured snippets or not showing up at all.</li>
<li>Implement a table of contents on every blog post or article. This will help you to get <a href="#featured+snippets">featured snippets</a> as well.</li>
</ol>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="structured+data"></a>
<h3 class="t-card__headline" omit>Structured Data<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>Structured data is a library of fields that help you improve the way search engines represent your website in their search results. I would highly recommend implementing this on your page.</p>
<ol>
<li>Google recommends using the JSON-LD format for structured data.
Place the structured data code inside the <code><head></head></code> element of your page.</li>
<li>Use <a href="https://technicalseo.com/tools/schema-markup-generator/">this generator</a> to generate structured data for your site.</li>
<li>Use <a href="https://search.google.com/structured-data/testing-tool/u/0/">this tool</a> to check if you correctly implemented it.</li>
<li>If you want to learn more about structured data go to the <a href="https://developers.google.com/search/docs/data-types/article">Google documentation</a>.</li>
</ol>
<pre><code>Example:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Corporation",
"name": "9elements",
"url": "https://9elements.com/",
"logo": "https://9elements.com/img/logo.png",
"sameAs": [
"https://www.facebook.com/9elements/",
"https://twitter.com/9elements",
"https://www.instagram.com/9elements/",
"https://www.linkedin.com/company/3848376/"
]
}
</script>
</code></pre>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="url+structure"></a>
<h3 class="t-card__headline" omit>URL Structure<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>URLs are the human readable version of our IP addresses and search engines use them to determine the relevance of a particular page to a search query. Therefore they are pretty important for SEO.</p>
<ol>
<li>Keep them short, relevant and compelling. If possible only use words in them.</li>
<li>When a user (or search engine) reads them, they should know what to expect on that site.</li>
<li>Only use hyphens to separate words.</li>
<li>Only use lowercase letters to prevent problems.</li>
<li>Keep them as short as possible. Research indicates that this can benefit your search rankings.</li>
</ol>
<pre class="language-html"><code class="language-html"><span class="highlight-line">Bad URL: </span><br><span class="highlight-line">https://www.myhomepage.com/title/2379118/?ref_=ttep_ep1</span><br><span class="highlight-line"></span><br><span class="highlight-line">Good URL: </span><br><span class="highlight-line">https://www.myhomepage.com/blog/technical-seo-for-beginners/</span></code></pre>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="redirection"></a>
<h3 class="t-card__headline" omit>Redirection<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>Sometimes your URLs will change or no longer exist. Redirection is the process of forwarding one URL to a different one. Doing this correctly can benefit the overall health of your website.</p>
<ol>
<li>Use the 301 “moved permanently” HTTP status code in order to redirect URLs while still passing along up to 99% of your former link equity.</li>
<li>Even if there are other status codes like 302 “moved temporarily” it’s best advised to still use 301 instead.</li>
</ol>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="internal+linking"></a>
<h3 class="t-card__headline" omit>Internal Linking<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>Internal linking is an important way to make the job of a search engine crawler a whole lot easier. It not only helps them to find every subpage of your website but also makes sure that you can rank for every piece of content on your site.</p>
<ol>
<li>Understand that links pass on their link value (ranking strength). Mostly your index page is the most valuable and if you link from here to other pages these pages will have more ranking strength then if you just link to them from a category page for example.</li>
<li>Don’t hide any pages from being accessed via internal linking. It helps them to rank even better.</li>
<li>Hiding can happen accidentally. Common mistakes are:
<ol>
<li><strong>Links are generated via unparseable JavaScript</strong><br>
Make sure that every link on your site is, in the end, a standard HTML link</li>
<li><strong>Links are only accessible through search</strong><br>
A crawler won’t make an effort to use the search on your website. If you hide pages behind searches you will likely not rank for them.</li>
<li><strong>To many links</strong><br>
If your site needs to have a lot of links it’s recommended to stay under 150 links per page because the crawler will not go on forever.</li>
</ol>
</li>
<li>Make sure that you don’t link to pages that are blocked from being crawled by the robots.txt or robots meta tag.</li>
</ol>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="xml+sitemaps"></a>
<h3 class="t-card__headline" omit>XML Sitemaps<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>XML Sitemaps are a way of telling search engines which pages on your site you find worthy indexing and to include all of them into a single file which you can then upload into the <a href="https://search.google.com/search-console/">Google Search Console</a>. Sitemaps have a few pros and cons and we would recommend the following:</p>
<ol>
<li>Sites which normally would not have been indexed can get indexed when you include them into a sitemap. This can hide structural problems of your website so be careful.</li>
<li>We wouldn’t recommend them for new websites. If you don’t use them you can discover structural problems if there are any.</li>
<li>If you block sites in your robots.txt don’t include them into sitemaps.</li>
<li>If your site has a lot of pages, use dynamic sitemaps.</li>
</ol>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="nap"></a>
<h3 class="t-card__headline" omit>NAP<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>NAP stands for <strong>name, address and phone number</strong>. Do you have a local store or business? Then NAP is important for you. Google takes this data into account when it comes to geo-targeted searches.</p>
<ol>
<li>Make sure to implement your NAP data into your website. It is recommended to do so by writing it into the footer.</li>
<li>Make sure that the data is always up to date in order to prevent false information in search results.</li>
<li>Claim your <a href="https://www.google.com/business/">Google My Business</a> listings and make sure to update it with the correct NAP data.</li>
<li>Also include NAP into your <a href="#structured+data">sturctured data</a> code.</li>
</ol>
</div>
</div>
</article>
</div>
<div class="t-section">
<h2 class="t-section__headline" id="layout-blocks">Extra</h2>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="page+speed"></a>
<h3 class="t-card__headline" omit>Page Speed<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>In 2018 Google officially made page speed one of their ranking factors. In a world where attention is hard to get and even harder to keep, every second counts. Make sure your site is equipped for years to come by focusing on page speed.</p>
<ol>
<li>One of the most issues with page speed is caused by unoptimized images. Make sure that every image is optimized for file size and use tools like <a href="https://tinypng.com/">TinyPNG</a> to do so.</li>
<li>Whenever possible implement lazy loading into your page setup. This ensures that your images (and other contents) only load if necessary.</li>
<li>Minify CSS, JavaScript and HTML. Optimizing your code can work wonders.</li>
<li>Leverage browser caching. An effective caching strategy can improve your page speed a lot.</li>
<li>Use a CDN (Content Delivery Network) to serve your site more quickly depending on the location of your user.</li>
<li>There are many more ways how you can improve page speed but the above are the most common ones.</li>
</ol>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="featured+snippets"></a>
<h3 class="t-card__headline" omit>Featured Snippets<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>Featured snippets are Google’s way of directly displaying answers to search queries right within their results, without you needing to visit a website. They are very eye-catching and only one result can get a featured snippet.</p>
<ol>
<li>Featured snippets are especially interesting when it comes to voice search. If you search via voice only the snippet position will be evaluated thus making it highly relevant for upcoming years.</li>
<li>Unfortunately <strong>only Google decides</strong> which page is eligible for featured snippets.</li>
<li>If you follow every recommendation on this page you will have a great chance to get featured snippets as well.</li>
<li>The most important part is to answer a question in a very short, precise and structured way.</li>
<li>Right now there are 3 types of snippets: text, video and table.</li>
</ol>
<p>Text Snippet:</p>
<img src="https://9elements.com/seo-cheat-sheet/src/img/text-snippet.png" alt="Google featured text snippet"/>
<p>Video Snippet:</p>
<img src="https://9elements.com/seo-cheat-sheet/src/img/video-snippet.png" alt="Google featured video snippet"/>
<p>List Snippet:</p>
<img src="https://9elements.com/seo-cheat-sheet/src/img/list-snippet.png" alt="Google featured list snippet"/>
</div>
</div>
</article>
<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="javascript+frameworks"></a>
<h3 class="t-card__headline" omit>JavaScript Frameworks<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>
<div class="t-card__body">
<div class="seo-item">
<p>A lot of sites today leverage the possibilities and conveniences that modern JavaScript frameworks like React, Angular, or Vue have to offer. Building sites with those frameworks only has one major issue for SEO – they don’t render a “normal” HTML structure as you would need for search crawlers to read your site correctly.</p>
<ol>
<li>Again there are many ways in how you could handle these issues. We will only scratch the surface here.</li>
<li>When it comes to SEO, always go for <strong>Server Side Rendering (SSR)</strong>. This enables Google to see a fully SEO optimized page in the initial crawl.</li>
<li>If you want to dive deeper into the topic of SEO and JavaScript frameworks, <a href="https://dev.to/jbobbink/what-i-learned-about-seo-from-using-the-10-most-used-js-frameworks-4alk">this article</a> by Jan-Willem Bobbink is a good start.</li>
</ol>
</div>
</div>
</article>
</div>
<div class="t-section">
<h2 class="t-section__headline" id="tools">Useful Tools</h2>
<ul class="t-link-list">
<li class="t-link-list__item">
<a href="https://www.sistrix.de/" class="t-link-list__link">Sistrix - Germany’s leading SEO tool</a>
</li>
<li class="t-link-list__item">
<a href="https://ahrefs.com/" class="t-link-list__link">Ahrefs - One of the most known SEO tools out there</a>
</li>
<li class="t-link-list__item">
<a href="https://moz.com/" class="t-link-list__link">Moz - Also right up there with Ahrefs and Sistrix</a>
</li>
<li class="t-link-list__item">
<a href="https://sparktoro.com/" class="t-link-list__link">SparkToro - Just started recently and a great tool for audience insights</a>
</li>
<li class="t-link-list__item">
<a href="https://neilpatel.com/ubersuggest/" class="t-link-list__link">Ubersuggest - Free Keyword tool</a>
</li>
<li class="t-link-list__item">
<a href="https://kwfinder.com/" class="t-link-list__link">KWFinder - More advanced keyword tool</a>
</li>
<li class="t-link-list__item">
<a href="https://www.semrush.com/" class="t-link-list__link">Semrush - Great tool for content analysis</a>
</li>
<li class="t-link-list__item">
<a href="https://developers.google.com/speed/pagespeed/insights/" class="t-link-list__link">Google Pagespeed Insights - Check how your page performs</a>
</li>
<li class="t-link-list__item">
<a href="https://search.google.com/test/mobile-friendly" class="t-link-list__link">Google’s Mobile Friendly Test - Check if you’re ready for mobile</a>
</li>
<li class="t-link-list__item">
<a href="https://trends.google.de/trends/" class="t-link-list__link">Google Trends - Discover emerging trends</a>
</li>
<li class="t-link-list__item">
<a href="https://www.screamingfrog.co.uk/" class="t-link-list__link">ScreamingFrog - Tool for technical SEO audits</a>
</li>
</ul>
</div>
<div class="t-section">
<h2 class="t-section__headline" id="links">Further Reading</h2>
<p class="t-section__intro">
SEO can be a pretty difficult topic and a lot of knowledge is already out there for free. Here are our top reading recommendations if you want to learn more:
</p>
<ul class="t-link-list">
<li class="t-link-list__item">
<a href="https://moz.com/blog" class="t-link-list__link">The MOZ Blog</a> – by MOZ
</li>
<li class="t-link-list__item">
<a href="https://ahrefs.com/blog/" class="t-link-list__link">The Ahrefs Blog</a> – by Ahrefs
</li>
<li class="t-link-list__item">
<a href="https://backlinko.com/blog" class="t-link-list__link">Backlinko Blog</a> – by Brian Dean
</li>
<li class="t-link-list__item">
<a href="https://neilpatel.com/blog/" class="t-link-list__link">Neil Patel Blog</a> – by Neil Patel
</li>
</ul>
</div>
<div class="t-section">
<h2 class="t-section__headline" id="wallpapers">Wallpapers</h2>
<p class="t-section__intro">OK, you can't get enough of the super cute astronaut? No problem. Just download one of the wallpapers for your smartphone or desktop.</p>
<h3 class="t-section__subline">Desktop</h3>
<p class="t-section__intro">
<a href="src/img/wallpaper/1024x768.png" target="_blank">1024x768</a>,
<a href="src/img/wallpaper/1024x1024.png" target="_blank">1024x1024</a>,
<a href="src/img/wallpaper/1280x720.png" target="_blank">1280x720</a>,
<a href="src/img/wallpaper/1280x800.png" target="_blank">1280x800</a>,
<a href="src/img/wallpaper/1280x960.png" target="_blank">1280x960</a>,
<a href="src/img/wallpaper/1280x1024.png" target="_blank">1280x1024</a>,
<a href="src/img/wallpaper/1366x768.png" target="_blank">1366x768</a>,
<a href="src/img/wallpaper/1400x1050.png" target="_blank">1400x1050</a>,
<a href="src/img/wallpaper/1440x900.png" target="_blank">1440x900</a>,
<a href="src/img/wallpaper/1600x1200.png" target="_blank">1600x1200</a>,
<a href="src/img/wallpaper/1680x1050.png" target="_blank">1680x1050</a>,
<a href="src/img/wallpaper/1680x1200.png" target="_blank">1680x1200</a>,
<a href="src/img/wallpaper/1920x1080.png" target="_blank">1920x1080</a>,
<a href="src/img/wallpaper/1920x1200.png" target="_blank">1920x1200</a>,
<a href="src/img/wallpaper/1920x1440.png" target="_blank">1920x1440</a>,
<a href="src/img/wallpaper/2560x1440.png" target="_blank">2560x1440</a>,
<a href="src/img/wallpaper/3440x1440.png" target="_blank">3440x1440</a>
</p>
<h3 class="t-section__subline">Smartphone</h3>
<p class="t-section__intro">
<a href="src/img/wallpaper/1080x2160.png" target="_blank">1080x2160</a>,
<a href="src/img/wallpaper/1080x1920.png" target="_blank">1080x1920</a>,
<a href="src/img/wallpaper/1125x2436.png" target="_blank">1125x2436</a>
</p>
</div>
</main>
</div>
<footer class="footer" aria-label="footer">
<a href="https://www.9elements.com/contact" class="company-link" target="_blank">
<span class="company-link__label">We're open for business</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206 40">
<path fill="currentColor" d="M40.2 0v40H0V0h40.2zm-12 28.1l-.7.1H25l-8.6.1H15a29.1 29.1 0 00-4.1-.2l-.2.1-.1.5.1.2-.1.3v1.2l.2.2v.1h.2l.7.1H14l.5.1a114.7 114.7 0 006 0h.5a22.5 22.5 0 003 0 38.8 38.8 0 003.5-.3h.4l.9-.2c.1 0 .2 0 .2-.2h.3s.1-.4 0-.4H29l-.1-.3c0-.1.7-.2.3-.2l.4-.2s-.3-.3-.5-.3c0-.2.6-.2.4-.3h-.1c-.8 0 .3-.1.5-.2l-.7-.1H28.4h-.1zm170.6-16.4c5.6 0 6.7 3.7 7 5.2v.2h-4c-.3-1.4-1.2-2-2.8-2-.7 0-1.3 0-1.7.3-.5.3-.7.8-.7 1.3 0 1 .7 1.4 1.8 1.6l2.5.6c3.5.7 5 2.1 5 4.6 0 3.3-2.7 5.3-6.9 5.3-2 0-3.7-.4-5-1.3a5.7 5.7 0 01-2.4-4V23h4c.3 1.5 1.6 2.4 3.5 2.4 1.6 0 2.4-.6 2.4-1.5 0-.8-.5-1.2-1.6-1.5h-.2l-2.7-.6c-3.3-.7-4.8-2.3-4.8-4.8 0-1.6.7-3 1.8-4 1.2-.9 2.8-1.4 4.8-1.4zm-39.6.4l8.1 9.4v-9.4h4v16.4h-3.1l-8-9.2v9.2h-4V12.1h3zm-7.1 0v3.4h-8.4v3.2h7.3v3.4h-7.3v3h8.4v3.4h-12.4V12.1H152zm-62.8 0v13h8.2v3.4H85.3V12.1h4zm-8 0v3.4h-8.5v3.2h7.4v3.4h-7.4v3h8.4v3.4H68.8V12.1h12.4zm108 0v3.5H184v12.9h-4V15.6h-5.3v-3.5h14.6zm-76 0v3.4H105v3.2h7.3v3.4H105v3h8.4v3.4H101V12.1h12.4zm-55-.4a7 7 0 014.9 1.8 5.7 5.7 0 011.8 4.2c0 1.2-.5 2.5-1.4 4l-4.3 6.8h-4.5l3.1-5c-3.7-.1-6.2-2.5-6.2-5.7 0-3.5 2.8-6 6.6-6zm62 .4l6 8.9 5.9-8.9h3v16.4h-4V20l-3.8 5.9h-2.2l-3.9-5.9v8.5h-4V12.1h3zM29 9.3l-.3.1-.2.1-1 .5-.5.3-.8.5-.5.3-.4.2-.8.5-1.4 1-1 .7c-.2 0-.4.2-.5.3l-.6.4-.5.4-1 .6-.1.2c-1.4-1.2-2.8-2.2-4.2-3.5l-2-1.7-.3-.3-.4-.3h-.2c-.3 0-1 1.1-1 1-.2.3-.7.7-.6 1 0 .4.5.9 1 1.2l.3.2c.7.6 1.4 1 2.1 1.7l1 .8.8.7 1.2 1-.6.5-.7.6-1.6 1.3-.3.4-.7.5-.4.4c-.2 0-.3.2-.4.3l-.5.4-.8.7v.1l-.2.3v.3l.1.5c.1.3.2.5.1.8 0 .4.3.8.4.9l.2.2h.1v.1h.3v-.1l.2-.2h.1l.2-.2c.4-.4-.4.2-.2 0l1.2-1.1 1-1 1.5-1.2.3-.2v.1l1-.8.8-.7.2-.2.7-.5.3-.2.5.4.7.7.4.3.2.2.2.1-.6-.6c.3 0 1.7 1.3 1.9 1.5 0-.2.4 0 .7.3l.2.2 1.9 1.6v-.1l-.1-.1-.3-.4c.5.2.8.7 1.2 1V24l.3.2h.2l.4.3c.5.2 1 .7 1.4 1-.2-.2-.6-.5-.7-.8a21 21 0 00-1.5-1.4c.4-.2.6.5.9.4l-.3-.2c.2 0 .5.4.5.4l.3.2.4.2v.1c.3.2.8.7 1 .7L29 25l.8.6v-.2l.4.4c.1-.2-1.1-1.1-1.2-1.2l-.3-.3c.1 0-.2-.2-.1-.3l1.3.9-1-.8 1.4 1v-.2l.2.2.3.2.5.3-.2-.1-1.3-1.2a24 24 0 00-.6-.6H29a51 51 0 01-2.7-2.2l-5-4.3h.2l.1-.1.3-.2h.2l.1-.1v-.1c.2 0 .3-.2.4-.3l.2-.1.9-.6.4-.3.1-.1.4-.3.7-.5.3-.2h.2l.2-.3h.2c.2-.2.4-.4.6-.4l.1-.1.4-.3.8-.5.3-.1.6-.5h.2l.5-.5-1.3.8.1-.1a6.3 6.3 0 001-.7v-.2h-.1l-.4.2-.8.6c-.2 0-.4.1-.5.3a3 3 0 01-.6.3l-.2.1c-.1 0 0 0 0 0l.3-.3 1-.6 1.3-.8V11l.2-.2.2-.1.1-.1h-.2-.1v-.1l.4-.2h-.4l-.5.2-.3.1.3-.3-.6.3h-.2v-.1l.2-.1.2-.1c.2 0 .3-.2.4-.3.2 0 .3-.2.5-.3l-1.2.6h-.4c.1 0 .2 0 .3-.2l.2-.1.1-.1.6-.3-.4.1.2-.2-.2.1v-.1h-.3l.2-.1.1-.2zM58.4 15c-1.6 0-3 1.2-3 2.8 0 1.5 1.4 2.7 3 2.7s2.9-1.2 2.9-2.7c0-1.6-1.3-2.8-3-2.8z" fill-rule="evenodd"/>
</svg>
</a>
<div class="footer__body">
Made with
<span class="footer__heart">💜</span>
in
Bochum |
<a href="https://9elements.com/imprint" target="_blank">Imprint</a> |
<a href="https://9elements.com/privacy" target="_blank">Data Privacy</a>
</div>
</footer>
<div class="cookies-eu-banner" id="cookies-eu-banner" style="display: none;">
<div class="cookies-eu-banner__bd">
We care about your data, and we'd love to use analytics to make your experience better. <a href='https://9elements.com/privacy' target='_blank'>Privacy Policy</a>.
</div>
<div class="cookies-eu-banner__cta">
<button id="cookies-eu-reject" class="cookies-eu-banner__button">No, thanks.</button>
<button id="cookies-eu-accept" class="cookies-eu-banner__button cookies-eu-banner__button--okay">Okay!</button>
</div>
</div>
<script>
new CookiesEuBanner(function(){
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PDZ5MRH');
}, true);
</script>
<script src="src/js/highlight-and-copy.js"></script>
</body>
</html>
