loading...
Cover image for Have 100% with Search Engine Optimization

Have 100% with Search Engine Optimization

thomasbnt profile image Thomas Bnt Updated on ・3 min read
  • 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"/>

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



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

Example of post on Facebook with OG


Photo by Clem Onojeghuo on Unsplash

Posted on by:

thomasbnt profile

Thomas Bnt

@thomasbnt

French web developer maintly but touches everything, servers, bots, community management, events, social networks and moore. I learn VueJs at this moment and MySQL. — Addict to Cappuccino and Music ☕

Discussion

markdown guide
 

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

 

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