DEV Community

Cover image for Have 100% with Search Engine Optimization
Thomas Bnt ☕
Thomas Bnt ☕

Posted on • Updated on

Have 100% with Search Engine Optimization

  • 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 ">
        <meta name="Keywords" content="seo,optimization,thisisakeyword">
        <!-- 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="folder/hey/favicon.png"/>

Enter fullscreen mode Exit fullscreen mode

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

✅ 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

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."/>

Enter fullscreen mode Exit fullscreen mode

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."/>

Enter fullscreen mode Exit fullscreen mode

Example of post on Facebook with OG


Photo by Clem Onojeghuo on Unsplash

Check my Twitter account. You can see many projects and updates. You can also support me on Buy Me a Coffee, Stripe or GitHub Sponsors. Thanks for read my post ! 🤩

Top comments (2)

Collapse
 
eli7316 profile image
eli73

Hi, Some information about seo optimization to have results on google Video Carousel. (React site with a lot of video content pages). Thanks

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Hi ! See the documention for Carrousels Videos on Google. i never touched that, sorry for no more help by me 😔