notes/seo_tips/seo_best_pratices.html
2022-09-03 17:13:14 -07:00

1562 lines
96 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>8 SEO best practices for Web Developers - DEV Community 👩‍💻👨‍💻</title>
<meta name="last-updated" content="2022-09-04 00:12:57 UTC">
<meta name="user-signed-in" content="false">
<meta name="head-cached-at" content="1662250377">
<!-- Experimental web monetization payment pointer for micropayments -->
<!-- It lets readers make micropayments to websites they visit. -->
<!-- This is step 1: Get live in production to test for platform-wide payment pointer. -->
<!-- Step 2: Allow authors to set their payment pointer so they can directly monetize their content based on visitors. -->
<!-- Step 3: Enable further functionality based on what we learn from this experimentation and how the ecosystem evolves. -->
<meta name="monetization" content="$ilp.uphold.com/24HhrUGG7ekn">
<meta name="environment" content="production">
<link rel="stylesheet" href="https://dev.to/assets/minimal-5b7906f8aca74447068af5f8677182f4484365f08317cfdd7215fd38bcceaeb2.css" media="all" id="main-minimal-stylesheet" />
<link rel="stylesheet" href="https://dev.to/assets/views-a9298f924f603832afc6a482b31ac4d3f812e92e85eaf97d4d0345a5811502ed.css" media="all" id="main-views-stylesheet" />
<link rel="stylesheet" href="https://dev.to/assets/crayons-d29fb30f7419821bed167f8bc19cb88036bd49c4db701184d6590aed60b6905e.css" media="all" id="main-crayons-stylesheet" />
<script src="https://dev.to/assets/base-6115566f1c975ffb649623e32442c2acf2ad5532cedb473285ffc1cd90c2e65e.js" defer="defer"></script>
<script src="https://dev.to/packs/js/runtime~base-91d401d17fdc7be8cf23.js" defer="defer"></script>
<script src="https://dev.to/packs/js/base-4862022a814a60d6dd00.chunk.js" defer="defer"></script>
<script src="https://dev.to/packs/js/runtime~Search-118f3db5f3ee8b220217.js" defer="defer"></script>
<script src="https://dev.to/packs/js/0-cd30251b0a45c4901295.chunk.js" defer="defer"></script>
<script src="https://dev.to/packs/js/1-d02c88f21eb650128b69.chunk.js" defer="defer"></script>
<script src="https://dev.to/packs/js/Search-3cbc03265957c3789c05.chunk.js" defer="defer"></script>
<script src="https://dev.to/packs/js/runtime~runtimeBanner-f5b6262cea3b8c558bbc.js" defer="defer"></script>
<script src="https://dev.to/packs/js/runtimeBanner-6b3d2e06cc1a07b71f5d.chunk.js" defer="defer"></script>
<link rel="canonical" href="https://dev.to/mattzajechowski/8-seo-best-practices-for-web-developers-484a" />
<meta name="description" content="A sleek looking and well designed website is important to both web developers and business owners. Ho... Tagged with seo, html, javascript.">
<meta name="keywords" content="seo, html, javascript, software, coding, development, engineering, inclusive, community">
<meta property="og:type" content="article" />
<meta property="og:url" content="https://dev.to/mattzajechowski/8-seo-best-practices-for-web-developers-484a" />
<meta property="og:title" content="8 SEO best practices for Web Developers" />
<meta property="og:description" content="A sleek looking and well designed website is important to both web developers and business owners. Ho..." />
<meta property="og:site_name" content="DEV Community 👩‍💻👨‍💻" />
<meta name="twitter:site" content="@thepracticaldev">
<meta name="twitter:creator" content="@MattZajechowski">
<meta name="twitter:title" content="8 SEO best practices for Web Developers">
<meta name="twitter:description" content="A sleek looking and well designed website is important to both web developers and business owners. Ho...">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:widgets:new-embed-design" content="on">
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta property="og:image" content="https://dev.to/social_previews/article/269128.png" />
<meta name="twitter:image:src" content="https://dev.to/social_previews/article/269128.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="icon" type="image/x-icon" href="https://res.cloudinary.com/practicaldev/image/fetch/s--E8ak4Hr1--/c_limit,f_auto,fl_progressive,q_auto,w_32/https://dev-to.s3.us-east-2.amazonaws.com/favicon.ico" />
<link rel="apple-touch-icon" href="https://res.cloudinary.com/practicaldev/image/fetch/s--gDM0_LTS--/c_limit,f_png,fl_progressive,q_80,w_180/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://res.cloudinary.com/practicaldev/image/fetch/s--l0c3Kmql--/c_limit,f_png,fl_progressive,q_80,w_152/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://res.cloudinary.com/practicaldev/image/fetch/s--gDM0_LTS--/c_limit,f_png,fl_progressive,q_80,w_180/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png">
<link rel="apple-touch-icon" sizes="167x167" href="https://res.cloudinary.com/practicaldev/image/fetch/s--2ecYCSjC--/c_limit,f_png,fl_progressive,q_80,w_167/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png">
<link href="https://res.cloudinary.com/practicaldev/image/fetch/s--t7tVouP9--/c_limit,f_png,fl_progressive,q_80,w_192/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png" rel="icon" sizes="192x192" />
<link href="https://res.cloudinary.com/practicaldev/image/fetch/s--lrmEcD2H--/c_limit,f_png,fl_progressive,q_80,w_128/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png" rel="icon" sizes="128x128" />
<meta name="apple-mobile-web-app-title" content="dev.to">
<meta name="application-name" content="dev.to">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
<link rel="search" href="https://dev.to/open-search.xml" type="application/opensearchdescription+xml" title="DEV Community 👩‍💻👨‍💻" />
<meta property="forem:name" content="DEV Community 👩‍💻👨‍💻" />
<meta property="forem:logo" content="https://res.cloudinary.com/practicaldev/image/fetch/s--PFPhV65b--/c_limit,f_png,fl_progressive,q_80,w_512/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png" />
<meta property="forem:domain" content="dev.to" />
</head>
<body
class="sans-serif-article-body default-header"
data-user-status="logged-out"
data-community-name="DEV Community 👩‍💻👨‍💻"
data-locale="en"
data-honeybadger-key="a45862f6"
data-deployed-at="2022-09-03T00:06:18Z"
data-latest-commit-id="1f6c53a20c00c697b93946989a02245222d8ed8e"
data-ga-tracking="UA-71991109-1"
data-ga4-tracking-id="G-TYEM8Y3JN3"
>
<link rel="stylesheet" href="https://dev.to/assets/minimal-5b7906f8aca74447068af5f8677182f4484365f08317cfdd7215fd38bcceaeb2.css" media="all" id="secondary-minimal-stylesheet" />
<link rel="stylesheet" href="https://dev.to/assets/views-a9298f924f603832afc6a482b31ac4d3f812e92e85eaf97d4d0345a5811502ed.css" media="all" id="secondary-views-stylesheet" />
<link rel="stylesheet" href="https://dev.to/assets/crayons-d29fb30f7419821bed167f8bc19cb88036bd49c4db701184d6590aed60b6905e.css" media="all" id="secondary-crayons-stylesheet" />
<div id="body-styles">
<style>
:root {
--accent-brand-lighter-rgb: 80, 99, 301;
--accent-brand-rgb: 59, 73, 223;
--accent-brand-darker-rgb: 47, 58, 178;
}
</style>
</div>
<div id="audiocontent" data-podcast="">
</div>
<div class="navigation-progress" id="navigation-progress"></div>
<header class="crayons-header print-hidden">
<span id="route-change-target" tabindex="-1"></span>
<a href="#main-content" class="skip-content-link">Skip to content</a>
<div class="crayons-header__container">
<span class="inline-block m:hidden ">
<button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aca0rw38ci3cx9pd6c0k4djva70131hf" class="crayons-icon"><title id="aca0rw38ci3cx9pd6c0k4djva70131hf">Navigation menu</title>
<path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path>
</svg>
</button>
</span>
<a href="/" class="site-logo" aria-label="DEV Community 👩‍💻👨‍💻 Home">
<img class="site-logo__img" src="https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" alt="DEV Community 👩‍💻👨‍💻">
</a>
<div class="crayons-header--search js-search-form" id="header-search">
<form accept-charset="UTF-8" method="get" action="/search" role="search">
<div class="crayons-fields crayons-fields--horizontal">
<div class="crayons-field flex-1 relative">
<input class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="Search..." autocomplete="off" />
<button type="submit" aria-label="Search" class="c-btn c-btn--icon-alone absolute inset-px left-auto mt-0 py-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a82r1jir5vbo4pgl6wdj8r2sdo607eyd" aria-hidden="true" class="crayons-icon"><title id="a82r1jir5vbo4pgl6wdj8r2sdo607eyd">Search</title>
<path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path>
</svg>
</button>
</div>
</div>
</form>
</div>
<div class="flex items-center h-100 ml-auto">
<a class="c-link c-link--icon-alone c-link--block m:hidden mx-1" id="search-link" aria-label="Search" href="/search">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="atpx78ohkgk5g9rcrex4crwyq8zb75jq" class="crayons-icon"><title id="atpx78ohkgk5g9rcrex4crwyq8zb75jq">Search</title>
<path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path>
</svg>
</a>
<span class="hidden m:block">
<a href="/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant>
Log in
</a>
</span>
<a href="/enter?state=new-user" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant>
Create account
</a>
</div>
</div>
</header>
<div class="hamburger">
<div class="hamburger__content">
<header class="hamburger__content__header">
<h2 class="fs-l fw-bold flex-1 break-word lh-tight">DEV Community 👩‍💻👨‍💻</h2>
<button class="c-btn c-btn--icon-alone js-hamburger-trigger shrink-0" aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ase1wbdcgz66ijz2df6z95fntiivqt8g" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="ase1wbdcgz66ijz2df6z95fntiivqt8g">Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg>
</button>
</header>
<div class="p-2">
<div class="crayons-card crayons-card--secondary p-4">
<h2 class="crayons-subtitle-2 lh-tight mb-4">
<a href="/" class="c-link c-link--branded">DEV Community 👩‍💻👨‍💻</a> is a community of 916,181 amazing developers
</h2>
<p class="color-base-70 mb-4">
We&#39;re a place where coders share, stay up-to-date and grow their careers.
</p>
<div>
<a href="/enter?state=new-user" class="c-cta c-cta--branded justify-center w-100 mb-1" aria-label="Create new account">Create account</a>
<a href="/enter" class="c-link c-link--block justify-center" aria-label="Log in">Log in</a>
</div>
</div>
<nav class="mb-4 mt-4" data-testid="main-nav" aria-label="DEV Community 👩‍💻👨‍💻">
<ul class="default-navigation-links sidebar-navigation-links spec-sidebar-navigation-links">
<li>
<a href="/" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
<g class="nc-icon-wrapper">
<path fill="#A0041E" d="M13.344 18.702h-2a.5.5 0 01-.5-.5v-7a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v7a.5.5 0 01-.5.5z"/>
<path fill="#FFE8B6" d="M9 20L22 7l13 13v17H9z"/>
<path fill="#FFCC4D" d="M22 20h1v16h-1z"/>
<path fill="#66757F" d="M35 21a.997.997 0 01-.707-.293L22 8.414 9.707 20.707a1 1 0 11-1.414-1.414l13-13a.999.999 0 011.414 0l13 13A.999.999 0 0135 21z"/>
<path fill="#66757F" d="M22 21a.999.999 0 01-.707-1.707l6.5-6.5a1 1 0 111.414 1.414l-6.5 6.5A.997.997 0 0122 21z"/>
<path fill="#C1694F" d="M14 30h4v6h-4z"/>
<path fill="#55ACEE" d="M14 21h4v4h-4zm12.5 0h4v4h-4zm0 9h4v4h-4z"/>
<path fill="#5C913B" d="M37.5 37.5A1.5 1.5 0 0136 39H8a1.5 1.5 0 010-3h28a1.5 1.5 0 011.5 1.5z"/>
</g>
</svg>
</span>
Home
</a>
</li>
<li>
<a href="/listings" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
<g class="nc-icon-wrapper">
<path fill="#FFD983" d="M36 4H14a4 4 0 00-4 4v24H8a4 4 0 000 8h24a4 4 0 004-4V12a4 4 0 000-8z"/>
<path fill="#E39F3D" d="M12 14h24v-2H14l-2-1z"/>
<path fill="#FFE8B6" d="M14 4a4 4 0 00-4 4v24.555A3.955 3.955 0 008 32a4 4 0 104 4V11.445c.59.344 1.268.555 2 .555a4 4 0 000-8z"/>
<path fill="#C1694F" d="M16 8a2 2 0 11-4.001-.001A2 2 0 0116 8m-6 28a2 2 0 11-4.001-.001A2 2 0 0110 36m24-17a1 1 0 01-1 1H15a1 1 0 010-2h18a1 1 0 011 1m0 4a1 1 0 01-1 1H15a1 1 0 110-2h18a1 1 0 011 1m0 4a1 1 0 01-1 1H15a1 1 0 110-2h18a1 1 0 011 1m0 4a1 1 0 01-1 1H15a1 1 0 110-2h18a1 1 0 011 1"/>
</g>
</svg>
</span>
Listings
</a>
</li>
<li>
<a href="/pod" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
<g class="nc-icon-wrapper">
<path fill="#292F33" d="M10 19h24v2H10zm15 15c0 2.208-.792 4-3 4-2.209 0-3-1.792-3-4s.791-2 3-2c2.208 0 3-.208 3 2z"/>
<path fill="#66757F" d="M22 35c-6.627 0-10 1.343-10 3v2h20v-2c0-1.657-3.373-3-10-3z"/>
<path fill="#99AAB5" d="M22 4a9 9 0 00-9 9v7h18v-7a9 9 0 00-9-9z"/>
<g fill="#292F33" transform="translate(4 4)">
<circle cx="15.5" cy="2.5" r="1.5"/>
<circle cx="20.5" cy="2.5" r="1.5"/>
<circle cx="17.5" cy="6.5" r="1.5"/>
<circle cx="22.5" cy="6.5" r="1.5"/>
<circle cx="12.5" cy="6.5" r="1.5"/>
<circle cx="15.5" cy="10.5" r="1.5"/>
<circle cx="10.5" cy="10.5" r="1.5"/>
<circle cx="20.5" cy="10.5" r="1.5"/>
<circle cx="25.5" cy="10.5" r="1.5"/>
<circle cx="17.5" cy="14.5" r="1.5"/>
<circle cx="22.5" cy="14.5" r="1.5"/>
<circle cx="12.5" cy="14.5" r="1.5"/>
</g>
<path fill="#66757F" d="M13 19.062V21c0 4.971 4.029 9 9 9s9-4.029 9-9v-1.938H13z"/>
<path fill="#66757F" d="M34 18a1 1 0 00-1 1v2c0 6.074-4.925 11-11 11s-11-4.926-11-11v-2a1 1 0 00-2 0v2c0 7.18 5.82 13 13 13s13-5.82 13-13v-2a1 1 0 00-1-1z"/>
</g>
</svg>
</span>
Podcasts
</a>
</li>
<li>
<a href="/videos" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
<g transform="translate(4 4)">
<path fill="#31373D" d="M34.074 18l-4.832 3H28v-4c0-.088-.02-.169-.026-.256C31.436 15.864 34 12.735 34 9a8 8 0 00-16.001 0c0 1.463.412 2.822 1.099 4H14.92c.047-.328.08-.66.08-1a7 7 0 10-14 0 6.995 6.995 0 004 6.317V29a4 4 0 004 4h15a4 4 0 004-4v-3h1.242l4.832 3H35V18h-.926zM28.727 3.977a5.713 5.713 0 012.984 4.961L28.18 8.35a2.276 2.276 0 00-.583-.982l1.13-3.391zm-.9 6.342l3.552.592a5.713 5.713 0 01-4.214 3.669 3.985 3.985 0 00-1.392-1.148l.625-2.19a2.425 2.425 0 001.429-.923zM26 3.285c.282 0 .557.027.828.067l-1.131 3.392c-.404.054-.772.21-1.081.446L21.42 5.592A5.703 5.703 0 0126 3.285zM20.285 9c0-.563.085-1.106.236-1.62l3.194 1.597-.002.023c0 .657.313 1.245.771 1.662L23.816 13h-1.871a5.665 5.665 0 01-1.66-4zm-9.088-.385A4.64 4.64 0 0112.667 12c0 .344-.043.677-.113 1H10.1c.145-.304.233-.641.233-1a2.32 2.32 0 00-.392-1.292l1.256-2.093zM8 7.333c.519 0 1.01.105 1.476.261L8.22 9.688c-.073-.007-.145-.022-.22-.022a2.32 2.32 0 00-1.292.392L4.615 8.803A4.64 4.64 0 018 7.333zM3.333 12c0-.519.105-1.01.261-1.477l2.095 1.257c-.007.073-.022.144-.022.22 0 .75.36 1.41.91 1.837a3.987 3.987 0 00-1.353 1.895C4.083 14.881 3.333 13.533 3.333 12z"/>
<circle fill="#8899A6" cx="24" cy="19" r="2"/>
<circle fill="#8899A6" cx="9" cy="19" r="2"/>
<path fill="#8899A6" d="M24 27a2 2 0 00-2-2H11a2 2 0 00-2 2v6a2 2 0 002 2h11a2 2 0 002-2v-6z"/>
</g>
</svg>
</span>
Videos
</a>
</li>
<li>
<a href="/tags" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
<g class="nc-icon-wrapper">
<path fill="#FFD983" d="M36.017 24.181L21.345 9.746C20.687 9.087 19.823 9 18.96 9H8.883C7.029 9 6 10.029 6 11.883v10.082c0 .861.089 1.723.746 2.38L21.3 39.017a3.287 3.287 0 004.688 0l10.059-10.088c1.31-1.312 1.28-3.438-.03-4.748zm-23.596-8.76a1.497 1.497 0 11-2.118-2.117 1.497 1.497 0 012.118 2.117z"/>
<path fill="#D99E82" d="M13.952 11.772a3.66 3.66 0 00-5.179 0 3.663 3.663 0 105.18 5.18 3.664 3.664 0 00-.001-5.18zm-1.53 3.65a1.499 1.499 0 11-2.119-2.12 1.499 1.499 0 012.119 2.12z"/>
<path fill="#C1694F" d="M12.507 14.501a1 1 0 11-1.415-1.414l8.485-8.485a1 1 0 111.415 1.414l-8.485 8.485z"/>
</g>
</svg>
</span>
Tags
</a>
</li>
<li>
<a href="/faq" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
<g class="nc-icon-wrapper">
<path fill="#FFD983" d="M33 15.06c0 6.439-5 7.439-5 13.44 0 3.098-3.123 3.359-5.5 3.359-2.053 0-6.586-.779-6.586-3.361C15.914 22.5 11 21.5 11 15.06c0-6.031 5.285-10.92 11.083-10.92C27.883 4.14 33 9.029 33 15.06z"/>
<path fill="#CCD6DD" d="M26.167 36.5c0 .828-2.234 2.5-4.167 2.5-1.933 0-4.167-1.672-4.167-2.5 0-.828 2.233-.5 4.167-.5 1.933 0 4.167-.328 4.167.5z"/>
<path fill="#FFCC4D" d="M26.707 14.293a.999.999 0 00-1.414 0L22 17.586l-3.293-3.293a1 1 0 10-1.414 1.414L21 19.414V30a1 1 0 102 0V19.414l3.707-3.707a.999.999 0 000-1.414z"/>
<path fill="#99AAB5" d="M28 35a2 2 0 01-2 2h-8a2 2 0 01-2-2v-6h12v6z"/>
<path fill="#CCD6DD" d="M15.999 36a1 1 0 01-.163-1.986l12-2a.994.994 0 011.15.822.999.999 0 01-.822 1.15l-12 2a.927.927 0 01-.165.014zm0-4a1 1 0 01-.163-1.986l12-2a.995.995 0 011.15.822.999.999 0 01-.822 1.15l-12 2a.927.927 0 01-.165.014z"/>
</g>
</svg>
</span>
FAQ
</a>
</li>
<li>
<a href="https://shop.forem.com" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
<g class="nc-icon-wrapper">
<path fill="#F4900C" d="M15 4a8 8 0 00-8 8v8h2v-8a6 6 0 0112 0v8h2v-8a8 8 0 00-8-8z"/>
<path fill="#DD2E44" d="M5 12l2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2v23H5z"/>
<path fill="#FFCC4D" d="M29 9a8 8 0 00-8 8v8h2v-8a6 6 0 0112 0v8h2v-8a8 8 0 00-8-8z"/>
<path fill="#744EAA" d="M19 17l2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2v23H19z"/>
</g>
</svg>
</span>
Forem Shop
</a>
</li>
<li>
<a href="/sponsorships" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
<path fill="#DD2E44" d="M39.885 15.833c0-5.45-4.418-9.868-9.867-9.868-3.308 0-6.227 1.633-8.018 4.129-1.791-2.496-4.71-4.129-8.017-4.129-5.45 0-9.868 4.417-9.868 9.868 0 .772.098 1.52.266 2.241C5.751 26.587 15.216 35.568 22 38.034c6.783-2.466 16.249-11.447 17.617-19.959.17-.721.268-1.469.268-2.242z"/>
</svg>
</span>
Sponsors
</a>
</li>
<li>
<a href="/about" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<svg viewBox="0 0 235 234" xmlns="http://www.w3.org/2000/svg" class="rainbow-logo" preserveAspectRatio="xMinYMin meet">
<g fill="none" fill-rule="evenodd">
<path fill="#88AEDC" d="M234.04 175.67l-75.69 58.28h47.18L234.04 212z"/>
<path d="M234.04 140.06l-121.93 93.89h.02l121.91-93.87zM133.25.95L.04 103.51v.02L133.27.95z"/>
<path fill="#F58F8E" fill-rule="nonzero" d="M.04.95v30.16L39.21.95z"/>
<path fill="#FEE18A" fill-rule="nonzero" d="M39.21.95L.04 31.11v35.9L85.84.95z"/>
<path fill="#F3F095" fill-rule="nonzero" d="M85.84.95L.04 67.01v36.5L133.25.95z"/>
<path fill="#55C1AE" fill-rule="nonzero" d="M133.27.95L.04 103.53v35.59L179.49.95z"/>
<path fill="#F7B3CE" fill-rule="nonzero" d="M234.04.95h-7.37L.04 175.45v35.93l234-180.18z"/>
<path fill="#88AEDC" fill-rule="nonzero" d="M179.49.95L.04 139.12v36.33L226.67.95z"/>
<path fill="#F58F8E" fill-rule="nonzero" d="M234.04 31.2L.04 211.38v22.57h18.03l215.97-166.3z"/>
<path fill="#FEE18A" fill-rule="nonzero" d="M234.04 67.65L18.07 233.95H64.7l169.34-130.39z"/>
<path fill="#F3F095" fill-rule="nonzero" d="M234.04 103.56L64.7 233.95h47.41l121.93-93.89z"/>
<path fill="#55C1AE" fill-rule="nonzero" d="M234.04 140.08l-121.91 93.87h46.22l75.69-58.28z"/>
<path fill="#F7B3CE" fill-rule="nonzero" d="M234.04 212l-28.51 21.95h28.51z"/>
<path d="M65.237 77.75c4.514.95 7.774 2.8 11.135 6.3 3.059 3.2 4.965 6.85 5.767 10.95.652 3.45.652 40.55 0 44.05-1.705 9.1-9.479 16.2-19.109 17.45-2.006.25-8.727.5-14.845.5H37V77h12.438c8.828 0 13.342.2 15.8.75zM51.545 117v25.6l5.166-.2c4.464-.15 5.417-.35 7.423-1.5 3.912-2.3 3.962-2.45 3.962-24.2 0-21.2 0-21.2-3.661-23.6-1.806-1.2-2.558-1.35-7.473-1.55l-5.417-.15V117zm79.245-32.75v7.25h-25.58v18h15.549V124H105.21l.1 9.1.15 9.15 12.69.15 12.638.1V157h-14.795c-16.451 0-19.009-.3-21.617-2.6-3.661-3.2-3.46-1.15-3.611-36.3-.1-21.9.05-32.25.401-33.65.702-2.6 3.661-5.8 6.27-6.7 1.554-.55 5.466-.7 17.704-.75h15.648v7.25zm31.647 20.85c3.712 14.25 6.821 25.6 6.922 25.25.15-.35 3.31-12.4 7.071-26.85l6.872-26.25 7.824-.15c5.918-.1 7.874.05 7.874.5s-17.354 66.2-18.357 69.5c-.702 2.3-4.463 7-6.57 8.25-2.658 1.5-6.57 1.75-8.978.5-2.156-1.1-5.015-4.4-6.47-7.5-.902-1.9-15.648-56-19.058-70l-.352-1.35h7.825c7.673 0 7.874 0 8.275 1.1.2.65 3.41 12.8 7.122 27z" fill="#FFF"/>
</g>
</svg>
</span>
About
</a>
</li>
<li>
<a href="/contact" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
<g class="nc-icon-wrapper">
<path fill="#FFAC33" d="M38.724 33.656c-1.239-.01-1.241 1.205-1.241 1.205H22.5c-5.246 0-9.5-4.254-9.5-9.5s4.254-9.5 9.5-9.5 9.5 4.254 9.5 9.5c0 3.062-1.6 5.897-3.852 7.633h5.434C35.022 30.849 36 28.139 36 25.361c0-7.456-6.045-13.5-13.5-13.5-7.456 0-13.5 6.044-13.5 13.5 0 7.455 6.044 13.5 13.5 13.5h14.982s-.003 1.127 1.241 1.139c1.238.012 1.228-1.245 1.228-1.245l.014-3.821s.001-1.267-1.241-1.278zM9 18.26a16.047 16.047 0 014-4.739V13c0-5 5-7 5-8s-1-1-1-1H5C4 4 4 5 4 5c0 1 5 3.333 5 7.69v5.57z"/>
<path fill="#BE1931" d="M17.091 33.166a9.487 9.487 0 01-4.045-8.72l-3.977-.461c-.046.452-.069.911-.069 1.376 0 4.573 2.28 8.608 5.76 11.051l2.331-3.246z"/>
<path fill="#BE1931" d="M10 29.924s-5.188-.812-5 1 5-1 5-1zm0 .312s-4.125 2.688-2.938 3.75S10 30.236 10 30.236z"/>
</g>
</svg>
</span>
Contact
</a>
</li>
<li>
<a href="/guides" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;" id="svg2" xml:space="preserve"><defs id="defs6"><clipPath id="clipPath18"><path d="M 0,38 38,38 38,0 0,0 0,38 z" id="path20"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g12"><g id="g14"><g clip-path="url(#clipPath18)" id="g16"><g transform="translate(33,30)" id="g22"><path d="m 0,0 -28,0 c -2.209,0 -4,-1.791 -4,-4 l 0,-15 c 0,-2.209 1.791,-4 4,-4 l 11.416,0 c 0.52,-0.596 1.477,-1 2.584,-1 1.107,0 2.064,0.404 2.584,1 L 0,-23 c 2.209,0 4,1.791 4,4 L 4,-4 C 4,-1.791 2.209,0 0,0" id="path24" style="fill:#226699;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(21,10)" id="g26"><path d="m 0,0 c 0,-1.104 -0.896,-2 -2,-2 -1.104,0 -2,0.896 -2,2 l 0,18 c 0,1.104 0.896,2 2,2 1.104,0 2,-0.896 2,-2 L 0,0 z" id="path28" style="fill:#292f33;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(19,11)" id="g30"><path d="m 0,0 c 0,-1.104 -0.896,-2 -2,-2 l -12,0 c -1.104,0 -2,0.896 -2,2 l 0,18 c 0,1.104 0.896,2 2,2 l 12,0 c 1.104,0 2,-0.896 2,-2 L 0,0 z" id="path32" style="fill:#99aab5;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(19,11)" id="g34"><path d="m 0,0 c -0.999,1.998 -3.657,2 -4,2 -2,0 -5,-2 -8,-2 -1,0 -2,0.896 -2,2 l 0,16 c 0,1.104 1,2 2,2 3.255,0 6,2 8,2 3,0 4,-1.896 4,-3 L 0,0 z" id="path36" style="fill:#e1e8ed;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(35,11)" id="g38"><path d="m 0,0 c 0,-1.104 -0.896,-2 -2,-2 l -12,0 c -1.104,0 -2,0.896 -2,2 l 0,18 c 0,1.104 0.896,2 2,2 l 12,0 c 1.104,0 2,-0.896 2,-2 L 0,0 z" id="path40" style="fill:#99aab5;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(19,11)" id="g42"><path d="m 0,0 c 0.999,1.998 3.657,2 4,2 2,0 5,-2 8,-2 1,0 2,0.896 2,2 l 0,16 c 0,1.104 -1,2 -2,2 C 8.744,20 6,22 4,22 1,22 0,20.104 0,19 L 0,0 z" id="path44" style="fill:#ccd6dd;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g></g></g></g></svg>
</span>
Guides
</a>
</li>
<li>
<a href="/software-comparisons" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" style="enable-background:new 0 0 45 45;" xml:space="preserve" version="1.1" id="svg2"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,36 36,36 36,0 0,0 0,36 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,45)" id="g10"><g id="g12"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(2,20)" id="g20"><path id="path22" style="fill:#ffcc4d;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-8.837 7.164,-16 16,-16 8.837,0 16,7.163 16,16 C 32,8.836 24.837,16 16,16 7.164,16 0,8.836 0,0"/></g><g transform="translate(15.4063,25.5)" id="g24"><path id="path26" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-1.381 -0.896,-2.5 -2,-2.5 -1.104,0 -2,1.119 -2,2.5 0,1.38 0.896,2.5 2,2.5 1.104,0 2,-1.12 2,-2.5"/></g><g transform="translate(26,24.5)" id="g28"><path id="path30" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-1.381 -0.895,-2.5 -2,-2.5 -1.104,0 -2,1.119 -2,2.5 0,1.38 0.896,2.5 2,2.5 1.105,0 2,-1.12 2,-2.5"/></g><g transform="translate(9.6709,29.667)" id="g32"><path id="path34" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.164,0.087 -0.303,0.223 -0.391,0.398 -0.607,0.827 -0.431,1.325 0.002,1.511 4.268,3.341 7.701,1.554 7.845,1.477 8.278,1.246 8.453,0.729 8.236,0.323 8.02,-0.082 7.496,-0.223 7.063,0.005 6.94,0.069 4.231,1.437 0.785,-0.042 0.528,-0.151 0.238,-0.127 0,0"/></g><g transform="translate(14.7427,16.4277)" id="g36"><path id="path38" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.136,0.127 -0.236,0.293 -0.276,0.486 -0.375,0.955 -0.078,1.392 0.389,1.46 4.981,2.138 7.841,-0.469 7.962,-0.58 8.322,-0.914 8.357,-1.457 8.044,-1.795 7.732,-2.131 7.189,-2.133 6.83,-1.801 6.726,-1.709 4.458,0.307 0.748,-0.24 0.471,-0.281 0.197,-0.184 0,0"/></g><g transform="translate(20.4307,25.917)" id="g40"><path id="path42" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.156,0.098 -0.286,0.243 -0.362,0.424 -0.549,0.866 -0.339,1.352 0.105,1.508 4.486,3.044 7.79,1.028 7.929,0.941 8.344,0.681 8.483,0.154 8.24,-0.237 7.998,-0.627 7.464,-0.732 7.049,-0.475 6.929,-0.402 4.321,1.146 0.782,-0.095 0.518,-0.187 0.23,-0.143 0,0"/></g><g transform="translate(17.2764,0.8682)" id="g44"><path id="path46" style="fill:#f4900c;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,0 1.265,0.411 1.429,1.352 0.173,0.971 -0.624,1.167 -0.624,1.167 0,0 1.041,0.208 1.172,1.376 0.123,1.1 -0.862,1.363 -0.862,1.363 0,0 0.97,0.4 1.016,1.539 0.038,0.959 -0.995,1.428 -0.995,1.428 0,0 5.038,1.22 5.555,1.34 0.516,0.121 1.321,0.616 1.07,1.695 -0.249,1.08 -1.204,1.118 -1.698,1.003 -0.494,-0.116 -6.744,-1.567 -8.9,-2.069 -0.23,-0.053 -1.308,-0.302 -1.439,-0.334 -0.54,-0.127 -0.785,0.111 -0.405,0.512 0.509,0.536 0.833,1.129 0.947,2.113 0.119,1.036 -0.232,2.314 -0.433,2.809 -0.374,0.921 -1.005,1.649 -1.734,1.899 -1.138,0.39 -1.946,-0.321 -1.542,-1.561 0.604,-1.855 0.209,-3.375 -0.833,-4.293 -2.449,-2.157 -3.589,-3.695 -2.83,-6.973 0.827,-3.575 4.377,-5.876 7.952,-5.048 C -2.965,-0.64 0,0 0,0"/></g></g></g></g></svg>
</span>
Software comparisons
</a>
</li>
</ul>
</nav>
<nav class="mb-4" data-testid="other-nav" aria-labelledby="other-nav-heading-hamburger">
<h2 id="other-nav-heading-hamburger" class="crayons-subtitle-3 py-2 pl-3">
Other
</h2>
<ul class="other-navigation-links sidebar-navigation-links spec-sidebar-navigation-links">
<li>
<a href="/code-of-conduct" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
<g class="nc-icon-wrapper">
<path fill="#FFDB5E" d="M38.956 21.916c0-.503-.12-.975-.321-1.404-1.341-4.326-7.619-4.01-16.549-4.221-1.493-.035-.639-1.798-.115-5.668.341-2.517-1.282-6.382-4.01-6.382-4.498 0-.171 3.548-4.148 12.322-2.125 4.688-6.875 2.062-6.875 6.771v10.719c0 1.833.18 3.595 2.758 3.885 2.499.281 1.937 2.062 5.542 2.062h18.044a3.337 3.337 0 003.333-3.334c0-.762-.267-1.456-.698-2.018 1.02-.571 1.72-1.649 1.72-2.899 0-.76-.266-1.454-.696-2.015 1.023-.57 1.725-1.649 1.725-2.901 0-.909-.368-1.733-.961-2.336a3.311 3.311 0 001.251-2.581z"/>
<path fill="#EE9547" d="M27.02 25.249h8.604c1.17 0 2.268-.626 2.866-1.633a.876.876 0 00-1.506-.892 1.588 1.588 0 01-1.361.775h-8.81c-.873 0-1.583-.71-1.583-1.583s.71-1.583 1.583-1.583H32.7a.875.875 0 000-1.75h-5.888a3.337 3.337 0 00-3.333 3.333c0 1.025.475 1.932 1.205 2.544a3.32 3.32 0 00-.998 2.373c0 1.028.478 1.938 1.212 2.549a3.318 3.318 0 00.419 5.08 3.305 3.305 0 00-.852 2.204 3.337 3.337 0 003.333 3.333h5.484a3.35 3.35 0 002.867-1.632.875.875 0 00-1.504-.894 1.594 1.594 0 01-1.363.776h-5.484c-.873 0-1.583-.71-1.583-1.583s.71-1.583 1.583-1.583h6.506a3.35 3.35 0 002.867-1.633.875.875 0 10-1.504-.894 1.572 1.572 0 01-1.363.777h-7.063a1.585 1.585 0 010-3.167h8.091a3.35 3.35 0 002.867-1.632.875.875 0 00-1.504-.894 1.573 1.573 0 01-1.363.776H27.02a1.585 1.585 0 010-3.167z"/>
</g>
</svg>
</span>
Code of Conduct
</a>
</li>
<li>
<a href="/privacy" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
<g transform="translate(4 4)">
<circle fill="#FFCC4D" cx="18" cy="18" r="18"/>
<path fill="#664500" d="M27.335 23.629a.501.501 0 00-.635-.029c-.039.029-3.922 2.9-8.7 2.9-4.766 0-8.662-2.871-8.7-2.9a.5.5 0 10-.729.657C8.7 24.472 11.788 29.5 18 29.5s9.301-5.028 9.429-5.243a.499.499 0 00-.094-.628z"/>
<path fill="#65471B" d="M18 26.591c-.148 0-.291-.011-.438-.016v4.516h.875v-4.517c-.145.005-.289.017-.437.017z"/>
<path fill="#FFF" d="M22 26c.016-.004-1.45.378-2.446.486-.366.042-.737.076-1.117.089v4.517H20c1.1 0 2-.9 2-2V26zm-8 0c-.016-.004 1.45.378 2.446.486.366.042.737.076 1.117.089v4.517H16c-1.1 0-2-.9-2-2V26z"/>
<path fill="#65471B" d="M27.335 23.629a.501.501 0 00-.635-.029c-.03.022-2.259 1.668-5.411 2.47-.443.113-1.864.43-3.286.431-1.424 0-2.849-.318-3.292-.431-3.152-.802-5.381-2.448-5.411-2.47a.501.501 0 00-.729.657c.097.162 1.885 3.067 5.429 4.481v-1.829c-.016-.004 1.45.378 2.446.486.366.042.737.076 1.117.089.146.005.289.016.437.016.148 0 .291-.011.438-.016.38-.013.751-.046 1.117-.089.996-.108 2.462-.49 2.446-.486v1.829c3.544-1.414 5.332-4.319 5.429-4.481a.5.5 0 00-.095-.628zm-.711-9.605c0 1.714-.938 3.104-2.096 3.104-1.157 0-2.096-1.39-2.096-3.104s.938-3.104 2.096-3.104c1.158 0 2.096 1.39 2.096 3.104zm-17.167 0c0 1.714.938 3.104 2.096 3.104 1.157 0 2.096-1.39 2.096-3.104s-.938-3.104-2.096-3.104c-1.158 0-2.096 1.39-2.096 3.104z"/>
<path fill="#292F33" d="M34.808 9.627c-.171-.166-1.267.274-2.376-.291-2.288-1.166-8.07-2.291-11.834.376-.403.285-2.087.333-2.558.313-.471.021-2.155-.027-2.558-.313-3.763-2.667-9.545-1.542-11.833-.376-1.109.565-2.205.125-2.376.291-.247.239-.247 1.196.001 1.436.246.239 1.477.515 1.722 1.232.247.718.249 4.958 2.213 6.424 1.839 1.372 6.129 1.785 8.848.238 2.372-1.349 2.289-4.189 2.724-5.881.155-.603.592-.907 1.26-.907s1.105.304 1.26.907c.435 1.691.351 4.532 2.724 5.881 2.719 1.546 7.009 1.133 8.847-.238 1.965-1.465 1.967-5.706 2.213-6.424.245-.717 1.476-.994 1.722-1.232.248-.24.249-1.197.001-1.436zm-20.194 3.65c-.077 1.105-.274 3.227-1.597 3.98-.811.462-1.868.743-2.974.743h-.001c-1.225 0-2.923-.347-3.587-.842-.83-.619-1.146-3.167-1.265-4.12-.076-.607-.28-2.09.388-2.318 1.06-.361 2.539-.643 4.052-.643.693 0 3.021.043 4.155.741 1.005.617.872 1.851.829 2.459zm16.278-.253c-.119.954-.435 3.515-1.265 4.134-.664.495-2.362.842-3.587.842h-.001c-1.107 0-2.163-.281-2.975-.743-1.323-.752-1.52-2.861-1.597-3.966-.042-.608-.176-1.851.829-2.468 1.135-.698 3.462-.746 4.155-.746 1.513 0 2.991.277 4.052.638.668.228.465 1.702.389 2.309z"/>
</g>
</svg>
</span>
Privacy Policy
</a>
</li>
<li>
<a href="/terms" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
<span class="c-link__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
<g transform="translate(4 4)">
<ellipse fill="#F5F8FA" cx="8.828" cy="18" rx="7.953" ry="13.281"/>
<path fill="#E1E8ED" d="M8.828 32.031C3.948 32.031.125 25.868.125 18S3.948 3.969 8.828 3.969 17.531 10.132 17.531 18s-3.823 14.031-8.703 14.031zm0-26.562C4.856 5.469 1.625 11.09 1.625 18s3.231 12.531 7.203 12.531S16.031 24.91 16.031 18 12.8 5.469 8.828 5.469z"/>
<circle fill="#8899A6" cx="6.594" cy="18" r="4.96"/>
<circle fill="#292F33" cx="6.594" cy="18" r="3.565"/>
<circle fill="#F5F8FA" cx="7.911" cy="15.443" r="1.426"/>
<ellipse fill="#F5F8FA" cx="27.234" cy="18" rx="7.953" ry="13.281"/>
<path fill="#E1E8ED" d="M27.234 32.031c-4.88 0-8.703-6.163-8.703-14.031s3.823-14.031 8.703-14.031S35.938 10.132 35.938 18s-3.824 14.031-8.704 14.031zm0-26.562c-3.972 0-7.203 5.622-7.203 12.531 0 6.91 3.231 12.531 7.203 12.531S34.438 24.91 34.438 18 31.206 5.469 27.234 5.469z"/>
<circle fill="#8899A6" cx="25" cy="18" r="4.96"/>
<circle fill="#292F33" cx="25" cy="18" r="3.565"/>
<circle fill="#F5F8FA" cx="26.317" cy="15.443" r="1.426"/>
</g>
</svg>
</span>
Terms of use
</a>
</li>
</ul>
</nav>
<div class="flex justify-start mb-4">
<a
href="https://twitter.com/thepracticaldev"
target="_blank"
class="c-link c-link--icon-alone c-link--block mx-1"
rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="amz3rxph147jvx0c7q4jk9mna6xps1i7" class="crayons-icon c-link__icon"><title id="amz3rxph147jvx0c7q4jk9mna6xps1i7">Twitter</title>
<path d="M22.162 5.656a8.383 8.383 0 01-2.402.658A4.196 4.196 0 0021.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 00-7.126 3.814 11.874 11.874 0 01-8.62-4.37 4.168 4.168 0 00-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 01-1.894-.523v.052a4.185 4.185 0 003.355 4.101 4.211 4.211 0 01-1.89.072A4.185 4.185 0 007.97 16.65a8.395 8.395 0 01-6.191 1.732 11.83 11.83 0 006.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.495 8.495 0 002.087-2.165l-.001-.001z" fill="#65bbf2"></path>
</svg>
</a>
<a
href="https://facebook.com/thepracticaldev"
target="_blank"
class="c-link c-link--icon-alone c-link--block mx-1"
rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ab9byogmun8qtame8141d02h0v6gi25l" class="crayons-icon c-link__icon"><title id="ab9byogmun8qtame8141d02h0v6gi25l">Facebook</title>
<path d="M15.402 21v-6.966h2.333l.349-2.708h-2.682V9.598c0-.784.218-1.319 1.342-1.319h1.434V5.857a19.188 19.188 0 00-2.09-.107c-2.067 0-3.482 1.262-3.482 3.58v1.996h-2.338v2.708h2.338V21H4a1 1 0 01-1-1V4a1 1 0 011-1h16a1 1 0 011 1v16a1 1 0 01-1 1h-4.598z"></path>
</svg>
</a>
<a
href="https://github.com/forem"
target="_blank"
class="c-link c-link--icon-alone c-link--block mx-1"
rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1a0an1fkcp2vpdp0stofh4mqjlz2ek9" class="crayons-icon c-link__icon"><title id="a1a0an1fkcp2vpdp0stofh4mqjlz2ek9">Github</title>
<path d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0022 12c0-5.525-4.475-10-10-10z"></path>
</svg>
</a>
<a
href="https://instagram.com/thepracticaldev"
target="_blank"
class="c-link c-link--icon-alone c-link--block mx-1"
rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a5c9io6cargatll07k7r6v4188lfo6kz" class="crayons-icon c-link__icon"><title id="a5c9io6cargatll07k7r6v4188lfo6kz">Instagram</title>
<path d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153.509.5.902 1.105 1.153 1.772.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 01-1.153 1.772c-.5.508-1.105.902-1.772 1.153-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 01-1.772-1.153 4.904 4.904 0 01-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 011.153-1.772A4.897 4.897 0 015.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2zm0 5a5 5 0 100 10 5 5 0 000-10zm6.5-.25a1.25 1.25 0 10-2.5 0 1.25 1.25 0 002.5 0zM12 9a3 3 0 110 6 3 3 0 010-6z"></path>
</svg>
</a>
<a
href="https://twitch.com/thepracticaldev"
target="_blank"
class="c-link c-link--icon-alone c-link--block mx-1"
rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="at1b8n9yj0u0gfuwub347aj3e6xrkx5i" class="crayons-icon c-link__icon"><title id="at1b8n9yj0u0gfuwub347aj3e6xrkx5i">Twitch</title>
<path d="M4.3 3H21v11.7l-4.7 4.7h-3.9l-2.5 2.4H7v-2.4H3V6.2L4.3 3zM5 17.4h4v2.4h.095l2.5-2.4h3.877L19 13.872V5H5v12.4zM15 8h2v4.7h-2V8zm0 0h2v4.7h-2V8zm-5 0h2v4.7h-2V8z"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="hamburger__overlay js-hamburger-trigger"></div>
</div>
<div id="active-broadcast" class="broadcast-wrapper"></div>
<div id="message-notice"></div>
<div id="base-payment-pointer" data-payment-pointer="$ilp.uphold.com/24HhrUGG7ekn"></div>
<div id="page-content" class="wrapper stories stories-show" data-current-page="stories-show">
<div id="page-content-inner">
<div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div>
<style>
.html-variant-wrapper { display: none}
</style>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.10/webcomponents-loader.js"
integrity="sha384-3HK5hxQbkFqOIxMbpROlRmRtYl2LBZ52t+tqcjzsmr9NJuOWQxl8RgQSyFvq2lhy"
crossorigin="anonymous" defer></script>
<script src="https://dev.to/packs/js/runtime~webShare-d3caf9661361b7cf171c.js" defer="defer"></script>
<script src="https://dev.to/packs/js/webShare-2b83d7b0b56b9902800a.chunk.js" defer="defer"></script>
<script src="https://dev.to/packs/js/runtime~articlePage-1ade43b31d3d0edbcd8e.js" defer="defer"></script>
<script src="https://dev.to/packs/js/0-cd30251b0a45c4901295.chunk.js" defer="defer"></script>
<script src="https://dev.to/packs/js/1-d02c88f21eb650128b69.chunk.js" defer="defer"></script>
<script src="https://dev.to/packs/js/articlePage-33a3356c79ab6235cdc5.chunk.js" defer="defer"></script>
<script src="https://dev.to/packs/js/runtime~commentDropdowns-ae78e39fefd61cd24c0f.js" defer="defer"></script>
<script src="https://dev.to/packs/js/commentDropdowns-75adb256f033cc8d88ce.chunk.js" defer="defer"></script>
<script type="application/ld+json">
{"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://dev.to/mattzajechowski/8-seo-best-practices-for-web-developers-484a"},"url":"https://dev.to/mattzajechowski/8-seo-best-practices-for-web-developers-484a","image":["https://dev.to/social_previews/article/269128.png","https://dev.to/social_previews/article/269128.png","https://dev.to/social_previews/article/269128.png"],"publisher":{"@context":"http://schema.org","@type":"Organization","name":"DEV Community 👩‍💻👨‍💻","logo":{"@context":"http://schema.org","@type":"ImageObject","url":"https://res.cloudinary.com/practicaldev/image/fetch/s--t7tVouP9--/c_limit,f_png,fl_progressive,q_80,w_192/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png","width":"192","height":"192"}},"headline":"8 SEO best practices for Web Developers","author":{"@context":"http://schema.org","@type":"Person","url":"https://dev.to/mattzajechowski","name":"Matt Zajechowski"},"datePublished":"2020-02-26T19:53:20Z","dateModified":"2020-02-26T19:53:20Z"}
</script>
<div class="crayons-layout crayons-layout--3-cols crayons-layout--article">
<aside class="crayons-layout__sidebar-left" aria-label="Article actions">
<div class="crayons-article-actions print-hidden">
<div class="crayons-article-actions__inner">
<button
id="reaction-butt-like"
aria-label="Like"
aria-pressed="false"
class="crayons-reaction crayons-reaction--like crayons-tooltip__activator relative"
data-category="like">
<span class="crayons-reaction__icon crayons-reaction__icon--inactive">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon">
<path d="M21.179 12.794l.013.014L12 22l-9.192-9.192.013-.014A6.5 6.5 0 0112 3.64a6.5 6.5 0 019.179 9.154zM4.575 5.383a4.5 4.5 0 000 6.364L12 19.172l7.425-7.425a4.5 4.5 0 10-6.364-6.364L8.818 9.626 7.404 8.21l3.162-3.162a4.5 4.5 0 00-5.99.334l-.001.001z"></path>
</svg>
</span>
<span class="crayons-reaction__count" id="reaction-number-like"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>
<span data-testid="tooltip" class="crayons-tooltip__content">
Like
</span>
</button>
<button
id="reaction-butt-unicorn"
aria-label="React with unicorn"
aria-pressed="false"
class="crayons-reaction crayons-reaction--unicorn crayons-tooltip__activator relative"
data-category="unicorn">
<span class="crayons-reaction__icon crayons-reaction__icon--inactive">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-hidden="true" class="crayons-icon">
<path d="M5.645 8.013c.013-.265-.261-.323-.4-.183-1.16 1.17-1.822 3.865-.344 7.32.294.961 1.938 3.19.84 6.131l-.003.006c-.094.255.206.404.366.263 1.395-1.226 1.933-3.593 1.1-6.375-.488-1.657-1.955-4.226-1.559-7.162zm-3.22 2.738c.05-.137-.124-.417-.326-.225-.939.893-1.316 2.863-.976 4.605.547 2.878 2.374 3.526 2.066 6.629-.028.102.176.38.348.154 1.546-2.033.409-4.453-.241-6.006-1.005-2.386-1.087-4.118-.871-5.157z" fill="#08090A"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.622 7.223l8.579-3.68c.598-.256 1.087.547.6.985l-6.618 5.941c.881 2.043 2.738 6.34 2.931 6.775 1.348 3.031-2.055 4.918-3.807 3.583a7.027 7.027 0 01-.623-.574c-.974-.965-2.419-2.398-5.207-1.877.284-2.115-.313-3.737-.883-5.288-.38-1.032-.747-2.032-.837-3.124-.346-3.329 3.763-8.23 4.696-7.953.386.115.326 1.229.266 2.319-.051.948-.102 1.88.143 2.12.145.142.428.43.76.773zM11.5 16.5l2.5.5 2.5 2 1-.5-2-4.5-1.5-4-1.5-1-1-1-1-1.5L10 8l-.5 1.5 1 2.5 1 4.5z"></path>
</svg>
</span>
<span class="crayons-reaction__count" id="reaction-number-unicorn"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>
<span data-testid="tooltip" class="crayons-tooltip__content">
Unicorn
</span>
</button>
<button
id="reaction-butt-readinglist"
aria-label="Add to reading list"
aria-pressed="false"
class="crayons-reaction crayons-reaction--readinglist crayons-tooltip__activator relative"
data-category="readinglist">
<span class="crayons-reaction__icon crayons-reaction__icon--inactive">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon">
<path d="M5 2h14a1 1 0 011 1v19.143a.5.5 0 01-.766.424L12 18.03l-7.234 4.536A.5.5 0 014 22.143V3a1 1 0 011-1zm13 2H6v15.432l6-3.761 6 3.761V4z"></path>
</svg>
</span>
<span class="crayons-reaction__count" id="reaction-number-readinglist"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>
<span data-testid="tooltip" class="crayons-tooltip__content">
Save
</span>
</button>
<div id="mod-actions-menu-btn-area" class="print-hidden hidden align-center"></div>
<div class="align-center m:relative">
<button id="article-show-more-button" aria-controls="article-show-more-dropdown" aria-expanded="false" aria-haspopup="true" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="Share post options">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="adile6j1q45n3gkdimfe6ei73hywgcvh" aria-hidden="true" class="crayons-icon dropdown-icon"><title id="adile6j1q45n3gkdimfe6ei73hywgcvh">More...</title><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12a2 2 0 11-4 0 2 2 0 014 0zm7 0a2 2 0 11-4 0 2 2 0 014 0zm5 2a2 2 0 100-4 2 2 0 000 4z"></path></svg>
</button>
<div id="article-show-more-dropdown" class="crayons-dropdown side-bar left-2 right-2 m:right-auto m:left-100 s:left-auto mb-1 m:mb-0 top-unset bottom-100 m:top-0 m:bottom-unset">
<div>
<button
id="copy-post-url-button"
class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0"
data-postUrl="https://dev.to/mattzajechowski/8-seo-best-practices-for-web-developers-484a">
<span class="fw-bold">Copy link</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="article-copy-icon" role="img" aria-labelledby="a8zw921bl29y6neixie9fbzx77c25wbv" aria-hidden="true" class="crayons-icon mx-2 shrink-0"><title id="a8zw921bl29y6neixie9fbzx77c25wbv">Copy link</title>
<path d="M7 6V3a1 1 0 011-1h12a1 1 0 011 1v14a1 1 0 01-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 013 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z"></path>
</svg>
</button>
<div id="article-copy-link-announcer" aria-live="polite" class="crayons-notice crayons-notice--success my-2 p-1" aria-live="polite" hidden>Copied to Clipboard</div>
</div>
<div class="Desktop-only">
<a
target="_blank"
class="crayons-link crayons-link--block"
rel="noopener"
href='https://twitter.com/intent/tweet?text=%228%20SEO%20best%20practices%20for%20Web%20Developers%22%20by%20%40MattZajechowski%20%23DEVCommunity%20https%3A%2F%2Fdev.to%2Fmattzajechowski%2F8-seo-best-practices-for-web-developers-484a'>
Share to Twitter
</a>
<a
target="_blank"
class="crayons-link crayons-link--block"
rel="noopener"
href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fdev.to%2Fmattzajechowski%2F8-seo-best-practices-for-web-developers-484a&title=8%20SEO%20best%20practices%20for%20Web%20Developers&summary=A%20sleek%20looking%20and%20well%20designed%20website%20is%20important%20to%20both%20web%20developers%20and%20business%20owners.%20Ho...&source=DEV%20Community%20%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB%F0%9F%91%A8%E2%80%8D%F0%9F%92%BB">
Share to LinkedIn
</a>
<a
target="_blank"
class="crayons-link crayons-link--block"
rel="noopener"
href="https://www.reddit.com/submit?url=https%3A%2F%2Fdev.to%2Fmattzajechowski%2F8-seo-best-practices-for-web-developers-484a&title=8%20SEO%20best%20practices%20for%20Web%20Developers">
Share to Reddit
</a>
<a
target="_blank"
class="crayons-link crayons-link--block"
rel="noopener"
href="https://news.ycombinator.com/submitlink?u=https%3A%2F%2Fdev.to%2Fmattzajechowski%2F8-seo-best-practices-for-web-developers-484a&t=8%20SEO%20best%20practices%20for%20Web%20Developers">
Share to Hacker News
</a>
<a
target="_blank"
class="crayons-link crayons-link--block"
rel="noopener"
href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdev.to%2Fmattzajechowski%2F8-seo-best-practices-for-web-developers-484a">
Share to Facebook
</a>
</div>
<web-share-wrapper shareurl="https://dev.to/mattzajechowski/8-seo-best-practices-for-web-developers-484a" sharetitle="8 SEO best practices for Web Developers" sharetext="A sleek looking and well designed website is important to both web developers and business owners. Ho..." template="web-share-button">
</web-share-wrapper>
<template id="web-share-button">
<a href="#" class="dropdown-link-row crayons-link crayons-link--block">Share Post via...</a>
</template>
<a href="/report-abuse" class="crayons-link crayons-link--block">Report Abuse</a>
</div>
</div>
</div>
</div>
<div class="html-variant-wrapper" id="html-variant-article-show-below-article" data-variant-id="382">
<div></div>
</div>
</aside>
<main id="main-content" class="crayons-layout__content grid gap-4">
<div class="article-wrapper">
<article class="crayons-card crayons-article mb-4"
id="article-show-container"
data-article-id="269128"
data-article-slug="8-seo-best-practices-for-web-developers-484a"
data-author-id="338542"
data-author-name="Matt Zajechowski"
data-author-username="mattzajechowski"
data-co-author-ids=""
data-path="/mattzajechowski/8-seo-best-practices-for-web-developers-484a"
data-pin-path="/stories/feed/pinned_article"
data-pinned-article-id=""
data-published="true"
data-scheduled="false"
>
<header class="crayons-article__header" id="main-title">
<div class="crayons-article__header__meta">
<div class="flex s:items-start flex-col s:flex-row">
<div id="action-space" class="crayons-article__actions mb-4 s:mb-0 s:order-last"></div>
<div class="flex flex-1 mb-5 items-start">
<div class="relative">
<a href="/mattzajechowski"><img class="radius-full align-middle" src="https://res.cloudinary.com/practicaldev/image/fetch/s--i9zKFJ4A--/c_fill,f_auto,fl_progressive,h_50,q_auto,w_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/338542/4e365628-542c-478a-879e-0ddaad27f41a.jpg" width="40" height="40" alt="Matt Zajechowski" /></a>
</div>
<div class="pl-3 flex-1">
<a href="/mattzajechowski" class="crayons-link fw-bold">Matt Zajechowski</a>
<p class="fs-xs color-base-60">
Posted on <time datetime="2020-02-26T19:53:20Z" class="date">Feb 26, 2020</time>
</p>
</div>
</div>
</div>
<h1 class="fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-2 medium">
8 SEO best practices for Web Developers
</h1>
<div class="spec__tags flex flex-wrap">
<a class="crayons-tag " style="
--tag-bg: rgba(59, 73, 223, 0.10);
--tag-prefix: #3b49df;
--tag-bg-hover: rgba(59, 73, 223, 0.10);
--tag-prefix-hover: #3b49df;
" href="/t/seo"><span class="crayons-tag__prefix">#</span>seo</a>
<a class="crayons-tag " style="
--tag-bg: rgba(245, 57, 0, 0.10);
--tag-prefix: #F53900;
--tag-bg-hover: rgba(245, 57, 0, 0.10);
--tag-prefix-hover: #F53900;
" href="/t/html"><span class="crayons-tag__prefix">#</span>html</a>
<a class="crayons-tag " style="
--tag-bg: rgba(247, 223, 30, 0.10);
--tag-prefix: #f7df1e;
--tag-bg-hover: rgba(247, 223, 30, 0.10);
--tag-prefix-hover: #f7df1e;
" href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a>
</div>
</div>
</header>
<div class="crayons-article__main">
<div class="crayons-article__body text-styles spec__body" data-article-id="269128" id="article-body">
<p>A sleek looking and well designed website is important to both web developers and business owners. However, the main goal of any website is to earn traffic from qualified business leads.</p>
<p>Not all website developers are savvy enough to keep up with all the ever changing <a href="https://moz.com/learn/seo/seo-cheat-sheet">SEO best practices</a> that will help a website be seen in Google and other search engines. I'm writing today to share a list of SEO tips for web developers that will help to ensure that your impressive development work gets the web traffic it deserves.</p>
<p><strong>Why SEO?</strong></p>
<p>The main goal of SEO (<em>Search Engine Optimization</em>) is to help drive potential customers to your website. SEO accomplishes this by properly optimizing websites for both robots and human users. The tips I will present below are a working guide to help you properly optimize the website you've developed. </p>
<p><strong>HTML basics</strong></p>
<p>Robots (<em>Google and other search engines</em>) and human users see websites differently. HTML optimization allow for robots to see what is intended for human users. One of the nice things about HTML is that it can be read and understood by web crawlers unlike other scripting languages like Java. In the section below I'll outline important HTML best practices that will help drive SEO results.</p>
<p><strong>Title tags</strong></p>
<p>A title tag is important for SEO because it gives a title to each page on your website. These tags are important for user experience because they are visible in the search results and often one of the first things a user interacts with when deciding whether to click on your website. </p>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VlgVHhs7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://unamo.com/blog/wp-content/uploads/2017/07/word-image-9.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VlgVHhs7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://unamo.com/blog/wp-content/uploads/2017/07/word-image-9.png" alt="title tag best practices" loading="lazy"></a></p>
<p>Best practices include making sure that each page on your website has a unique title tag. Make sure to include a noindex,follow tag to prevent any duplicity issues. Canonicals are also appropriate in some situations. More on that later.</p>
<p><strong>Best practices for title tags</strong></p>
<p>• Title tags should be between 50-60 characters in length.<br>
• Title tags should include keywords, but only if they are natural sounding.<br>
• Avoid keyword stuffing in your title tags, try to limit it to 1 or 2 primary keywords.<br>
• Include your brand name at the end of the title tag with a | separating the keywords from the brand name.</p>
<p><strong>H1 Tags</strong></p>
<p>The main purpose of the H1 tag is tell search engines what the most important keywords on the page are. Be sure to include just one H1 tag per landing page. Make sure the keyword is relevant to the topic of the page. It is important to write your H1 tag for your website users first and foremost, so make sure it is natural sounding and not catered to robots. </p>
<p><strong>URL best practices</strong></p>
<p>URL's should not be taken for granted for by developers. Well-structured URL's are important to SEO because they give a clear explanation of the order of the site to the robot crawler. </p>
<p>Listed below are a few URL best practices, as well as examples of good and bad URL structures:</p>
<p><strong>1. Make sure your URL's can be read by your users so they understand what the page is about</strong><br>
Good: <a href="https://dev.to/blog/seo-tips">https://dev.to/blog/seo-tips</a><br>
Bad : <a href="https://dev.to/blog/id2004_6479">https://dev.to/blog/id2004_6479</a></p>
<p><strong>2. Keywords are fine, but don't overdue it</strong><br>
Good: <a href="https://dev.to/blog/seo-tips">https://dev.to/blog/seo-tips</a><br>
Bad: <a href="https://dev.to/blog/seo-tips-for-developers-and-tips-for-beginner-devlopers">https://dev.to/blog/seo-tips-for-developers-and-tips-for-beginner-devlopers</a></p>
<p><strong>3. Use dashes or underscores as word separators over spaces because of how they render</strong><br>
Good: <a href="https://dev.to/blog/seo-tips">https://dev.to/blog/seo-tips</a><br>
Bad: <a href="https://dev.to/blog/seo%tips%for%developer%students">https://dev.to/blog/seo%tips%for%developer%students</a></p>
<p><strong>HTTP status codes</strong></p>
<p>There are several HTTP status codes that every developer should be aware of, especially when performing a site migration. </p>
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8r3IVIwk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://miro.medium.com/max/920/1%2Aw_iicbG7L3xEQTArjHUS6g.jpeg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8r3IVIwk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://miro.medium.com/max/920/1%2Aw_iicbG7L3xEQTArjHUS6g.jpeg" alt="common HTTP status codes" loading="lazy"></a></p>
<p><strong>200</strong></p>
<p>A 200 status code means all systems are go. </p>
<p><strong>301</strong> </p>
<p>When performing a site migration, you need to migrate both content and SEO link equity. A 301 redirect will preserve most link equity from the old domain to the new domain. </p>
<p><strong>404</strong></p>
<p>A 404 means the page is not found. Your page is missing or dead. A 404 error can create a bad user experience for anyone viewing your website so be sure to try and address why this error is happening.</p>
<p><strong>500</strong></p>
<p>Your server is experiencing an error however your there is nothing wrong with your website. </p>
<p><strong>Canonicalization</strong></p>
<p>Cannonical tags alert a search engine to the preferred URL to display in their search results. Without canonical tags, similar pages and content start to fight each other for superior rank, which can harm your site's overall visibility in the search engines. This happens commonly with eCommerce pages. Properly using the canonical tag should be a skill to master for every web developer. </p>
<p><strong>Site speed</strong></p>
<p>One of the prime ranking factors in the Google search rankings is site speed. Site speed is key to improving a user's experience with your website. Because of this Google rewards sites with better site speed. </p>
<p>Googles <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Tool</a> is a wonderful tool for developers to test their site speed and find suggestions from Google on helping your page load faster. They also provide field data reports that shows how your page speed compares to other pages in their index over the past 30 days. </p>
<p>I hope these tips that I've outlined leave you better equipped as a web developer to properly optimize for SEO. If you have any follow up questions, me or my team of <a href="https://www.digitalthirdcoast.com/chicago-seo-agency">Chicago SEO</a> experts would be happy to answer them. </p>
<p>I've included my social profiles as well. Feel free to reach out in the comment section or connect via <a href="https://twitter.com/MattZajechowski">Twitter</a> or <a href="https://www.linkedin.com/in/matthewzajechowski/">Linkedin</a>. </p>
</div>
</div>
<section id="comments" data-follow-button-container="true" data-updated-at="2022-09-04 00:12:57 UTC" class="text-padding mb-4 border-t-1 border-0 border-solid border-base-10">
<header class="relative flex justify-between items-center mb-6">
<h2 class="crayons-subtitle-1">
Discussion <span class="js-comments-count" data-comments-count="0">(0)</span>
</h2>
<div id="comment-subscription" class="print-hidden">
<div class="crayons-btn-group">
<span class="crayons-btn crayons-btn--outlined">Subscribe</span>
</div>
</div>
</header>
<div
id="comments-container"
data-testid="comments-container"
data-commentable-id="269128"
data-commentable-type="Article"
data-has-recent-comment-activity="false">
<div id="response-templates-data" class="hidden"></div>
<script src="https://dev.to/packs/js/runtime~validateFileInputs-8d835be3c3cad3ed8433.js" defer="defer"></script>
<script src="https://dev.to/packs/js/validateFileInputs-734d36e61bb7ec836bb9.chunk.js" defer="defer"></script>
<form class="comment-form print-hidden" id="new_comment" action="/comments" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" autocomplete="off" />
<input type="hidden" name="authenticity_token" value="NOTHING" id="new_comment_authenticity_token">
<input value="269128" autocomplete="off" type="hidden" name="comment[commentable_id]" id="comment_commentable_id" />
<input value="Article" autocomplete="off" type="hidden" name="comment[commentable_type]" id="comment_commentable_type" />
<span class="crayons-avatar m:crayons-avatar--l mr-2 shrink-0">
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RmY55OKL--/c_limit,f_auto,fl_progressive,q_auto,w_256/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png" width="32" height="32" alt="pic" class="crayons-avatar__image overflow-hidden" id="comment-primary-user-profile--avatar" loading="lazy" />
</span>
<div class="comment-form__inner">
<div class="comment-form__field" data-tracking-name="comment_form_textfield">
<textarea placeholder="Add to the discussion" onfocus="handleFocus(event)" onkeyup="handleKeyUp(event)" onkeydown="handleKeyDown(event)" oninput="handleChange(event)" id="text-area" required="required" class="crayons-textfield comment-textarea crayons-textfield--ghost" aria-label="Add a comment to the discussion" name="comment[body_markdown]">
</textarea>
</div>
<div class="response-templates-container crayons-card crayons-card--secondary p-4 mb-4 comment-form__templates fs-base hidden">
<header class="mb-3">
<button type="button" class="crayons-btn personal-template-button active" data-target-type="personal" data-form-id="new_comment">Personal</button>
<button type="button" class="crayons-btn moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">Trusted User</button>
</header>
<img class="loading-img hidden" src="https://dev.to/assets/loading-ellipsis-b714cf681fd66c853ff6f03dd161b77aa3c80e03cdc06f478b695f42770421e9.svg" alt="loading" loading="lazy" />
<div class="personal-responses-container">
</div>
<div class="moderator-responses-container hidden">
</div>
<a target="_blank" rel="noopener nofollow" href="/settings/response-templates">
Create template
</a>
<p>Templates let you quickly answer FAQs or store snippets for re-use.</p>
</div>
<div class="comment-form__preview text-styles text-styles--secondary" id="preview-div"></div>
<div class="comment-form__buttons mb-4">
<button type="submit" class="crayons-btn mr-2 js-btn-enable" onclick="validateField(event)" data-tracking-name="comment_submit_button" disabled>Submit</button>
<button type="button" class="preview-toggle crayons-btn crayons-btn--secondary comment-action-preview js-btn-enable mr-2" data-tracking-name="comment_preview_button" disabled>Preview</button>
<a href="/404.html" class="dismiss-edit-comment crayons-btn crayons-btn--ghost js-btn-dismiss hidden">Dismiss</a>
</div>
</div>
<div class="code-of-conduct" id="toggle-code-of-conduct-checkbox"></div>
</form>
<div class="comments" id="comment-trees-container">
</div>
</div>
<div class="align-center">
<nav class="fs-s align-center block" aria-label="Conduct controls">
<a href="/code-of-conduct" class="crayons-link crayons-link--secondary">Code of Conduct</a>
<span class="opacity-25 px-2" role="presentation">&bull;</span>
<a href="/report-abuse" class="crayons-link crayons-link--secondary">Report abuse</a>
</nav>
</div>
</section>
<div id="hide-comments-modal" class="hidden">
<form id="hide-comments-modal__form" class="hide-comments-modal__form" data-type="json" action="/comments/hide" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="&#x2713;" autocomplete="off" /><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="j4SxTIiDFVLjxkTp_BKIN_MZ8A6ETFPGiG-R8KhQHJj1TfDUkBftmF4HTt6dik6T7f_arbtri6Z0zXC8kUY50g" autocomplete="off" />
<div class="hide-comments-modal__content">
<p class="pb-2">
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's <a id="hide-comments-modal__comment-permalink" href="#">permalink</a>.
</p>
<label class="crayons-field crayons-field--checkbox my-2">
<input name="hide_children" type="hidden" value="0" autocomplete="off" /><input class="hide_children crayons-checkbox" type="checkbox" value="1" name="hide_children" id="hide_children" />
<p class="crayons-field__label">Hide child comments as well</p>
</label>
<p class="pb-4 pt-2">
<button type="submit" class="crayons-btn">
Confirm
</button>
</p>
</div>
</form> <p class="fs-s color-base-60">For further actions, you may consider blocking this person and/or <a id="hide-comments-modal__report-link" href="/report-abuse">reporting abuse</a></p>
</div>
</article>
<div class="crayons-card crayons-card--secondary p-4 crayons-sponsorship-article" data-display-unit data-id="175">
<h4> <a href="#did-you-know" class="anchor"> </a> 🤔 Did you know?</h4><p> <br>📚 You can adjust your experience level in <a href="https://dev.to/settings">Settings</a> to see more relevant content.</p>
</div>
<section class="crayons-card crayons-card--secondary text-padding mb-4 print-hidden" id="bottom-content-read-next">
<h2 class="crayons-subtitle-1">Read next</h2>
<a href="/heyiftikhar/top-5-html-tricks-and-tips-40km" data-preload-image="" class="crayons-link mt-6 block">
<div class="flex items-center">
<span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0">
<img loading="lazy" alt="heyiftikhar profile image" class="crayons-avatar__image" width="100" height="100" src="https://res.cloudinary.com/practicaldev/image/fetch/s--w76Yk6wm--/c_imagga_scale,f_auto,fl_progressive,h_100,q_auto,w_100/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/916746/bd34697c-4f6e-4907-918a-affc0d5837f6.jpg" />
</span>
<div>
<h3 class="fs-xl mb-0 lh-tight">Top 5 HTML Tricks and Tips</h3>
<p class="opacity-75 pt-1">
IFTIKHAR - <time datetime="2022-08-28T08:23:47Z">Aug 28</time>
</p>
</div>
</div>
</a>
<a href="/shankarsurya035/how-to-launch-an-amazon-linux-ec2-instance-using-terraform-2ccc" data-preload-image="https://res.cloudinary.com/practicaldev/image/fetch/s--Iklffg2E--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jpb4ajg5wb3oydbggur.png" class="crayons-link mt-6 block">
<div class="flex items-center">
<span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0">
<img loading="lazy" alt="shankarsurya035 profile image" class="crayons-avatar__image" width="100" height="100" src="https://res.cloudinary.com/practicaldev/image/fetch/s--lw2OqjRv--/c_imagga_scale,f_auto,fl_progressive,h_100,q_auto,w_100/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/795191/08f898cf-4aee-4553-ae73-d5cd4ecab039.jpeg" />
</span>
<div>
<h3 class="fs-xl mb-0 lh-tight">How to Launch an Amazon Linux EC2 Instance Using Terraform</h3>
<p class="opacity-75 pt-1">
Surya Shankar - <time datetime="2022-08-29T08:58:00Z">Aug 29</time>
</p>
</div>
</div>
</a>
<a href="/maurerkrisztian/why-we-need-backend-and-forntend-454k" data-preload-image="https://res.cloudinary.com/practicaldev/image/fetch/s--zphuzQte--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bai4bn50tfy6phiink1h.jpg" class="crayons-link mt-6 block">
<div class="flex items-center">
<span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0">
<img loading="lazy" alt="maurerkrisztian profile image" class="crayons-avatar__image" width="100" height="100" src="https://res.cloudinary.com/practicaldev/image/fetch/s--GTqR_goS--/c_imagga_scale,f_auto,fl_progressive,h_100,q_auto,w_100/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/894671/ea9eea74-8db2-44de-be91-21dc47ed70ca.jpg" />
</span>
<div>
<h3 class="fs-xl mb-0 lh-tight">Why we need backend and forntend?</h3>
<p class="opacity-75 pt-1">
Maurer Krisztián - <time datetime="2022-09-01T14:35:39Z">Sep 1</time>
</p>
</div>
</div>
</a>
<a href="/justin_graysen/15-tips-to-improve-as-a-javascript-developer-197e" data-preload-image="https://res.cloudinary.com/practicaldev/image/fetch/s--d5LVtzhe--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy73lgs0l8bmr4ddk6sj.jpeg" class="crayons-link mt-6 block">
<div class="flex items-center">
<span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0">
<img loading="lazy" alt="justin_graysen profile image" class="crayons-avatar__image" width="100" height="100" src="https://res.cloudinary.com/practicaldev/image/fetch/s--LUTL4fX5--/c_imagga_scale,f_auto,fl_progressive,h_100,q_auto,w_100/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/912958/3cdcec85-90c3-46cc-80ba-a8a0b0a208d5.jpg" />
</span>
<div>
<h3 class="fs-xl mb-0 lh-tight">15 tips to improve as a Javascript developer</h3>
<p class="opacity-75 pt-1">
Justin Graysen - <time datetime="2022-09-01T17:50:09Z">Sep 1</time>
</p>
</div>
</div>
</a>
</section>
</div>
</main>
<aside class="crayons-layout__sidebar-right" aria-label="Author details">
<div class="crayons-article-sticky grid gap-4 break-word" id="article-show-primary-sticky-nav">
<div class="crayons-card crayons-card--secondary branded-7 p-4 pt-0 gap-4 grid" style="border-top-color: #010b1b;">
<div class="-mt-4">
<a href="/mattzajechowski" class="flex">
<span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0">
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KMnevjQP--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/338542/4e365628-542c-478a-879e-0ddaad27f41a.jpg" class="crayons-avatar__image" alt="" loading="lazy" />
</span>
<span class="crayons-link crayons-subtitle-2 mt-5">Matt Zajechowski</span>
</a>
</div>
<div class="print-hidden">
<button name="button" type="button" data-info="{&quot;className&quot;:&quot;User&quot;,&quot;style&quot;:&quot;&quot;,&quot;id&quot;:338542,&quot;name&quot;:&quot;Matt Zajechowski&quot;}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Matt Zajechowski" aria-pressed="false">Follow</button>
</div>
<div class="color-base-70">
Passionate about SEO, search and web dev.
</div>
<div class="user-metadata-details">
<ul class="user-metadata-details-inner">
<li>
<div class="key">
Location
</div>
<div class="value">
Chicago, IL
</div>
</li>
<li>
<div class="key">
Joined
</div>
<div class="value">
<time datetime="2020-02-19T19:50:07Z" class="date">Feb 19, 2020</time>
</div>
</li>
</ul>
</div>
</div>
<div class="crayons-card crayons-card--secondary">
<header class="crayons-card__header">
<h3 class="crayons-subtitle-2">
Trending on <a href="https://dev.to">DEV Community 👩‍💻👨‍💻</a>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24" role="img" aria-labelledby="a8jn7zma2e2lcm7p3xv3wyoeuuv14q4j" class="crayons-icon crayons-icon--default"><title id="a8jn7zma2e2lcm7p3xv3wyoeuuv14q4j">Hot</title>
<g class="nc-icon-wrapper">
<path fill="#F4900C" d="M39 23a16.96 16.96 0 00-1.04-5.868c-.46 5.389-3.333 8.157-6.335 6.868-2.812-1.208-.917-5.917-.777-8.164.236-3.809-.012-8.169-6.931-11.794 2.875 5.5.333 8.917-2.333 9.125-2.958.231-5.667-2.542-4.667-7.042-3.238 2.386-3.332 6.402-2.333 9 1.042 2.708-.042 4.958-2.583 5.208-2.84.28-4.418-3.041-2.963-8.333A16.936 16.936 0 005 23c0 9.389 7.611 17 17 17s17-7.611 17-17z"></path>
<path fill="#FFCC4D" d="M32.394 27.999c.148 3.084-2.561 4.293-4.019 3.709-2.106-.843-1.541-2.291-2.083-5.291s-2.625-5.083-5.708-6c2.25 6.333-1.247 8.667-3.08 9.084-1.872.426-3.753-.001-3.968-4.007A11.964 11.964 0 0010 34c0 .368.023.73.055 1.09C13.125 38.124 17.342 40 22 40s8.875-1.876 11.945-4.91c.032-.36.055-.722.055-1.09 0-2.187-.584-4.236-1.606-6.001z"></path>
</g>
</svg>
</h3>
</header>
<div>
<a class="crayons-link crayons-link--contentful flex" href="/brandonbawe/react-a-beginner-friendly-introduction-51c7">
<span class="crayons-avatar mr-2 shrink-0">
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--oczuErWx--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/417961/a1621322-64f8-42e8-a9c9-0e2ae104a40b.jpg" class="crayons-avatar__image" loading="lazy" alt="Brandon Bawe profile image">
</span>
<div>
React: A beginner-friendly Introduction
<div class="crayons-link__secondary -ml-1">
<span class="mr-1"><span class="opacity-50">#</span>beginners</span>
<span class="mr-1"><span class="opacity-50">#</span>webdev</span>
<span class="mr-1"><span class="opacity-50">#</span>react</span>
<span class="mr-1"><span class="opacity-50">#</span>javascript</span>
</div>
</div>
</a>
<a class="crayons-link crayons-link--contentful flex" href="/jamieswift90/top-webstorm-plugins-to-level-up-your-productivity-4439">
<span class="crayons-avatar mr-2 shrink-0">
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mp4WbXgq--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/638222/6b1cf063-3e3a-406b-abc3-a389abbd4a29.png" class="crayons-avatar__image" loading="lazy" alt="Jamie Swift profile image">
</span>
<div>
Top WebStorm Plugins To Level Up Your Productivity
<div class="crayons-link__secondary -ml-1">
<span class="mr-1"><span class="opacity-50">#</span>javascript</span>
<span class="mr-1"><span class="opacity-50">#</span>webdev</span>
<span class="mr-1"><span class="opacity-50">#</span>programming</span>
<span class="mr-1"><span class="opacity-50">#</span>productivity</span>
</div>
</div>
</a>
<a class="crayons-link crayons-link--contentful flex" href="/rohitmore07/mistakes-when-learning-to-code-4j40">
<span class="crayons-avatar mr-2 shrink-0">
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2Tul0186--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/809821/648e2cd1-8b36-4bd8-bcb4-0a1eff347aa1.jpg" class="crayons-avatar__image" loading="lazy" alt="Rohit More profile image">
</span>
<div>
Mistakes when learning to code
<div class="crayons-link__secondary -ml-1">
<span class="mr-1"><span class="opacity-50">#</span>programming</span>
<span class="mr-1"><span class="opacity-50">#</span>beginners</span>
<span class="mr-1"><span class="opacity-50">#</span>webdev</span>
<span class="mr-1"><span class="opacity-50">#</span>productivity</span>
</div>
</div>
</a>
</div>
</div>
</div>
</aside>
</div>
<div class="mod-actions-menu print-hidden"></div>
<div data-testid="unpublish-post-modal-container" class="unpublish-post-modal-container hidden"></div>
<div id="suspend-modal-content" class="hidden">
<p>
Once suspended, mattzajechowski will not be able to comment or publish posts until their suspension is removed.
</p>
<div class="crayons-field mt-4">
<label
for="suspend-reason-userid-338542"
class="crayons-field__label">
Note:
</label>
<textarea
id="suspend-reason-userid-338542"
rows="4"
cols="70"
placeholder="Reason for suspension"
class="crayons-textfield"
aria-describedby="suspension-reason-error"
required></textarea>
<p
id="suspension-reason-error"
data-testid="suspension-reason-error"
class="suspend-reason-error crayons-field__description"
style="color: red;"
aria-live="assertive">
</p>
</div>
<div class="mt-4">
<button
id="submit-user-suspend-btn"
class="c-btn c-btn--primary c-btn--destructive"
data-btn-action="suspend"
data-reason-selector="#suspend-reason-userid-338542"
data-user-id="338542"
data-username="mattzajechowski">
Submit &amp; Suspend
</button>
</div>
</div>
<div id="unsuspend-modal-content" class="hidden">
<p>
Once unsuspended, mattzajechowski will be able to comment and publish posts again.
</p>
<div class="crayons-field mt-4">
<label
for="unsuspend-reason-userid-338542"
class="crayons-field__label">
Note:
</label>
<textarea
id="unsuspend-reason-userid-338542"
rows="4"
cols="70"
placeholder="Reason for unsuspension"
class="crayons-textfield"
aria-describedby="unsuspension-reason-error"
required></textarea>
<p
id="unsuspension-reason-error"
data-testid="unsuspension-reason-error"
class="unsuspend-reason-error crayons-field__description"
style="color: red;"
aria-live="assertive">
</p>
</div>
<div class="mt-4">
<button
id="submit-user-unsuspend-btn"
class="c-btn c-btn--primary"
data-btn-action="unsuspend"
data-reason-selector="#unsuspend-reason-userid-338542"
data-user-id="338542"
data-username="mattzajechowski">
Submit &amp; Unsuspend
</button>
</div>
</div>
<div id="unpublish-all-posts" class="hidden">
<p>
Once unpublished, all posts by mattzajechowski will become hidden and only accessible to themselves.
</p>
<p class="mt-2">
If mattzajechowski is not suspended, they can still re-publish their posts from their dashboard.
</p>
<div class="mt-4">
<button
id="unpublish-all-posts-submit-btn"
class="c-btn c-btn--destructive c-btn--primary"
data-user-id="338542">
Unpublish all posts
</button>
</div>
</div>
<div id="unpublish-post-modal" class="hidden">
<p>
Once unpublished, this post will become invisible to the public
and only accessible to Matt Zajechowski.
</p>
<p>They can still re-publish the post if they are not suspended.</p>
<div class="mt-4">
<button
destructive
variant="primary"
class="c-btn c-btn--primary c-btn--destructive"
id="confirm-unpublish-post-action">
Unpublish post
</button>
</div>
</div>
<div id="flag-user-modal-content" class="hidden">
<p>
Thanks for keeping DEV Community 👩‍💻👨‍💻 safe. Here is what you can do to flag mattzajechowski:
</p>
<div class="crayons-field crayons-field--radio mt-4">
<input
type="radio"
id="flag-user-radio-input"
name="flag-user-radio-input"
class="crayons-radio"
data-reactable-id="338542"
data-category="vomit"
data-reactable-type="User" />
<label for="flag-user-radio-input" class="crayons-field__label">
Make all posts by mattzajechowski less visible
<p class="crayons-field__description">
mattzajechowski consistently posts content that violates DEV Community 👩‍💻👨‍💻's
code of conduct because it is harassing, offensive or spammy.
</p>
</label>
</div>
<div class="mt-4">
<a
href="javascript:void(0);"
id="report-inappropriate-content"
data-report-abuse-link="/report-abuse?url=https://dev.to/mattzajechowski/8-seo-best-practices-for-web-developers-484a">
Report other inappropriate conduct
</a>
</div>
<div class="mt-6">
<p
id="unselected-radio-error"
data-testid="unselected-radio-error"
class="crayons-field__description mb-4"
style="color: red;"
aria-live="assertive">
</p>
<button
id="confirm-flag-user-action"
class="c-btn c-btn--primary c-btn--destructive"
data-category="vomit"
data-reactable-type="User"
data-user-id="338542"
data-username="mattzajechowski">
Confirm Flag
</button>
</div>
</div>
<div id="unflag-user-modal-content" class="hidden">
<p>
Unflagging mattzajechowski will restore default visibility to their posts.
</p>
<div class="mt-6">
<button
id="confirm-unflag-user-action"
class="c-btn c-btn--primary"
data-category="vomit"
data-reactable-type="User"
data-user-id="338542"
data-username="mattzajechowski">
Confirm Unflag
</button>
</div>
</div>
<div class="fullscreen-code js-fullscreen-code"></div>
<script src="https://dev.to/packs/js/runtime~followButtons-91991dc218fd32d1de3d.js" defer="defer"></script>
<script src="https://dev.to/packs/js/7-9d9e7f322e96466bfbbe.chunk.js" defer="defer"></script>
<script src="https://dev.to/packs/js/followButtons-eadbbd9ac23fd9fd0110.chunk.js" defer="defer"></script>
<script>
var waitingOnPodcast = setInterval(function() {
if (typeof initializePodcastPlayback !== 'undefined') {
initializePodcastPlayback();
clearInterval(waitingOnPodcast);
}
}, 1);
if (document.head.querySelector('meta[name="user-signed-in"][content="true"]')) {
function displayPollResults(json) {
var totalVotes = json.voting_data.votes_count;
json.voting_data.votes_distribution.forEach(function(point) {
var pollOptionItem = document.getElementById('poll_option_list_item_'+point[0]);
var optionText = document.getElementById('poll_option_label_'+point[0]).textContent;
if (json.user_vote_poll_option_id === point[0]) {
var votedClass = 'optionvotedfor'
} else {
var votedClass = 'optionnotvotedfor'
}
if (totalVotes === 0) {
var percent = 0;
} else {
var percent = (point[1]/totalVotes)*100;
}
var roundedPercent = Math.round( percent * 10 ) / 10
var percentFromRight = (100-roundedPercent)
var html = '<span><span class="ltag-votepercent ltag-'+votedClass+'" style="right:'+percentFromRight+'%"></span> <span class="ltag-votepercenttext">'+optionText+' — '+roundedPercent+'%</span></span>';
pollOptionItem.innerHTML = html;
pollOptionItem.classList.add('already-voted')
document.getElementById('showmethemoney-'+json.poll_id).innerHTML = '<span class="ltag-voting-results-count">'+totalVotes+' total votes</span>';
})
}
var polls = document.getElementsByClassName('ltag-poll');
for (var i = 0; i < polls.length; i += 1) {
var poll = polls[i]
var pollId = poll.dataset.pollId
window.fetch('/poll_votes/'+pollId)
.then(function(response){
response.json().then(
function(json) {
if (json.voted) {
displayPollResults(json)
} else {
var els = document.getElementById('poll_'+json.poll_id).getElementsByClassName('ltag-polloption');
for (i = 0; i < els.length; i += 1) {
els[i].addEventListener('click', function(e) {
var tokenMeta = document.querySelector("meta[name='csrf-token']")
if (!tokenMeta) {
alert('Whoops. There was an error. Your vote was not counted. Try refreshing the page.')
return
}
var csrfToken = tokenMeta.getAttribute('content')
var optionId = e.target.dataset.optionId
window.fetch('/poll_votes', {
method: 'POST',
headers: {
'X-CSRF-Token': csrfToken,
'Content-Type': 'application/json',
},
body: JSON.stringify({poll_vote: { poll_option_id: optionId } }),
credentials: 'same-origin',
}).then(function(response){
response.json().then(function(j){displayPollResults(j)})
})
});
}
document.getElementById('showmethemoney-'+json.poll_id).addEventListener('click', function() {
pollId = this.dataset.pollId
window.fetch('/poll_skips', {
method: 'POST',
headers: {
'X-CSRF-Token': csrfToken,
'Content-Type': 'application/json',
},
body: JSON.stringify({poll_skip: {poll_id: pollId }}),
credentials: 'same-origin',
}).then(function(response){
response.json().then(function(j){displayPollResults(j)})
})
});
}
}
)
})
}
} else {
var els = document.getElementsByClassName('ltag-poll')
for (i = 0; i < els.length; i += 1) {
els[i].onclick = function(e) {
if (typeof showLoginModal !== "undefined") {
showLoginModal();
}
}
}
}
function activateRunkitTags() {
if (!areAnyRunkitTagsPresent())
return
var checkRunkit = setInterval(function() {
try {
dynamicallyLoadRunkitLibrary()
if (typeof(RunKit) === 'undefined') {
return
}
replaceTagContentsWithRunkitWidget()
clearInterval(checkRunkit);
} catch(e) {
console.error(e);
clearInterval(checkRunkit);
}
}, 200);
}
function isRunkitTagAlreadyActive(runkitTag) {
return runkitTag.querySelector("iframe") !== null;
};
function areAnyRunkitTagsPresent() {
var presentRunkitTags = document.getElementsByClassName("runkit-element");
return presentRunkitTags.length > 0
}
function replaceTagContentsWithRunkitWidget() {
var targets = document.getElementsByClassName("runkit-element");
for (var i = 0; i < targets.length; i++) {
if (isRunkitTagAlreadyActive(targets[i])) {
continue;
}
var wrapperContent = targets[i].textContent;
if (/^(<iframe src)/.test(wrapperContent) === false) {
if (targets[i].children.length > 0) {
var preamble = targets[i].children[0].textContent;
var content = targets[i].children[1].textContent;
targets[i].innerHTML = "";
var notebook = RunKit.createNotebook({
element: targets[i],
source: content,
preamble: preamble
});
}
}
}
};
function dynamicallyLoadRunkitLibrary() {
if (typeof(dynamicallyLoadScript) === "undefined")
return
dynamicallyLoadScript("//embed.runkit.com")
}
activateRunkitTags();
var videoPreviews = document.getElementsByClassName("ltag__twitter-tweet__media__video-wrapper");
[].forEach.call(videoPreviews, function(el) {
el.onclick = function(e) {
var divHeight = el.offsetHeight;
el.style.maxHeight = divHeight + "px";
el.getElementsByClassName("ltag__twitter-tweet__media--video-preview")[0].style.display = "none";
el.getElementsByClassName("ltag__twitter-tweet__video")[0].style.display = "block";
el.getElementsByTagName("video")[0].play();
}
});
var tweets = document.getElementsByClassName("ltag__twitter-tweet__main");
[].forEach.call(tweets, function(tweet){
tweet.onclick = function(e) {
if (e.target.nodeName == "A" || e.target.parentElement.nodeName == "A") {
return;
}
window.open(tweet.dataset.url,"_blank");
}
});
</script>
<div id="runtime-banner-container"></div>
</div>
</div>
<footer class="crayons-footer print-hidden">
<div id="footer-container" class="crayons-footer__container">
<p class="fs-s crayons-footer__description">
<a class="c-link c-link--branded fw-medium" aria-label="DEV Community 👩‍💻👨‍💻 Home" href="/">DEV Community 👩‍💻👨‍💻</a> — A constructive and inclusive social network for software developers. With you every step of your journey.
</p>
<div class="fs-s">
<p>Built on <a class="c-link c-link--branded" target="_blank" rel="noopener" href="https://www.forem.com">Forem</a> — the <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/opensource">open source</a> software that powers <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to">DEV</a> and other inclusive communities.</p>
<p>Made with love and <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/rails">Ruby on Rails</a>. DEV Community 👩‍💻👨‍💻 <span title="copyright">&copy;</span> 2016 - 2022.</p>
</div>
<a href="https://www.forem.com" target="_blank" rel="noopener" class="c-link c-link c-link--block c-link--icon-alone self-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" aria-labelledby="akbyshgrko5nnw4cuo3a1gi9wjeu9ug4" class="crayons-icon crayons-icon--default c-link__icon"><title id="akbyshgrko5nnw4cuo3a1gi9wjeu9ug4">Forem logo</title>
<g clip-path="url(#clip0)" fill="#1AB3A6">
<path d="M4.603 1.438a8.056 8.056 0 017.643 5.478 8.543 8.543 0 00-3.023 5.968H8.054C3.606 12.884 0 9.296 0 4.87V1.468a.03.03 0 01.03-.03h4.573zM23.97 6.515a.03.03 0 01.03.03v2.833c0 4.11-3.354 7.442-7.491 7.442h-2.881v5.726h-2.305V14.53l.022-1.145c.294-3.843 3.526-6.87 7.469-6.87h5.155z"></path>
</g>
<defs>
<clipPath id="clip0">
<path fill="#fff" d="M0 0h24v24H0z"></path>
</clipPath>
</defs>
</svg>
</a>
</div>
</footer>
<div id="snack-zone"></div>
<div id="global-signup-modal" class="authentication-modal hidden">
<div class="authentication-modal__container">
<figure class="authentication-modal__image-container">
<img class="authentication-modal__image" src="https://res.cloudinary.com/practicaldev/image/fetch/s--pcSkTMZL--/c_limit,f_auto,fl_progressive,q_80,w_190/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png"
alt="DEV Community 👩‍💻👨‍💻" loading="lazy" />
</figure>
<div class="authentication-modal__content">
<p class="authentication-modal__description">
We&#39;re a place where coders share, stay up-to-date and grow their careers.
</p>
</div>
<div class="authentication-modal__actions">
<a href="/enter" class="crayons-btn" aria-label="Log in" data-no-instant>
Log in
</a>
<a href="/enter?state=new-user" class="crayons-btn crayons-btn--ghost-brand" aria-label="Create new account" data-no-instant>
Create account
</a>
</div>
</div>
</div>
<script src="https://dev.to/packs/js/runtime~signupModalShortcuts-b9beb5ee6e65857034c5.js" defer="defer"></script>
<script src="https://dev.to/packs/js/signupModalShortcuts-08cc6638ea94ce22e5a3.chunk.js" defer="defer"></script>
<div id="i18n-translations" data-translations="{&quot;en&quot;:{&quot;core&quot;:{&quot;add_comment&quot;:&quot;Add comment&quot;,&quot;beta&quot;:&quot;beta&quot;,&quot;comment&quot;:&quot;Comment&quot;,&quot;copy_link&quot;:&quot;Copy link&quot;,&quot;edit_profile&quot;:&quot;Edit profile&quot;,&quot;follow&quot;:&quot;Follow&quot;,&quot;follow_back&quot;:&quot;Follow back&quot;,&quot;following&quot;:&quot;Following&quot;,&quot;like&quot;:&quot;Like&quot;,&quot;loading&quot;:&quot;loading...&quot;,&quot;reaction&quot;:&quot;Reaction&quot;,&quot;report_abuse&quot;:&quot;Report abuse&quot;,&quot;search&quot;:&quot;Search&quot;,&quot;success_settings&quot;:&quot;Successfully updated settings.&quot;}}}"></div>
</body>
</html>