Have 100% with Search Engine Optimization

#webdev #seo #indexing

Introduction

Do you dream of having a top SEO optimization or simply more impressions on your website ? What follows is very basic in web development. But is very very useful.

The entire Search Engine Optimization part must be written in the <head> tag. Don't put in <body> please.

Default Tags

<meta charset="utf-8">
<!-- Let browser know website is optimized for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Your sublime title -->
<title>My title under 70 characters.</title>
<meta name="description" content="This is my loooong description, and ">
<!-- This is for index on search engine -->
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<!-- Your favicon in .png format or another -->
<link rel="icon" type="image/png" href="favicon.png"/>

✅ A description must be long and detailed. It should not be displayed identically on several pages, otherwise you may have malus in the optimization. The description must be the longest, between 150-160 characters.

⚠ In these two situations, avoid repetitions and try to modify them on each page.

Twitter Card (Also know as X)

When you share on social networks, you often have a nice presentation of the page, but be aware that we can change the presentation on Twitter and on other networks. Why do I take the Twitter case as special? Because they have their own tag, if you take the ones we use for Facebook, you'll notice by sharing that it won't work. I show you an example below.

<!-- Twitter Card -->
<meta name="twitter:url" content="https://my.link.org/">
<!-- This is a large image, see below if you want a small, square image. -->
<meta name="twitter:card" content="summary_large_image"/>
<!-- Optional but displays who owns the website -->
<meta name="twitter:site" content="@MyAccount"/>
<meta name="twitter:title" content="My beautiful title" />
<meta name="twitter:description" content="This is my description, it will only appear on Twitter."/>

Example of summary_large_image (Click to display it completely) :

Example of summary (Click to display it completely) :

You can then test if your Twitter Card on your website works. Click here and enter your URL.

To learn more about the limitations and how to customize these tags with a player, application or other, you have the documentation that properly informs you about them.

Open Graph(OG)

The rest of the SEO part is devoted to Open Graph. Used mainly with Facebook, Reddit and many other websites, it is the essential piece of code that must also be used.

<meta property="og:title" content="My sublime giant title"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="https://my.link.org/favicon.png"/>
<meta property="og:description" content="This is my description, that's never going to appear on twitter."/>