SEO Glossary

Get a definition of any SEO terms.

Learn SEO SEO Glossary Support
A

Absence of document.write

What is the instruction document.write ?

It is a browser-native JavaScript method that dynamically writes HTML or JavaScript code directly into a page. When the page is fully loaded, it replaces the existing code with the defined one.

<html>
    ...
    <script>
        document.write("I replace the content of the page");
    </script>
</html>

Why should it be avoided ?

The use of document.write can delay the display of the page by several seconds. Moreover, in some cases (a slow connection for example) chrome blocks its use and makes the page rendering uncertain.

How to replace its use

When the instruction document.write is used in the JavaScript code of the page, it is necessary to remove or replace it with methods to manipulate the DOM.

For example, to insert HTML code :

<script>
    document.getElementById("container").innerHTML = "Properly added HTML content";
</script>

To dynamically integrate a JavaScript :

<script>
    var script = document.createElement('script'); 
    script.src = 'https://cdn.example.com/script.js'; 
    document.head.appendChild(script);
</script>

If a third party script uses document.write, contact the supplier to find an alternative solution.

 

Absence of keyword stuffing

What's keyword stuffing ?

Keyword stuffing, also called over-optimization, is the excessive repetition of keywords in elements that contribute to SEO (titles, link anchors, ...).

Why is it important not to over-optimize keywords ?

Stuffing is a black hat practice that can be sanctioned by search engines. This practice can be harmful on several points :

  • search engines will quickly detect that you are trying to trick their indexing robots. Thus, you may see your site being pushed to the last pages of the SERPs.
  • keyword stuffing penalizes the quality of your content, which risks losing in quality and readability for users. Your site will experience a decrease in traffic and an increase in the bounce rate. As a result, your site will appear as "poor quality" to Google and you will be pushed to the bottom of the SERPs.

How to avoid over-optimization of keywords ?

The best way to fight stuffing today is to produce quality content combining the presence of targeted keywords for SEO and readability for the Internet user. 
Do not hesitate to favor a developed lexical field rather than focusing on a repetition of your keywords, which can be considered abusive.
Indeed, Google and its algorithm now take into account the semantic richness of your content. This is why, even if you have not explicitly evoked certain keywords, you can still be positioned on a main expression and on secondary expressions, if your lexical field refers to them.

Absence of plugins

What is a plugin ?

A plugin is a small program designed to be added to a main program called host software (for example, your browser). Plugins are used by many websites. They allow users to watch videos, hear sounds, play games, see computer graphics, etc.
Among the most well-known are Java and Flash plugins, for example.

Why are they being less used ?

The advent of the cell phone requires the creation of simple and quickly consumable content that does not require plug-ins. Some of them are not even readable by cell phones, which is detrimental to the user experience. Many security issues have also been identified because of some plugins, such as access to the microphone or camera of your computer for example.

Finally, search engine robots cannot exploit the content of certain plugins for SEO. This means that the content of the plugins does not appear on search engine results, especially with Flash and Java.

How to solve this problem ?

As Flash, Silverlight and Java are increasingly rejected by browsers, the most obvious solution to avoid being blocked by search engines is not to use plugins to display your content.

In addition, it is possible to convert plugin-based content using HTML5. This format allows :

  • to adapt the content of your site to all types of screens
  • to be more secure
  • not to perform any particular installation
  • occupy less space than a plugin

Accessibility Score

The Accessibility Score © is an indicator created by Cocolyze that measures the easy access to a page for a user. 

This indicator takes into account the performance of the page and its resources. It analyzes  four main elements that will influence the loading time of a page, such as:  the server speed, the page weight, the security and the size of the images.

According to each result, Cocolyze proposes a detailed analysis and, when necessary, a possible solution for each one of them.

The Accessibility Score © name is a trademark of Cocolyze.

Ajax

AJAX (Asynchronous JavaScript and XML) is a computer architecture, a web programming concept that combines several technologies: Javascript, JSON, and XML. This association has been thought to create more dynamic pages, to optimize the interaction with the user, and to bring more comfort of use.

Ajax is a technique compatible with the majority of web browsers (Google, Safari, Mozilla Firefox, etc...). It can be applied to all media: smartphones, tablets, computers, etc... whatever the operating system (Linux, Mac, Windows).

Alternative attribute

What is an alternative attribute ?

An alternative attribute allows search engine robots to understand what an image is in order to be able to index it. In HTML language, it is called the alt attribute and it refers to a textual alternative to an image. 

Why is it important ?

The alt attribute will tell Google what the image corresponds to. It is important to correctly write the title of your image in the HTML code, because the alt attribute is taken into account by the robots for the referencing of your site. In addition, when your image does not appear on the screen, the text written in the alt attribute of the HTML code will appear to the Internet users to give some details about it.

How to write a alt attribute ? 

The simplest and most effective way to write an alt attribute is to use short and descriptive sentences. 

For example :  <img src="https://example.com/image.jpg" alt="clear text alternative" />

An alt attribute must be provided for each picture element <img>. 

In summary, in order for an alt attribute to be written and correctly referenced, it must :

  • be clear, descriptive and short
  • not include terms such as graphic, image or diagram

Analyzed pages

Cocolyze automatically analyzes all the best ranked pages of your website and of your competitors, everyday, on all your tracked keywords. 

Number of Analyzes 

Once a day we analyze a given URL to minimize the number of requests sent to your server. One URL can however be analyzed several times if you track this page:

  • on mobile and for desktop
  • in different languages 

The same URL can for example have a different score on mobile in English than for desktop in Italien. 

Analysis Update 

The analyzed pages are automatically updated everyday. You can force a new analysis, for example if you change something that you would like to immediately check, by clicking on the button 'Update the page analysis'. 

The best ranked page isn’t the one I want to rank on

You can define the page associated with a keyword if you want to modify (or "force") the analyzed page for a keyword.

Deleting analyzes 

The analyzed pages are automatically deleted if:

  • they are not associated with a keyword
  • and if they have not been found as the best ranked page of the same site on a keyword in the last 7 days. 

A deleted page will automatically reappear if we find it as the best ranked page on the same site on a tracked keyword.

Animation optimization

What is an optimized animation ?

An animation is a succession of images appearing in the same frame. We use the term "optimized animation" when the format used is optimal and allows the same rendering as another format for less weight. The most common format for animations is the GIF (Graphics Interchange Format), however this format is ineffective for large animations.

Why is it important to use optimized animation  ?

The GIF format for large animations weighs more than a video alternative and increases the network load required to download it. Using optimized animations improves the page load time and allows users to view the content faster.

How can it be optimized ?

In order to reduce the weight of animations, it is necessary to change the GIF format to an MPEG or WebM video format.

It is possible to recreate the characteristics of a GIF animation thanks to the HTML tag <video> :

  • launches automatically : thanks to the "autoplay" attribute
  • continuous loop: thanks to the "loop" attribute
  • is silent: thanks to the "muted" attribute
<video autoplay loop muted playsinline>  
  <source src="animation.webm" type="video/webm">  
  <source src="animation.mp4" type="video/mp4">  
</video>  

The "playsinline" attribute allows the video to be played online and does not automatically launch full screen on mobiles when playback begins.

Authorized expansion

What is an extension ?

An extension is simply the fact of increasing the size of a content on a WEB page. When a user navigates on a site and more particularly from a phone, he may not be able to read the text or wants to look more precisely at an image, in this case, he will zoom in on the page to obtain a suitable size.

Why is this important ?

It is possible to prohibit the extension of a WEB page via the "meta viewport" tag, which gives instructions on the size and scale of the elements depending on the browser window. When this prohibition is set, the user will not be able to zoom in on the content and may not even be able to read the text on the page. This frustration degrades the user experience and may cause the user to run away.

How do I allow it ?

By default, browsers allow zooming, if no "meta viewport" tag is defined, there is no need to intervene.

If a "meta viewport" tag is defined, make sure that :

  • the instruction "user-scalable=no" is not declared.
  • the instruction "maximum-scale" is not defined below 5

Example of a "meta viewport" prohibiting enlargement :

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

Example of a "meta viewport" allowing enlargement :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=6" />
C

Caching Policy

What is caching ?

Caching is an action of the browser, at the request of the WEB server, which consists in saving a static resource (image, CSS style, script, etc.) on the user's computer so that he no longer has to load it when this same resource is needed on another page of the site, or during another visit to the same page. For example, on every page of a site, there is a logo, its caching allows to free the user from the loading necessary to retrieve it at each page visited during his navigation on the site.

Why is it important ?

The fact that static resources are cached improves the loading time on the user's repeated visits, because the browser no longer has to load them. Caching therefore contributes to the speed of the site by speeding up navigation. Only the first loading of the page will be complete and will require the transfer of all resources.

How do I set it up ?

The caching instruction of a resource is located at the level of the HTTP header "Cache-Control" returned by the WEB server. This HTTP header informs the browser that it is necessary to save this resource, and informs it of the delay in seconds for which it must keep it thanks to the "max-age" instruction.

Cache-Control: max-age=31536000

Caching is generally done at the level of the WEB server that takes care of this management. In order to provide a maximum user experience, it is recommended to use a minimum of 97 days.

Canonical URL

What is a canonical URL ?

A canonical URL is a tag inserted in the HTML code of a web page that allows you to specify to search engines the preferred URL, that is,  the one that shoud be crawled.

Why is it important ?

When multiple pages have similar content, search engines consider them duplicate versions of the same page. For example, desktop and mobile versions of a product page are often considered duplicates. Search engines select one of the pages as the canonical, or primary, version and crawl that one more. Valid canonical links let you tell search engines which version of a page to crawl and display to users in search results.

How to define a Canonical URL

Add a <link rel=canonical> element to the <head> of the page :

<!doctype html>
<html lang="en">
  <head>
    …
  
  <link rel="canonical" href="https://example.com"/>
    …
  </head>
  <body>
    …
  </body>
</html>Guidelines for Canonical URLs
  • make sure that the canonical URL is a real valid page
  • use HTTPS canonical URLs rather than HTTP whenever possible
  • don't point the canonical URL to a different domain. Yahoo and Bing don't allow this
  • don't point lower-level pages to the site's root page unless their content is the same
  • use absolute URLs ("https://example.com/page" instead of "/page")

Character encoding

What is character encoding ?

Encoding is a way to allow browsers to correctly interpret characters. It is vulgarly speaking to inform browsers about how characters are encoded (example: alpha encoding, 1 = A, 2 = B / beta encoding, 10 = A, 2 = B).

Why is this important ?

Character encoding is important to prevent the browser from displaying incorrect characters. This can happen, for example, when you want to use language-specific characters (such as Mandarin, for example) that have not been encoded.
For example: My source code will be translated 私のソースコード into Japanese, if my encoding is correctly specified. On the other hand, if my encoding is incorrect, the same sentence may show abnormal characters (私a!!ソ§--スコ#€).

How to correct it

All documents (.txt, .html, or plain text) that contain text are saved with defined characters. This corresponds to the actual encoding of the document.

It is recommended to use the "utf-8" encoding on your pages which allows to encode the majority of the possible characters.

To check which encoding your HTML pages use, you can go to the configuration settings of your text editor (i.e. Atom, Sublime Text).

Don't forget to declare your character encoding information to the browser. To do so, you should : 

  • as a value in the header dedicated to the document type "Content-Type: text/html; charset=utf-8"
  • in HTML tags <meta charset="utf-8">
  • in an HTML tag <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • on several elements but the value must be the same, the same encoding of defined

Finally, it must be defined on at least one of the elements.

Color contrast

What is color contrast ?

Color contrast is the ability of two things to stand out from each other. In a digital interface this contrast mainly concerns the legibility of text and icons in relation to the background.

Why is it important ?

Color contrast is one of the first elements that make a page readable to users. A low contrast between the text and the background can make it difficult for users to read, especially for those with vision impairments. 

How can I adjust the color contrast ?

The analysis follows the WCAG 2.1 recommendations whose accessibility standards are as follows :

The visual presentation of text and images must have a contrast ratio of at least 4.5:1, except in the following cases :

  • Large-scale text and images of large-scale text must have a contrast ratio of at least 3:1 ;
  • Text or text images that are part of an inactive user interface element, are purely decorative, are not visible to anyone, or are part of an image that contains other significant visual content, do not have a contrast requirement ; 
  • Text that is part of a logo or brand does not need contrast

The contrast ratio is a measuring of the difference in "brightness" or perceived brightness between two colors. This difference in brightness is expressed as a ratio ranging from 1:1 white text on white background to 21:1 black text on white background.

  • Red (#FF0000) has a ratio of 4:1
  • Green (#00FF00) has a low ratio of 1.4:1
  • Blue (#000FF) has a contrast of 8.6:1

Competition indicator

The Competition score is based on the number of advertisers that want to place a sponsored advert (Google Ads) on a keyword. This score depends on the search location. This score allows you to easily get an idea of the SEO competition on this keyword, given that a high level of competition means that a large number of websites want to be highly positioned on this search request.

Content width

What is content width ?

Content width is the horizontal dimension of the page. When the width of the content is larger than the width of the browser window, and it does not fit, the browser adds a horizontal navigation bar so that the content can be scrolled from left to right, this is called the X scroll. Conversely, when the content adapts to the width of the browser window, the page is said to be "responsive".

Why does it need to be adjusted ?

The presence of a scroll X is detrimental to the user experience: horizontal scrolling is not intuitive for users, they don't have the reflex to scroll pages from left to right. If users have a bad experience, they may come back to the SERP and click on another more suitable site which affects your ranking.

How to adapt it

In most cases, it is at the level of CSS styles that you have to intervene and set up "media queries". These instructions allow you to define CSS properties according to the dimensions of the browser window.

Example of the use of "media queries" :

<html>
<head>
    <title>My responsive page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        /* default width */
        .bloc {
            display: inline-block;
            width: 100%;
        }
        
        /* Overriding the width of the blocks when the browser window is at least 600px */
        @media screen and (min-width: 600px) {
            .bloc {
                width: 30%;
            }
        }
    </style>
</head>
<body>
    <h1>My content is adapted</h1>
    <div class="bloc">Bloc A</div>
    <div class="bloc">Bloc B</div>
    <div class="bloc">Bloc C</div>
</body>
</html>

When the browser window is 600px or more, the blocks are aligned, otherwise they are stacked. For more information on media queries and responsive, check Google's article.

Another method exists to not make the horizontal navigation bar appear when the content is larger, it consists in hiding what is overflowing thanks to a CSS instruction "overflow: hidden;". This method is to be avoided since it hides the eventual content from the user and the user cannot display it at all.

CPC (Cost per click)

CPC (cost-per-click) is the average cost of a click on a paid search result on a keyword. 

A 'click' on a PPC (pay-per-click) campaign represents a visit or interaction with your company's product/service. When you advertise, your CPC will always be less or equal to the maximum defined budget. Your actual cost-per-click depends on both you and your competitors ad rank, maximum bid and quality score. 

For more information on CPC bidding please read Google’s official documentation.

Crawlable links

What is a crawlable link ?

A crawlable link is a link that can be followed by Google. Links not crawlable are therefore links with a bad URL, these links can be exploited by the JavaScript code of the page but not by crawlers. For Google to be able to track your links, they must use a <a> tag with the href attribute followed by relative or resolvable URLs (a real web address to which Googlebot can send queries).

Example 1 : crawlable link

<a href="https://example.com">

Example 2 : URLs that can be resolved

/products.php?id=123
https://example.com/stuff

Why is this important ?

It's important because only this format allows you to make your content available to Google's robots. Non searchable can be a problem since the robots will not know which page it should point to (the link) and will not index it (the destination page).

How to solve a problem with a not crawlable link ?

In order to solve a problem with a crawlable link you should :

  • use the href attribute
  • make sure the URL associated with it is a valid web address to which Googlebot can send requests

Critical request

What are critical request chains ?

Critical request chains are the dependent and important requests of the page. They are all the critical resources loaded in priority that block the rendering of the page.

For example, for a single page :

<html>
<head>
    <title>Critical request</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
    <h1>Critical request</h1>
</body>
   

The critical request chains will be :

  • https://exemple.com/
    • https://exemple.com/css/style.css
      • https://exemple.com/font/roboto.woff2 (515ms, 14,85ko)
    • https://exemple.com/js/jquery.js (602ms, 32,56ko)

In this example, 2 chains are defined, the length of the longest chain is 3 and can result in a maximum latency of 1.73s (loading and playing).

Why is this important ?

The larger the size of the strings and the weight of the resources to be transferred, the greater the impact on page loading. It is therefore necessary to keep the critical request chains as small as possible so that the page can load quickly.

How can they be optimized ?

It is recommended not to exceed 8 chains, to reduce the size of the critical request chains,  you should :

  • minimize the number of critical resources : remove unused resources
<link rel="stylesheet" type="text/css" href="css/unused.css" />
  • postpone the loading of non-critical resources thanks to the "defer" or "async" attribute
<script type="text/javascript" src="js/jquery.js" defer></script>
  • preload resources dependent on other resources
<link rel="preload" href="font/roboto.woff2" as="font" crossorigin="anonymous" />
  • optimize the order in which the remaining critical resources are loaded : define the most critical resources as early as possible
  • reduce the weight of resources

CSS minification

What is CSS minification ?

Minimization consists in removing unnecessary characters from a file in order to reduce its size, so it compacts the instructions. The characters that are not useful for the interpretation of a CSS style are mainly comments, spaces and tabs.

It is important not to confuse minification with compression, because compression will use algorithms to reduce the size of the file. The browser of the recipient of the file will therefore have to perform a decompression operation to interpret the file, which minimization avoids.

Why is it important to minimize a CSS file ?

Removing unnecessary characters improves the loading time because the CSS file weighs less. 

How to perform a CSS minimization ?

To perform this treatment, it is interesting to use a tool (and not to do it manually) such as cssminifier.com that allows you to minimize an online CSS style.

Example of a style before minification :

body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}

After minification :

body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}

It is also possible to include external styles in their minimized version. Many vendors (CDN) offer this for the production version.

Manual optimizations can also be made in the declarations, such as, for example, reducing the color declaration to hexadecimal #000000, which can be shortened by #000. This is also possible if two elements have the same style, then they can be combined within the same block :

  h1 {
    font-weight: bolder;
    font-size: 20px;
    background-color: #cccccc;
  }

  .title {
    font-weight: bolder;
    font-size: 20px;
    background-color: #cccccc;
  }

Optimization :

  h1, title {
    font-weight: bolder;
    font-size: 20px;
    background-color: #ccc;
  }
D

Deprecated code

What is deprecated code ?

Deprecated code is mainly JavaScript code that uses obsolete browser functions. The browser temporarily maintains these outdated functions (they are API - Access Programming Interface methods) for compatibility reasons but tends to remove or modify them in the near future. 

Why should it be avoided ?

When the browser is updated, the code using these methods may no longer work and thus cause JavaScript errors. The appearance of errors can lead to more or less serious problems depending on the usefulness of the code. The content may be missing, navigation in the site may no longer work, interactions with the different elements of the page may not respond. In other words, your page starts to have bugs that were not present until now.

How to correct deprecated code

When a method provided by the browser is marked as deprecated, it is necessary to intervene in the code in order to change the method for an alternative to ensure future compatibility. If this code comes from the use of a third party module, it is then necessary to update it or to find a more modern alternative.

Deprecated methods appear as a warning in the Chrome browser console. Here is a warning on the presence of an obsolete method whose use will soon change :

speechSynthesis.speak() : speechSynthesis.speak() without user activation is no longer allowed since M71, 
around December 2018. See https://www.chromestatus.com/feature/5687444770914304 for more details

Descriptive links

What is a descriptive link ?

A descriptive link is a link whose anchor provides clear information about its destination. For example, in the sentence "7 tips to improve your mobile SEO", the anchor of the link is "7 tips to improve your mobile SEO".

Why is it important ?

Descriptive links are important because they determine the subject of the destination page. This "indication" of the landing page content is taken into account by Google and is also a way to attract users' interest. 

How to manage descriptive links 

In order to optimize your descriptive links you should :

  • stay in the subject and do not use a descriptive link that is not related to the content of the landing page
  • add keywords to ensure good understanding by search engines and also to incite user clicks
  • avoid neutral links such as "read more" or "click here" since they do not really give information about the destination page
  • do not use the URL of the page instead of the descriptive link, unless you have a good reason to do so, for example to reference the new site address

Doctype

What is the Doctype ?

The Doctype is an indication in an HTML page to define the type of syntax used in the page. 

Why is it important ?

If the Doctype is not correctly defined, the browser may have difficulty displaying your page and display it in an unexpected way. This is called the Quirks mode of a browser.

How do I set the Doctype ?

Just add the "<!DOCTYPE html>" insctruction at the top of the HTML document : 

<!DOCTYPE html>
<html lang="en">
…

It is recommended to use the HTML 5 doctype, the other versions are considered "outdate".

DOM size

What is the DOM ?

The DOM (Document Object Model) is the result of the interpretation of the HTML code of a web page by the browser. It is a representation of data in the form of a tree composed of nodes and elements where each element belonging to a node is a child. It also provides a useful programming interface (API) for modifying the page using JavaScript code.

Document
    - <html>
        - <head>
            - <title>
                - DOM size
        - <body>
            - <h1>
                - What is the DOM ?
            ...

Why is the DOM size important ?

The larger the DOM size is, the longer the browser will take to create and interpret it, which will slow down the page rendering and place greater demands on the resources of the user's computer.

How can I manage the DOM size ?

The DOM must have :

  • less than 1,500 elements in total
  • a maximum depth of 32 elements
  • less than 60 child elements in a parent element

 

Domain Influence

The Domain Influence score analyses the popularity of a website. The more influential backlinks a site has, the higher its influence mark will be. 
The Domain Influence score is a score from 0-100, with 100 corresponding to a very influential website. 

How to use this score? 

The Domain Influence is useful to filter and compare different backlinks. 
A website with a high Domain Influence can be more interesting to contact to get a backlink from rather than a site with a low Domain Influence. 
Also check your lost backlinks: we recommend you try and contact the webmasters of the sites where you have lost backlinks that have a high Domain Influence. 
A website with a low Domain Influence doesn't harm your optimization if they create a backlink towards your site. To analyze the link's toxicity, go to the article on the Spam Rating score. 

Duplicate module

What is a JavaScript module ?

A module is a JavaScript resource embedded in the page containing segmented and reusable code. It allows to bring additional functionalities to the browser in a simple way. For example, the JQuery library makes it easier to navigate and manipulate the DOM (Document Object Model: a programming interface useful for modifying the page using JavaScript code) thanks to a set of simplified functionalities.

Why is it important that they are not duplicate ?

Loading the same module several times is not useful because the code is already present in the page and can be exploited by the browser. A module declared several times therefore unnecessarily increases the weight of the page, as well as the interpretation required by the browser and delays its loading.

How do I correct a duplicate module ?

The detection of duplicate modules is based on their "source Maps" file (additional folder that allows debugging the code). Usually these files are filled by the CDN (Content Delivery Network) within the script itself with the instruction "//# sourceMappingURL=...".

When the same module is loaded several times, it is necessary to keep only one integration instruction in the HTML and/or JavaScript code.

For example, the Bootstrap framework is loaded twice despite different names :

<script src="/js/bootstrap.bundle.js"></script>
<script src="/js/bootstrap.js"></script>

In order to correct it, you have to remove of one of the two statements :

<script src="/js/bootstrap.js"></script>

 

F

Flash effect on text

What is a flash effect on text ?

It is an unpleasant twinkle effect caused by the appearance of a text after loading a web font or font replacement on a text already formatted by the browser.

Why is it important to avoid this effect ?

This effect harms the user experience when browsing the page, and in some cases the layout changes, which can be penalized by Google.

How to avoid it

In order to avoid this effect on fonts whose display is defined as "optional" in the CSS style (font-display: optional), it is necessary to preload them with a <link rel="preload" instruction ... />, to be placed in the <head> section of the HTML code.

Example of preloading a web font :

<head> 
    <style>
        @font-face {
            font-family: "Roboto";
            font-display: "optional";
            src: local("Roboto"), 
            url(https://...roboto.woff2) format("woff2");
        }    
    </style>
...
    <link rel="preload" href="https://...roboto.woff2" as="font" /> 
... 
</head>

 

Footer access

What is the footer ?

It is simply the footer where all the main information of the website is usually present.

Why is its access important ?

Users tend to access the footer to get an overview of what the site offers in terms of products and/or services. The longer the page is, the more mobile users will have to scroll to access it and may be discouraged. Keeping the page height low therefore allows users to easily access the information they are looking for, improving their experience.

How can I lower the page height ?

For optimal access, it is recommended not to exceed 10,000px. If the page height exceeds this recommendation, it is necessary to :

  • keep only the useful content of the page
  • use unfoldable blocks where the content appears during user interaction
  • revise the layout: reduce margins, text size, image size, etc
G

Geolocation permission

What is a geolocation permission ?

A geolocation permission is a request made to the user via the browser to obtain his geographical coordinates.  As long as the user has not authorized this request, the WEB page cannot obtain this information. If and when it obtains it, it is able to provide more adequate content to the user. This request is initiated using javaScript code : geolocation.getCurrentPosition() or geolocation.watchPosition().

Why is it important to request it with responsibility ?

Faced with a request for geolocation permission without context, i.e. when the page loads, users are confused and distrustful, which alters the trust of the website.

How to implement it correctly

In order to offer a long-lasting experience, it is necessary to remove this request, if it exists, when the page loads and to ask for it during a user interaction, indicating that the action will perform a geolocation request. Finally, it is useful to provide a backup solution if the user refuses it.

Google Crawling

What is Google crawling ?

Crawling is the process by which robots pass while they browse websites, going from links to links in order to discover and index the encountered contents. When Google's robots, named googlebot, discover a new page to explore, they check beforehand that they have the authorization to access it thanks to the directives in the robots.txt file. If the robots are authorized to access it, they will examine the page, otherwise they will ignore it.

Why is it important that googlebot can access your page ?

If googlebots can't crawl a page, they won't know its content and will end by not indexing it, even if it's possible that the page is indexed by links pointing to it. In some cases, prohibiting crawling may also be necessary. For example, when a part of your site must not be explored for security or uselessness reasons, it is important to prohibit the exploration of these pages.

How can I check if googlebot has a permission to crawl my page ? 

You can check it directly in the instructions in the robots.txt file. To allow or disallow googlebot crawling you must add an "allow" or "disallow" instruction in the robots.txt file.

Example 1 : Allowing googlebot crawling

user-agent: googlebot 

allow: /my-page

Example 2 : Forbidding googlebot crawling 

user-agent: googlebot

disallow: /my-page

 

H

Heading structure

What is the heading structure ?

It is the organization by order of relevance of the different titles of a content thanks to HTML tags. There are 6 hn tags (the H stands for "Heading"), from H1 to H6 (where H1 indicates the most important title and H6 the least important). 

Why is it important ?

The structuring of hn headings is important, because it helps the indexing and referencing of your page. The hierarchy of titles and subtitles makes it easier for search engines to understand your content by highlighting its important elements. This structuring also improves the experience of the users who find and understand your content more easily.

How to structure hn tags ?

To be able to structure hn tags, it is necessary to respect the hierarchy of these titles: their order and size. The recommended structure is therefore, (for example) :

<h1>Heading structure</h1>
    <h2>Why is heading structure important?</h2>
    <h2>How to structure your content</h2>
        <h3>Example of a heading structure</h3>
        <h3>Some tips to structure your content by relevance</h3>
    <h2>...</h2>

To succeed in structuring your hn tags, it is necessary to :

  • not skip levels of titles. For example, from H1 to H4 or from H2 to H4. You do H1 then H2 or H3 then H2, whether you go up or down
  • avoid putting too many H1 and H2
  • use of only one H1 title per page. It is possible to have several H1 titles per page, when the page contains several distinct contents, but this technique makes the optimization more delicate

Heavy libraries

What is a JavaScript library ?

A library is a third-party resource embedded in the page containing JavaScript code. It provides a set of additional functionality to the browser. The integration of the library is done through the HTML <script> tag.

For example, the D3.js library allows you to create different types of graphics very quickly.

<script src="https://d3js.org/d3.v6.min.js"></script>

Why is it important that they are lightweight ?

Heavy JavaScript libraries can result in poor performance because they consume a lot of browser resources when they are interpreted and increase the network loading required to download them. For this reason, it is worth using lightweight libraries to improve page loading and interactivity time.

What to do with heavy libraries ?

When a library has a lighter alternative, or one that offers less functionality but fulfills the usefulness that you make of it, it is interesting to replace it. Replacing a JavaScript library is not something trivial since you have to intervene in the code, and modify all the calls using the old library for the new one.

For example, the "Moment" library, which allows you to manipulate dates, can be replaced by "dayjs", which lightens the weight of the page by 69Ko.

HTTP/2 protocol

What is the HTTP/2 protocol ?

As a reminder, the HTTP protocol (Hyper Text Transfer Protocol), is a mechanism used by Internet browsers to request information from the web server and display pages on the screen of the device being used.

The HTTP/2 protocol is the most modern and powerful version of this protocol.

Why is it important to use the HTTP/2 protocol ? 

It is important to use the HTTP/2 protocol rather than the old one because it is more powerful and allows users to enjoy a better browsing experience. This is possible because the HTTP/2 protocol reduces the weight of requests by compressing headers and also connections, called request multiplexing (sending multiple requests on the same connection).

How to implement the HTTP/2 protocol?

The protocol has to be set up on the web server of the site.
 

HTTPS Communication

What is HTTPS ?

The HTTPS protocol is used to encrypt HTTP (Hypertext Transfer Protocol: WEB protocol necessary to exchange with a server) communications between users and a WEB site. In addition, when a browser makes a secure connection with a site using the HTTPS protocol, the WEB server sends it a certificate of authenticity. This certificate is used to verify the identity of the site with recognized certification authorities such as Symantec, VeriSign or Digicert. This behavior is directly integrated in the browsers and if a problem occurs, the browser will prevent users from accessing the WEB site.

Why is it important ?

The HTTPS protocol effectively prevents tampering and eavesdropping of communications between a user and a Web site, which greatly enhances the site's relative security and gives users confidence. Moreover, this criterion is very important to Google and has a direct influence on the positioning of a page.

How do I implement it ?

The implementation of the HTTPS protocol is done at the server level where a specific configuration must be set up. Likewise, it is necessary to redirect all unsecured HTTP traffic to HTTPS.  Find more information on how to set up the HTTPS protocol on Google's documentation.

When HTTPS is active on a site, it is necessary that all the resources of the page are also loaded via this protocol, otherwise the phenomenon of "Mixed Content" (mixing HTTPS / HTTP) occurs and can cause problems with the loading of unsecured resources. Find all the solutions to solve the problem of Mixed Content on the Google documentation.

I

Image dimensions

What are the dimensions of an image ?

The dimensions of an image correspond to its size, expressed in pixels, for example: 600px x 200px.
As a reminder, pixels are a set of points that make up an image. The number of points present in the image constitutes the definition of the image.
The resolution is different from the definition. The resolution of an image is the ratio between the number of pixels in an image and its actual size when it appears on a physical medium. 

Why are image dimensions important ?

The dimensions of an image can be modified during the display of a web page and not respect the original dimensions.
In addition, rendering an image with an aspect ratio that is too different from the aspect ratio specified in the source file may cause the image to appear distorted, creating a poor user experience.

How do I define the dimensions of an image ?

It is important to respect the original dimensions and not to deform the image by more than 5% when displaying it on the WEB page.

The dimensions can be defined in the HTML code, for example, thanks to the attributes width=500 and height=400 on the <img> tag displaying it :

<img src="image" width="500" height="400" />

It is also possible to manage the dimensions of an image in a CSS style, this technique has the advantage of being more flexible and offers more possibilities :

img {
    max-width:100%;
    height:auto;
}

Image weight

What is image weight ?

The weight of an image, just like any other file, corresponds to the size it occupies in bytes on a hard disk. It also corresponds to the amount of data to be exchanged with the WEB server, in order to be retrieved by the browser to display it on a page.

Images can be saved in different formats and can be optimized using compression algorithms, with or without loss of quality.

The most common formats are :

  • JPEG / BMP: for photographs and printing
  • PNG : for qualitative images needing transparency
  • GIF: for small animated images that require transparency and/or a low color set

Why is this important ?

The weight of images can quickly become problematic, it generally takes up a significant place in the overall weight of resources to be loaded on a page. Images can therefore seriously slow down the complete loading of a page and its global rendering by the browser. Compressing an image can drastically reduce its weight, so it is essential to optimize it since the user will not see any difference in its quality.

How to optimize them ?

Optimizing images means adapting their format and quality for the WEB, it is useful to :

  • choose the most suitable format
  • convert them to the new Google WebP format using a utility such as online-convert, which allows you to convert images in different formats online
  • compress them with a utility such as imagecompressor which allows to compress JPEG / PNG images.
  • Find more information on Google's Image Optimization Guide

Indexability

What is Indexability ?

It refers to the page's possibility of being displayed at the SERPs.  A non-indexable page means that it will not be present on search engine results and will end by not bringing traffic to it.  You can prevent search engines from indexing a page by using the "noindex" or "none" instruction. 

Why is it important ?

By using the meta tag "noindex" or "none" in the HTML code or with a header "X-Robots-tag: noindex" you can decide which page should be visited by search engines.

How to manager your page indexability

If you want to prevent search engines from indexing a page, you can add the "noindex" or "none" instruction as a meta tag or HTTP response header. Both have the same effect and you can choose depending on the degree of control you have over your server and your specific publishing process.

Example  - <meta> tag

Add the following meta tag in the <head> section of your page :

<meta name="robots" content="noindex">

Example   <meta>  tag for Google

Add the following meta tag in the <head> section of your page if you only want to block Google crawlers:

<meta name="googlebot" content="noindex">

Example  - HTTP Response Header

You can choose to display an X-Robots-Tag header with a noindex or none value in your response :

HTTP/1.1 200 OK
(…)
X-Robots-Tag: noindex
(…)

If the page is not being indexed when it was supposed to be, you should :

  • verify if  there isn't a "noindex" or  "none" instruction  in the directives to the crawlers

Ps: It may be that the request for non-indexation is voluntary or that it is an error, hence the presence of this analysis.

J

Javascript Errors

What is a Javascript error ?

A javascript error is a problem encountered during the interpretation of the code by the user's browser. This code is generally intended to produce content or manage user interactions at the page level. An error can occur as a result of programming or browser compatibility errors.

Why is it important ?

When an error occurs, the execution of the rest of the instructions in this code is then interrupted, which can lead to more or less serious problems depending on the usefulness of the code. The content may be missing, the navigation in the site may no longer work, the interactions with the different elements of the page may not respond. In other words, javascript errors can greatly alter the user experience and make your content invisible to the crawlers eyes. 

How to fix Javascript errors

Make sure that there is not a bug in the scripts used and that they are compatible with the majority of browsers.

If the problem is in your code you must :

  • remember to note the errors displayed in the console
  • test and debug your code with the tools provided by the browsers
  • if you can't fix the problem, consider encapsulating it in a try {} catch(error) {}

JavaScript minification

What is a JavaScript minification ?

Minification is the removal of unnecessary characters from a file in order to reduce its size, so it compacts the instructions. These useless characters are, for example, comments, spaces and tabs.

In JavaScript the names of the variables have no importance for the interpretation of the script by the browser, so they can be reduced (var variable = ... becomes var a = ... ). In the same way, the useless code can be removed (variable declared in a function and not used).

Why is this important ?  

Removing unnecessary characters and compacting the code improves the loading time because the JavaScript file weighs less. 

How to perform a JavaScript minification 

To carry out this treatment, it is interesting to use a tool (and not to do it manually) such as javascript-minifier.com, which allows you to minimize a JavaScript script online.

Example of a script before minification :

function myFirstFuction(parameter) {
    var maVariable = "minification 1";
}

function mySecondFunction(parameter) { 
    console.log(parameter);
}

After minification :

function  myFirstFunction(n){}function mySecondFunction(n){console.log(n)}

It is also possible to include external scripts in their minimized version. Many vendors (CDN) offer this for the production version.

K

Keyword optimization

What is keyword optimization ?

As a reminder, keywords are terms composed of one or more words that correspond to the subject present in a page. These words allow Google to associate these articles or pages to the requests of Internet users in order to present them relevant results.

Keyword optimization is the improvement of the choice and use of keywords relevant to the content, product or service offered on a web page.

Why should I optimize my keywords ?

It is important to optimize keywords because it is through them that search engines will find your content when users search for specific terms. If your keywords are optimized, your page will be more easily associated with the users' query. This will help improve your click through rate and the quality indicator of your page.

How to optimize your keywords

In order to optimize your keywords, your content must :

  • target at least 1 keyword on which the page is intended to be ranked
  • have a keyword highlighted in semantically strong elements such as the page title; the meta description; the title <h1> and <hn> highlighted by the <strong> tag; the url and the image
  • have a keyword highlighted when it is repeated in the content (beware of stuffing) and appears early in the content 
k

keyword repetition

What is keyword repetition?

Keyword repetition is the analysis of the repetition of the content of a page. This analysis takes into account the total number of words and the number of distinct words in order to calculate their repetition rate in the text. For example, in the sentence "here is a seo essay for the seo" the analysis would indicate that there are :

  • 7 distinct words: "here", "is", "an", "seo", "essay", "for", "the"
  • 8 words: "here" "is", "an","seo", "essay", "for", "the", "seo"
  • the repetition rate is therefore 12,5%.

The calculation of the repetition rate is done as follows = (1- number of distinct words / number of words) x 100.

Why is it important to check the repetition of keywords? 

When keyword repetition remains below a certain threshold (less than 50%) it contributes to the referencing of the page. Since above this rate, search engines may consider it as an attempt to over-optimize the content. Moreover, it is important that the content itself is not repeated either. A content with too high a repetition rate can end up being penalized by search engines. It will be considered as "poor" content, of poor quality and with little added value for the users. 

How to manage keyword repetition?

In order to optimize the repetition of keywords in your content without losing quality, you must :

  • keep the repetition rate below 50%
  • think of the users. Repetition of keywords can be done, but it should not harm the user experience
  • use a rich and varied semantic field around your main keyword, including synonyms
L

Labels

What is the <label> element ?

In an HTML form each input field addressed to the user must be accompanied by a label informing the object of the input.

The HTML element <label> is a specific element for forms. It allows you to formulate a title to a form field, to create text input spaces, to propose option zones to the users, etc.

Thus, an HTML form will be made up of :

  • a content
  • an item markup called commands (checkboxes, radio button, text input, object commands, etc.)
  • a label on these commands

Why is this important ?

Labels are necessary :

  • for the user because of their use by the reading wizards
  • for screen readers, which need defined labels to associate each form field with a text

How to structure the <label> element ?

The label element can be associated to a control via the "for" attribute. It is a control labeled by the label element. The "for" attribute refers to the "id" attribute of the form element. In other words, an identifier (the "id" attribute) must be provided to a <input> element in order to associate the input to a <label> element. The attribute "for" is then filled in with the value of the identifier.
Finally, it is possible to directly include a <input> element in a <label> element.

Example : 

<div>
    <label for="user_email">Email</label>
    <input type="email" name="email" id="user_email">
</div>

This will allow a better ergonomy when clicking on the label to activate the field. This practice is used to adapt the content to small screens.

Language

What's the language ?

It is the language in which the content of a web page is written. It is also the element added on the HTML tag that indicates the language of a page. For example, if the content of your page is in English, you must add on the HTML tag lang = "en". 

Why is it important to define the language ?

It is important to define the language of a page because it enables robots to interpret the content (even if Google does not necessarily use it). It is interesting to define it because it helps spell checkers and grammar checkers to verify or ignore it (when it is not in the language of the spell checker).  Defining the language also helps translation tools recognize pages or parts of text in a specific language. Specifying the language also helps speech synthesizers and Braille translators get usable results.

How do I manage the language attribute ? 

The lang attribute can be defined as an HTML attribute, in an HTTP Content-Language header and also in an HTML tag. The language must be valid and defined thanks to its ISO-639 code (i.e. fr, fr-fr, fr-ca, en-us).
Here is how to manage the lang attribute in these different elements : 

Example 1 : Language defined as attribute in the HTML tag

 <html lang="en">

Example2 : Language defined in an HTML tag

<meta http-equiv="content-language" content="en"> 

Several languages can be defined within the same element, but it is preferable to define only one to facilitate the understanding of search engines.  Note that in our analysis, we take into account the first language encountered.

Example 3 : Several languages defined

<meta http-equiv="content-language" content="fr, en"> 

Language versions

What are the language versions ?

They are the different versions of a content written in several languages and accessible from different URLs. These versions are indicated and specified thanks to a hreflang link present in the HTML code of the page.

Why is it important to indicate the language versions ?

It is important to clearly indicate and specify the localized versions of a content in order to help search engines to better understand it and redirect users to the most relevant and suitable version for them.  

How to indicate them to crawlers

The hreflang link can be defined in the HTML code of the page at the <head> level thanks to the <link rel="alternate" hreflang="code_langue" href="url_absolue" /> tag.

<head>
...
    <link rel="alternate" hreflang="en" href="https://website.com/en/cat" />
    <link rel="alternate" hreflang="pt" href="https://website.com/pt/gato" />
...
</head>

The localized versions can also be defined in an HTTP header :
Link: <url_absolue_1>; rel="alternate"; hreflang="code_langue_1", <url_absolue_2>; rel="alternate"; hreflang="code_langue_2". It is possible to define several of them, they are then separated by a comma ",".

Link: <https://website.com/en/cat>; rel="alternate"; hreflang="en",
      <https://website.com/pt/gato>; rel="alternate"; hreflang="pt"

The urls of these localized versions must be fully defined and the url must be accessible to crawlers. The language must also be valid and defined using the ISO 639-1 format: fr, fr-FR, en etc.

Layout stability

What is layout stability ?

Layout stability is when the various elements of the page do not change position or change only a little as a result of the loading of new resources. For example, the user begins to read text on the page and at the same time, a block is dynamically added above it via JavaScript, the text then shifts to the bottom and the user loses the thread of its reading.

Google's CLS (Cumulative Layout Shift) indicator measures how often these changes occur. The higher the indicator, the more unstable the layout. When this indicator is 0, no unexpected movement of the page content has been detected. Read more about this CLS indicator and how it is calculated in the Google documentation.

Why is it important ? 

Layout stability is important because it is taken into account by Google in its ranking criteria and most importantly, because it negatively impacts the user experience when browsing the page. Faced with an unstable page, the user may be frustrated by the loss of visual cues and worse, he may think that the site does not work because of a shift during interaction on buttons that move for example.

How to avoid unexpected layout changes

In order to provide an optimal experience for your users, it is necessary to keep the CLS indicator below 0.1. 

Here you have a few tips to keep the indicator below the critical bar :

  • define the size attributes of your images and videos in HTML code or reserve the necessary space in a container with a height/width ratio in CSS
  • define the dimensions of containers that hold third-party content such as advertisements
  • do not dynamically insert content on top of existing content
  • prioritize transformation animations ("transform" in CSS) to property animations that trigger layout changes (JavaScript manipulation)
  • preload web fonts

 

Link Juice

What is Link juice ?

Link juice is the term used to evoke the beneficial effects on natural referencing that a website can transmit to another website or rather a page to another page through an outgoing link.

When a page mentions another page in its content, it ends up by transferring some of its authority (its juice). Imagine that in an article about Inbound Marketing, for example, we mentioned that Digital Marketing is important for this strategy. By inserting a link in the "Digital Marketing" section to the page that we consider the most complete on this topic, we tell Google that this page is the reference on this subject, and so we give it our "vote of confidence" - or as we said before, we pass on a bit of our authority/juice to it.

Why is this important ?

One of the most important points of Link Juice is the distribution of the notoriety of a website. What is important to understand is that each link used transfers a part of its notoriety. It is extremely important that your page contains more links to your site than to another. Why is this important? Because a site that has only outgoing links is not interesting to Google. However, you should not have only internal links either, since you cannot be the reference in all the domains addresed in your site/page. You can specify to Google the type of your links  through the rel attribute on your tags <a> when they are less relevant :

  • rel="sponsored" : for paid ads
  • rel="ugc" : for the content generated by your users
  • rel="nofollow" : to tell Google not to follow this link

You can also tell Google not to follow all the links of the page thanks to the general instruction for robots: <meta name="robots" content="nofollow">, which will enable you to apply the  instruction on all the links of the page.

Be careful, specifying the type of link does not lead to the transmission of "juice", that is to say that through these specific links, no fame is transferred, however, the not transmitted juice is lost.

How to manage Link juice

Make sure that more than 50% of the links on the page point to your site in order to limit the amount of lost juice :

  •  remove external links and/or add more internal links that are tracked.
  •  remove the attributes specifying the type (nofollow etc) on internal links.

List Item

What is a list item <li> ?

The html language offers the possibility to create lists <ul>, where each enumeration is defined by the <li> tag. Each list element <li> nests in the associated list <ul>.

Why is it important to respect the list imbrication ? 

Depending on the nature of the list you create, you can adapt the content :

  • Unordered lists will be marked (by default) with bullets. There is therefore no order of importance in the hierarchy of the information in your list. The different elements of your list should appear in a block element <ul>, which is the element defining an unordered list block
     
  • The ordered (or numbered) lists are used to give a hierarchy to the different sequences of your list. This type of list must be integrated in a block element <ol>, which will allow to number each beginning of line of your list

If you do not embed your list item in a <ul> or <ol> block item, your list will not be interpreted correctly by your browser and will not be supported by assistive technologies.

How do I build a list ?

Your list should contain the following information :

  • an element of block <ol> or <ul>
  • a list sequence starting with <li>

For example :

<h1>Example of an ordered list of fruits</h1>
<ol>
    <Banana
    <orange/li>Orange/li>
    <pineapple>/pineapple>/li>
</ol>
This will result in :

Example of an ordered list of fruits

Banana
Orange
Pineapple

M

Microdata

What is structured data ?

It is pieces of code that are added to the HTML code of a site in order to improve the visibility and understanding of the content of a page for search engines. 
This data enriches the information that is transmitted to the search engines. They will then be able to understand information on your page such as an address, phone number, notices, etc... and display it in search results.

Why is this important ?

The purpose of Microdata is to make your site more understandable to search engines. This will allow them to offer content that is more adapted and more responsive to the requests of Internet users.
As a result, Microdata has an influence on your positioning because it helps crawlers to index your content and associate it with user requests.

Microdata also allows you to enrich the semantics of the page by specifying data related to content, context, etc. For example, for a blog article, additional data such as author, date, etc. can be found.
By specifying these data, Google will be able to give you access to the "rich snipped" that will make your content even more attractive to the Internet user in the SERP and increase your click-through rate.

How to set up the Microdata ?

To write these tags, there are 3 possible syntaxes: JSON-LD, RDFa and Microdata.

Example of syntax in JSON-LD :

<html>
  <head>
    <title>Party Coffee Cake</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "This coffee cake is awesome and perfect for parties.",
      "prepTime": "PT20M"
    }
    </script>
  </head>
  <body>
  <h2>Party coffee cake recipe</h2>
  <p>
    This coffee cake is awesome and perfect for parties.
  </p>
  </body>
</html>

It is recommended to use tags listed on schema.org, which is the protocol that structures web pages as they are known all over the world. There, you will also find all the indications to set up your Microdata.

 

N

Non-composited animations

What are non-composited animations ?

When a browser interprets the code of a page and converts the HTML, CSS and JavaScript into pixels, it performs what is called the pixel pipeline. It is a process that consists of 5 sequential steps :

  1. JavaScript / CSS
  2. Style 
  3. Layout
  4. Paint
  5. Composite

At each step, the browser uses the result of the previous step to create new data.  A non-composited animation is a rendering that forces the browser to go back to a previous step (JavaScript / CSS, Style, Paint and Layout) which increases the necessity of calculations and therefore the rendering time.

Why should they be avoided ?

Non-composited animations may appear irregular when rendered by the browser on low-powered machines or when heavy tasks are executed at the same time. This lack of fluidity affects the visual perception of the page for users.

How to correct them

There are several reasons why an animation is not composited and to correct them it is necessary to intervene on the CSS rules in use :

  • incompatible CSS property
  • the property linked to "transform" depends on the size of the zone
  • the property related to "filter" can move pixels
  • the composite mode of the effect is not "replace"
  • the target contains another incompatible animation
  • the effect has timer settings that are not compatible with each other

For more information about the pixel pipeline and optimizing performance for rendering, check Google's documentation on rendering performance.

Notification permission

What is a notification permission ?

A notification permission is a request made by a website to the user to obtain the right to send notifications. When this request is accepted, the user will be able to receive notifications that will be displayed off the page in their system. This request, which is displayed on the user's browser, is initiated using javaScript code: notification.requestPermission()

Why is it important to ask for it correctly ?

Faced with a request for permission to notify without context, i.e. when the page is loading, users are confused, suspicious and may refuse it. An early request therefore hinders the user experience and alters the relative confidence in the website.

How can it be implemented effectively ?

To provide an optimal experience, it is necessary to make the request at the right time, as a user interaction and not at the page loading. In addition, it is interesting to offer several types of notifications to the user and to make the request only after his choice.

Number of keywords

What is a keyword ?

As a reminder, keywords are terms composed of one or more words that correspond to the subject present in an article or in a page. These words allow Google to associate these articles or pages with the requests of Internet users in order to present them  relevant results.

The number of keywords corresponds to the number of words (excluding stopwords) on your page. For example, if in your content there are the words "shoes" and "green shoes", the analysis will indicate that there are 2 keywords.

Why is it important to have a consistent content?

If in the content of your page there aren't any or very few keywords, Google and other search engines consider that your page has no added value so they will not rank it. 

How to find the right balance in the use of keywords?

In order to be ranked and to have an optimized  page at the level of keywords, we recommend : 

  • to have a minimum of 400 to 500 keywords per page
  • highlight the search terms preferably via HTML tags (i.e. in the titles, in bold or in the text alternatives of the images)
  • do not over-optimize a keyword, i.e. repeat it in an unnatural way, and tag it with exaggeration (also called Keyword stuffing technique)
  • use synonyms. Search engines tend to move towards understanding language and establish relationships between different words in different contexts. This also allows to better position oneself on long tail searches (searches with more keywords, more precise)
O

Offscreen image

What is an offscreen image ?

An offscreen image is simply an image that is not visible to the user when the page loads. It is located below the waterline or is not visible without user interaction.

Why is it useful to delay their loading ?

It is useful to defer their loading after all the essential resources the page have loaded in order to reduce the delay before interactivity and thus improve the user experience.

How can I do this ?

There is no specific HTML attribute to inform the browser that these images are to be uploaded later. To delay their loading it is therefore necessary to use JavaScript code that will take care of loading the image at the appropriate time.

An example of use with lazysizes, which is a script for lazy loading and is optimized for SEO :

    ...
    <script src="lazysizes.min.js" async></script>
</body>
  • add the "lazyload" class and change the "src" attribute to "data-src" (useful for scripting) on images whose loading must be delayed
<img src="images/hors-ecran.jpg" alt="Mon Image hors écran">
<img class="lazyload" data-src="images/off-screen.jpg" alt="My Image offscreen">
  • the image will be loaded after the essential resources of the page

Optimal Meta viewport

What is the meta viewport ?

The meta viewport is an element added to the HTML code that instructs the browser to control the display dimensions of a web page. This element allows the layout of the content to be responsive, i.e. it adapts to the screens of different user devices, mainly mobile devices, such as mobile phones and tablets for example.

Why is it important to have a meta viewport ? 

It is important to have a meta viewport because today, the majority of user searches are done from a mobile device. When a web page doesn't adapt to these devices, it makes the user experience difficult which penalizes its referencing.

How to optimize your meta viewport

The meta viewport must be declared in the HTML code at the <head> level : 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In order for the page content to fit on a mobile screen, it is necessary to define the meta viewport with the following 2 instructions, otherwise the browser will not perform the layout correctly :

  • the instruction "width" which controls the size of the window can be set in pixel width=600 or the value "device-width" which corresponds to the width of the window in pixel
  • the instruction "initial-scale" allows to define the initial zoom level when the page is loaded

Optimized h1 title

What is an optimized h1 title ?

As a reminder, the h1 title is the main and most important title of a content. This is the first title you usually see at the top of a web page.
An optimized h1 title is a title that contains the targeted keyword related to the main content of the page. It is also the title written with the largest font size. 

Why is it important ? 

The h1 title is important because it is through it that search engines and users will identify the content of a page. It is also important to know that the title h1 is one of the most influential factors for ranking on search engine results.

How to optimize a h1 title ?

In order to optimize your h1 title you must : 

  • write an attractive title that contains the main keywords of the page's content 
  • use the largest font size
  • have only one h1 title per page. It is possible to have several H1 titles per page, when the page contains several distinct contents, but this technique makes the optimization more delicate

For example : 

<h1>How to optimize a h1 title to get organic referencing</h1>

Optimized meta description

What is a meta description?

A meta description is the description of the content of your website or web page. It informs the Internet user about what he will find by clicking on your site. It is located below the title link that allows the access to your site in the pages of search engines.

Why is it important to optimize my meta description?

The meta tag "description" plays an essential role in the referencing of a website because it appears in the SERPs of search engines. Even if it is no longer crawled by search engine robots, it is the main showcase of your website (along with the title). Having a nice showcase attracts more traffic and increases your CTR, improving your SEO.  Its goal is therefore to attract the interest of Internet users to visit your site. 

How to optimize a meta description?

When you write your title in your meta tag "description", it is important to respect several criteria in order to optimize it :

  • your description must describe the content of your site in an attractive way for  Internet users, i.e. it must incite them to click on your website
  • depending on the case, the length of your description should be between 90 and 320 characters. In most cases, Google displays 600 pixels in the SERP (about 160 characters)
  • your description must be clear and concise
  • do not write a list of key words 
  • use action verbs: "Improve", "Increase", "Expand", "Discover", etc
  • your description should allow you to differentiate yourself from others
  • avoid including temporal elements : "Tomorrow", "Today", etc

Optimized page title

What is an optimized page title ?

Reminder: The title of a web page appears in the title bar of the browser, but also in the pages of search engines. The page title in HTML language is called <Title> tag. 

An optimized page title is therefore a title that actively participates in your referencing in the SERPs, thanks to its relevance and attractiveness for the user and for search engines.

Why is it important ?

The title of a page is as important as the title of a novel. It must :

  • seduce web users in order to attract them to your site. This influences the CTR and thus indirectly on the positioning ;
  • seduce search engines in order to be well positioned in the SERPs.

How to optimize your page title ?

When you write your title in your <title> tag, it is important to respect several criteria in order to optimize it as well as possible :

  • the length : no more than 65 characters, i.e. 512 pixels. It must occupy, a at least, a space of 25 characters. It is preferable to reason in terms of pixels, because all the letters do not occupy the same space in a SERP. An uppercase "M" does not occupy the same space as a lowercase "j" for example
  • your title must be concise and precise 
  • include the main keyword of your page, i.e. the one on which you wish to be ranked
  • avoid keyword stuffing in your title. It must remain relevant and attractive to the user
  • the title of your page must be unique, although this can be complicated depending on your sector of activity
  • avoid naming your page "Home", "Contact" because Google takes the right to change the title of your page if it is not relevant enough to it
  • don't hesitate to use action verbs: "Improve", "Increase", "Develop", etc
  • the title of your page must be coherent and in adequacy with its contents
  • feel free to include your brand name if it is well known
  • don't forget that you write primarily to please the Internet users. You have to find the right balance between SEO and user appeal
P

Preconnect to required origins

What is a preconnect ?

When a resource on a page is loaded later by a JavaScript script or CSS style, the browser cannot anticipate the necessary connection to the site (origin) and wastes time connecting to it when it has to load it instead.  A preconnection is an instruction that informs the browser that this connection will be needed later, allowing it to prepare for it.

Why is it important ?

It is useful to specify these different later connections so that the browser anticipates them and improves the loading of the relevant resources when the time comes. Pre-connections therefore improve the page loading time.

How to set them up

Establish early connections with important external sources. To tell the browser which pre-connection to make, it is necessary to add the code at the <head> section of the HTML code.

Example for the subsequent loading of the resource "https://exemple.com/script.js" :

<link rel="preconnect" href="https://exemple.com">

Preload resources

What is a preload resources ? 

Preload resource is the anticipation of the loading of a resource required later by another resource, necessary for the rendering of the page.  For example, in a CSS style, the loading of a web font is necessary. When loading the page, the browser will load this font after interpreting and the CSS style. Preloading then consists in informing the browser that this font must be loaded before the CSS style is interpreted.

Why is this important ?

It is interesting to inform the browser of future loadings required by other resources so that it anticipates them and improves the page loading time and renders the page more quickly.

How do I set it up ?

To tell the browser which resources to preload, it is necessary to add the instructions in the <head> section of the HTML code of the page.

Example for loading a web font required by a CSS style :

<head>
...
<link rel="preload" href="https://fonts.googleapis.com/css?family=Quicksand|Lato" 
 as="font" crossorigin="anonymous" />
...
</head>

The "as" attribute is used to define the MIME type of the resource to be preloaded, which is useful for the browser in prioritizing the resources to be loaded. In the absence of this attribute, the browser can ignore the instruction. The main types are: script, style, font, image, video, audio, document, object, fetch, track and embed.

The "crossorigin" attribute allows to manage the CORS (security linked to the loading of a resource from another site). This attribute is optional when the resource is on the same site. If the resource is external and the attribute is not specified, the preload will not be taken into account by the browser.

Protected external links

What are external links ?

Links are HTML elements materialized by the <a> tag. They are placed in a page and allow users, by clicking on them, to access another page. We talk about external links when they lead the user to another site. It is possible to define the behavior of a link on the browser with the attribute "target". When it is not set, the page opens on the current tab and replaces the current page. When defined with the value "_blank", it opens a new tab on the browser and leaves the current page accessible.

Example of an external link opening on a new tab :

<a href="https://cocolyze.com" target="_blank">Cocolyze</a>

Why do they need to be protected ?

External links opening on a new tab expose sensitive code from the current page to the destination page. If the destination is malicious, it may maliciously redirect the current page to another destination. Similarly, the destination page may be running on the same process as the current page, and if a lot of JavaScript code is executed, the current page may be slowed down.

How to protect them

In order to secure external links, it is necessary to add the attribute "rel", on all links <a>, specifying the value "noopener" or "noreferrer" when they open on a new tab.

Example of a protected external link :

<a href="https://cocolyze.com" target="_blank" rel="noopener">Cocolyze</a>
R

Ranked pages

Ranked pages are pages that we found on your keyword tracking (in the top 100 results) during the last analysis by our robot.

Readability of content

What is the readability of content ?

The readability of content concerns the facility of reading and comprehension of the content by the users. Structuring aspects, such as paragraphs, sections, titles and subtitles, number of words, length of sentences, language used, but also more aesthetic aspects such as the font of the text, its size and color, for example, directly influence the readability of a content. 

Why is it important ?

Readability of content is important because it has a strong influence on the reader's interest and engagement with content. A content that is difficult to understand, whether because of its structure, the language used or even because of its design, will have difficulty attracting visits. Even less will it make them come back.

How to improve the readability of your content ?

Regarding readability from a structuring and language point of view, think about :

  • writing short sentences (about 16 words per sentence) to help the understanding and memorization of the content
  • choose a simpler vocabulary adapted to your target audience

Render-blocking resources

What is a render-blocking resource ?

Render-blocking resources are CSS styles or JavaScript scripts that need to be fully loaded to perform the first rendering of the page.

Why is it important ?

Depending on their position in the HTML code of your site, these render- blocking resources can considerably slow down the loading time of your page.
The HTML code of a web page is read from top to bottom by browsers. If your JavaScript script is located at the beginning of the page for example, the reading by the browser of your HTML code will "pause" to process your Javascript script. Thus, the rest of your HTML content will not be displayed during the processing of this element, which is penalizing for the loading time of your site, for the user experience and therefore for your referencing.
The resources that block the rendering of a web page are generally derived from JavaScript and CSS.

How can I solve this problem ?

Place JavaScript scripts at the bottom of the page or defer their loading thanks to the "defer" attribute :

<head>
    <script src="/script.js" defer></script>
</head>
... ou ...
    <script src="/script.js"></script>
</body>
</html>

Specify the relevant media for stylesheets :

<head>
    <link rel="stylesheet" href="print.css" media="print">
</head>

Resources weight

What is the weight of resources ?

The resource weight corresponds to the bytes to be downloaded by the browser to retrieve all the elements necessary for the page (CSS styles, JavaScript scripts, images etc).

We distinguish the real weight of the resource from the transferred weight. The real size corresponds to the brute size of the file (the space it occupies in memory or on a hard disk) as for the transferred size, it is the space it occupies after compression. Usually WEB servers compress the resources before sending them in order to reduce the bandwidth needed for their download, then browsers decompress them after reception in order to restore them.

Why is it important ?

The more resources to load, the more the global weight of these resources is important and it takes time for the browser to recover everything. Also, the browser may limit simultaneous connections to the same site and put other connections on standby, which further increases the time it takes to load the page. Integrating a lot of resources into a page, therefore, directly impacts its loading speed, especially if the user does not have a good Internet connection, or if he is on a phone with a limited connection.

How to make it acceptable

Beyond all the methods to reduce the weight of resources (image compression, CSS style minimization, etc.), it is recommended to :

  • do not exceed a global weight to be transferred of 4 MB
  • limit the number of resources to be loaded as much as possible
  • favour a simple and fast page, where the information the user is looking for is clearly accessible, rather than a heavy page with a lot of visual elements that take the user away from his search for information
  • load dynamic elements when triggered by the user, for example, if clicking on a button brings up a modal window with an image, load the image at the time of the click and not in advance

Responsive Images

What is a responsive image ? 

The fact that an image is responsive to a screen means that its dimensions correspond to the dimensions of the screen, it is expressed in pixels, for example: 600px x 400px. The objective is therefore that the size of the image adapts to the dimensions of the screen, but also its resolution and quality. 

Why is this important ?

The dimensions of an image must be adapted to the browser's screen: an image that is too large may take a long time to load and may not be visible during this loading time. An image that is too small may be displayed in a pixelated way.
This is why these adaptive images are necessary to make your website "responsive", i.e. the same page of a site will have a rendering adapted to the size of the screen you are using. It is therefore necessary to adapt your images to avoid having too big images on a smartphone, for example.

How do I solve this problem ?

It is possible to save an image under different dimensions so that the one with the most adapted is loaded.

Defining different image dimensions is possible thanks to the "srcset" attribute. It is indicated in the following way: "(url alternative image 1) (width description), (url alternative image 2) (width description)".

<img src="image.jpg" srcset="small-image.jpg 480w, big-image.jpg 1080w">

Note that the width description is specified with the unit w, not px. This is the actual size of the image. It can be found by examining the properties of the image file on the computer.

When this attribute is specified, the browser loads the appropriate image. 

It is important to leave the src attribute set, so that browsers that do not support the srcset attribute can display it.

Robots.txt Guidelines

What is a Robots.txt file ? 

The Robots.txt file tells search engines which pages they can explore or not. This file is placed at the root of the site at https://exemple.com/robots.txt.

This file can, if misused, cause some of your pages to be indexed in search engine results, even if you don't want them to.

How to check the Robots.txt file ?

  • Make sure robots.txt doesn't return an HTTP 5XX status code
  • Keep robots.txt smaller than 500 KiB. Search engines may stop processing robots.txt midway through if the file is larger than 500 KiB.
  • Fix any format errors 
  • Provide an absolute URL for sitemap (https://exemple.com/sitemap.xml instead of /sitemap.xml)
S

Script execution

What is script execution ?

It is the time spent by the browser analyzing, compiling and executing JavaScript code. These steps are essential after loading the scripts so that the page can take advantage of the defined features and behaviors. The main execution is called "main thread" (it is possible to download some processing on secondary "threads"), it is popularly known as the main process in charge of the rendering and interactivity of the page.

Why is it important ?

When the page includes a lot of JavaScript code, it degrades the performance of the page in several ways :

  • a loading delay slowed down by the weight of the scripts to download
  • a loss of interactivity regarding users' actions due to too much solicitation of the "main thread" which cannot respond
  • a higher cost of interpretation, especially if the page executes a lot of code before it is needed, which delays the interactivity time frame
  • a high memory consumption which can give slow and jerky effects to users

How can it be improved ?

When a page suffers from slowness due to too much script execution, it is useful to :

  • remove unused scripts from the page
  • remove unused code from scripts
  • split the JavaScript code into separate files and load only those useful for the page
  • defer the execution of certain tasks in the JavaScript code
  • decrease the overall use of scripts in the page

Scroll X

What is the scroll X?

The scroll X is the element that enables you to scroll on a page from left to right, that is, horizontally. You can see it when there is a horizontal scrolling bar on the browser. It happens when the content doesn’t adapt to the size of the screen meaning that the site is bigger than the screen window and it indicates that the website is not responsive enough. 

Why is it a problem?

The presence of a scroll X has a bad influence on users' experience: horizontal scrolling is not genuine for users, they don’t have the reflex to scroll pages from left to right. If users have a bad experience on your site, they are probably going to return to SERP to choose a more adapted website increasing your bounce rate, and this will influence directly your ranking emplacement.

How to fix it?

You need to work on the CSS style/ template of your page. 

Search Volume

The Search Volume corresponds to the estimated number of searches carried out on Google every month.

This score allows you to measure the visibility and click potential of a keyword compared to another.

Keywords with a high search volume can bring in more clicks, but they are often more competitive.

Security on links to cross-origin destinations (noopener)

Why is it important to use nooppener attributes? 

When you create a link to an another site using the target="_blank" attribute (open in new tab), you can expose your website to performance and security issues.
The other page may use the same ressources than your page and your page's performance may suffer.

The other page can access to informations from your page,  using the window.opener property. This may allow the other page to redirect your page to a malicious URL.

How to protect your outgoing links?

To avoid these issues, add a rel="noopener" or rel="noreferrer" attribute to your links using a target="_blank" attribute. 

SEO Value

The SEO Value score allows you to measure the importance of a position or its movements. It corresponds to the estimated value of an SEO position.
 

How can you use this score?

It’s more useful to track the SEO value rather than the average rank. The SEO value allows you to measure the ranking evolution by taking into account the importance of keywords. For example, it will significantly increase if you’ve gained a position on a very important keyword. On the contrary, it will barely change if you gain a lot of positions on keywords with a weak potential. 

You can use this score to measure your Return on Investment (ROI) by calculating your budget and the time spent, and comparing it with the SEO drops. 

Data regarding keywords (volume and CPC) are updated every month and this can impact the SEO value that's why you can see variations at the beginning of the month. 

How is the SEO Value calculated?

The SEO Value is calculated according to our algorithm calculation. It takes into account different factors such as rank, type of keyword, search importance, AdWords competition, etc

To summarize:  the SEO Value is the amount of money you have saved in AdWords to retain the same number of visitors  you have with your current position in the search results. 

Server response time

What is server response time ?

The server response time (SRT) corresponds to the time that the WEB server takes to render a page, between the moment it receives the request and the moment it starts to send the page content. This time does not depend on the quality of the connection or the geographical location of the server (latency), but depends only on the computing performance of the WEB server.

Why should this time be short ?

The server response time can greatly affect the position of a site in search results, either because Google judges that the site is too slow to be proposed, or because users do not have the patience to wait for the page to load.

How can it be improved

It is recommended that the server returns the page in less than 300ms.

There are several solutions to improve the server response time :

  • choose a more efficient server
  • look for application/server-side scripts that slow down the loading of pages (or certain Wordpress modules, for example, by disabling them one after the other)
  • enable server-side cache of HTML pages when possible
  • use Load Balancing to reduce server load by spreading it across multiple servers.
  • there are many techniques to improve server speed, but they all depend on technical constraints and should be studied with a specialized technician

Access Google's server response time documentation for more information.

Spam Rating - Your backlinks toxicity

Spam Rating is a score created by Cocolyze which allows us to analyse the toxicity risk of a link. The Spam Rating is a mark, between 1-10, 10 being of high toxicity risk. 

What is link toxicity? 

We consider a potentially toxic link a link that could badly influence the quality of a website's netlinking, and therefore its Google ranking. A toxic link for example can be a link from a poor quality website, such as an online casino in a foreign country with an uncertain reliability which points a link towards your site, even though you have no connection with the casino world. Google could penalize your ranking if there is a high number of poor quality sites linked to yours. 

How to use this indicator? 

The Spam Rating score doesn't indicate the toxic links but the links that have a high toxicity risk. We advise that you manually check the links with a Spam Rating superior or equal to 8: if you think that some of these links aren't linked to your activity and are suspciously unreliable, you can disavow these links with Google to tell them that you don't want Google to take them into account. 
Here is an article from Google explaining how to disavow your backlinks

How is it calculated? 

The Spam Rating is calculated by powerful algorithms from our own research and development. In simple terms, this score rests on popularity, confidence of the referring site, its quality and the analysis of the present links on the page. A website with a high popularity level (i.e. with lots of links) but poor quality (i.e. a weak confidence score) will be considered as potentially toxic. 

Superfluous code

What is the superfluous code ?

It is mainly JavaScript code whose role is to fill in missing functionalities on some browsers, and more particularly on older versions. These functions, whose objective is to ensure compatibility on the various supports, are called polyfills. They can be considered superfluous because the majority of recent browsers do not use them.

Why is this a problem ?

Polyfills (and "transform" attributes) are good because they allow older browsers to use recent features and are therefore important for the accessibility of all users, even those who do not update their browser. What is problematic is the fact that they are loaded by modern browsers that do not need them. Like unused scripts, downloading unused code delays the page loading and makes the necessary code interpretation by the browser slower, which affects the speed of the page.

How to speed up loading on recent browsers 

The most common solution is to detect the user's browser and load only the necessary polyfills :

if (recent_browser()) {
    lancement();
} else {
    charger_script('polyfills.js', lancement);
}

function lancement() {
    ...
}

Another solution is to use the new syntax for loading JavaScript modules, which allows to load the appropriate script according to the interpretation of the HTML code by the browser :

<!-- Modern browsers will load this script and older browsers will ignore it. -->
<script type="module" src="script.js"></script>

<!-- Modern browsers will load this script and older browsers will ignore it. -->
<script nomodule src="script_avec_polyfills.js"></script>

Find more information about this technique in the article by Philip Walton, engineer at Google.

 

T

Tap target size

What is a tap target ?

A tap target is an HTML element of the page that users can press (or click on), mainly links and buttons.

Why is their size important ?

When a tap target is too small, users using a phone may find it difficult to interact with it, which affects the user experience and therefore the positioning of the page on the SERPs.

How to make them accessible ?

In order for the tap targets to be easily accessible, it is necessary that they occupy a minimum size of 48px x 48px and that the spacing between these different elements be at least 8px.

When this type of problem is present on a page, it is necessary to intervene at the CSS style level in order to increase the size of the elements concerned, by increasing the "padding" property for example. Also, the spacing between different elements can be adjusted using the "margin" property.

Text compression

What is text compression ?

Text compression allows you to compress all the resources of your website that use text (html, JavaScript, CSS style, AJAX calls). 

Why is it important ?

This operation reduces the weight of the data sent to the client : the server will compress the targeted data, then send it to the browser, which will decompress it and use it to display the text content of your page. Thanks to this process, the user experience will be improved because the loading time of your web page that will be reduced.

How to implement text compression ?

There are several compression formats and methods: Gzip, Deflate and Brotli.

When a request is made from a browser to a server, the server specifies in an HTTP header "Accept-Encoding" the algorithms it supports.

Accept-Encoding: gzip, compress, br

In return, the server will then reply with the indication "Content-Encoding" in the HTTP header to specify which compression algorithm was used.

Content-Encoding: gzip

It is important not to activate the text compression on other types of resources such as images, videos, etc, and to set it up on the WEB server of your site.

Text size

What is text size ?

Text size is the space that characters occupy in the content of a WEB page. The size of a text is defined in the CSS styles thanks to the "font-size" property. By default, in the absence of instructions, browsers generally use a size of 16px.

body {
    font-size: 14px;
}

The value that the attribute "font-size" can take is expressed in pixels (px), it can also be expressed through other units (%, em, rem) which are translated into pixels by the browser.

Why is it important ?

If the text size is not big enough, especially on cell phones, users will have difficulty reading the content of your page and will have to zoom in to make it accessible. Having to manipulate the browser to make the content accessible degrades the user experience, so it is essential to provide the best accessibility to users from the first display of the WEB page.

How can it be optimized ?

To provide an optimal experience, at least 60% of the text must be larger than 12px. If this is not the case it is necessary to :

  • increase the values of the "font-size" property of the concerned elements in the CSS styles
p { 
    font-size: 8px; 
    font-size: 14px;
}
  • specify a "meta viewport" for the mobile version in the HTML code, so that the browser can adjust the size of the text
<head>
    ...
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...
</head>

Text visibility

What is text visibility ?

Text visibility corresponds to the fact that the text of a web page is visible while the font is loading. The font is the visual representation of characters and is present by default on operating systems. It is possible to load a specific font (WEB font) in order to format the text in an original way. 

Why is it important that the text is visible during the page loading ?

When a web font is being loaded, text without the system's alternative font is not visible until the browser loads and during this time the user sees nothing. This can lead to a bad user experience and cause unexpected layout changes.

How do I solve the absence of text ?

In order to solve the problem of the absence of text during loading, it is necessary to use a font present on the operating systems, so that the text is visible during loading. 

The definition of a WEB font is done at the level of the CSS style and is declared in the following way (without instruction to use an alternative system font) :

@font-face {
  font-family: 'Pacifico';
  src: local('Pacifico Regular'), local('Pacifico-Regular'), 
       url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
}

The easiest way to use a temporary system font while it is loading is to add the "font-display: swap;" property :

@font-face {
    font-family: 'Pacifico'; 
    src: local('Pacifico Regular'), local('Pacifico-Regular'),
        url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2'); 
    
    font-display: swap;
}

The "swap" instruction tells the browser that the text using the font should be displayed immediately using a system font.

The robots.txt file is not valid

What is the robots.txt file ?

The robots.txt file is a text file located at the base of your site that is intended to provide instructions to search engine spiders. 

It allows, among other things, to :

  • define the rules of  access authorization to the various pages of your site, i.e. indicate the pages that they can explore or not
  • define one or more links to sitemap files : files that list all the pages of your site

An example of robots.txt file accessible via the url : https://www.tikamoon.com/robots.txt

User-Agent: *
Allow: /
Disallow: /V2/
Disallow: /recherche
Disallow: /articlepopup.php*
Disallow: /recommander.php*
Disallow: *filtreprix=*
Disallow: *action=*
Disallow: *artid=*
sitemap : https://www.tikamoon.com/sitemap.xml

Why is it important to have this file ?

It is important to have a robots.txt file because, it allows you to clearly define the access rules of your website and, also it is where you fill in its sitemap file. When a part of your site must not be explored for security or uselessness reasons, it is interesting to prohibit the exploration of these pages. Prohibiting exploration does not mean that the pages cannot be indexed (contrary to the "no index" instructions) but it is very unlikely that they will be there. The main interest is  that the robots do not waste time (crawl budget) to analyze the content of pages that you don't want in the SERPs.

For example, you have a part of your community site that contains user profile sheets that are poor in terms of content and added value, so it is better to prohibit access to these pages so that the robots mainly explore your pages with added value. 

In the absence of this file and generally a HTTP 4xx error during recovery, the robots consider that they are authorized to explore your entire site, which can be a problem as they will eventually explore pages that you did not want them to explore.

If an error occurs during the recovery of this file with an HTTP 5xx error or no response (with a timeout, for example), then they consider that they are not allowed to explore the entirety of your site and you have very little chance that your pages appear on the SERPs.

Similarly, if syntax errors are present in the directives, it is possible that the robots misinterpret your intentions and therefore explore pages that should not be and vice versa.

How to fix the robots.txt file

In order to ensure that the robots.txt file is valid, it is necessary to :

  • check that the https://mywebsite.com/robots.txt page returns a text file with an HTTP 200 code in less than a few seconds
  • check if it does not exist or returns a 404 HTTP code, it is useful to create it
  • check if it returns an HTTP code other than 200 or a non-text file, it is necessary to intervene at the server or application level to restore access to it

And also, check the syntax of the file by following these few instructions :

  • only empty lines, comments and directives corresponding to the "name:value" format are allowed in the robots.txt file
  • make sure that the allow and disallow values are empty or start with / or *
  • do not use $ in the middle of a value (for example, allow: / file $ html)
  • make sure there is a value for user-agent
  • make sure there are no allow or disallow directives before user-agent
     

Thematic cocoon

A thematic cocoon is a group of keywords linked to a specific thematic (lexical field). A content page may contain several thematic cocoons.

How can you analyze thematic cocoons?

Thematic cocoons are analyzed by the Writings feature. When you create new content, Cocolyze gathers and analyzes the contents of the 20 top-ranked pages found on Google SERPs and extracts thematic cocoons from their contents. 

How can you use the thematic cocoons?

The thematic cocoons identified by Cocolyze will help you during the writing of your content allowing  you to enrich your page with the right expressions and keywords. By intelligently integrating the keywords of the different thematic cocoons you will be able to :

  • Enrich your content at the lexical level and improve its quality

  • Reach in an easier way a sufficient textual content at the quantitative level (minimum number of words to be well-ranked).

How does Cocolyze identify the thematic cocoons?

1. Scanning.

Cocolyze scans the pages of the first 20 search results in the SERPs and analyzes the content.

2. Analysis.

Among different elements analyzed by Cocolyze, the algorithm identifies :

  • The weighted density of each keyword
    Depending on the position of a keyword on the page, it will have more or less weight. For example, the keyword in the title H1 has more weight than in a paragraph. Cocolyze identifies the total number of occurrences, as well as their weight.

  • Keyword themes
    Using an algorithm developed in-house, Cocolyze can group keywords, both generic and long tail by theme.

Third-party code impact

What is the third-party code ?

Third-party code is all the scripts from other sites and more precisely from CDN (Content Delivery Network) that can be directly integrated into the page. These scripts are in most cases essential to the proper functioning of the page. They are used, for example, to analyze traffic, provide sharing buttons for social networks, set up advertising, etc.

Why is it important to minimize its impact ?

Third-Party scripts bring a set of useful features to websites but their use can also degrade the page performance if they are numerous and not optimized. The aspects that can be impacted are :

  • the loading time due to their weight and the underlying resources they download
  • the delay of the rendering due to a possible blocking caused by waiting for critical resources or a too important solicitation of the navigator
  • the delay of interactivity due to the analysis, compilation and execution of the necessary JavaScript code

How to minimize it 

Beyond a blocking delay of 250ms caused by third party code, it is necessary to intervene and reduce its impact on page performance:

  • defer the loading of scripts thanks to the "defer" or "async" attributes to avoid blocking the rendering
<script src="https://cdn.example.com/script.js" defer></script>
  • load scripts dynamically via JavaScript code when they are useful for user interaction
function load(event) {
    event.target.removeEventListener(event.type, arguments.callee);

    var script = document.createElement('script');
    script.src = 'https://cdn.example.com/script.js';
    document.head.appendChild(script);
}
document.getElementById("bouton").addEventListener("click", load);
  • host the script on your server if the provider's server is slow
<script src="https://cdn.exemple.com/script.js"></script>
<script src="/js/script.js"></script>
  • remove non-essential scripts
<script src="https://cdn.exemple.com/unused.js"></script>
  • pre-connect origins in order to initiate an early connection to external origins
<link rel="preconnect" href="https://cdn.example.com">

TTFB (Time To First Byte)

What is the server fastness or TTFB ?

The loading time of the first byte(Time To First Byte) is the time spent between the sent of the request to go on a page and the first byte received. It is not about the first appearance of the page but the first code lines the browser receives. This time depends on the DNS resolution time, connection quality (latency), geographical location, server performance, quality of the application generating the page and the cache system.

At Cocolyze’s, we analyze the average latency of our servers toward yours in order to give you a server fastness indicator more interesting for the analysis of your website’s performance

What is the consequence for SEO ?

Google tends to show contents with a good user experience first. This way, a page with a too long TTFB can be penalized. In a more simple way, if your page is too long to load, the user might leave you to go back on the SERP and click on a competitor’s link. This action will increase the bounce rate of your link and penalizes your positioning.

We recommend a TTFB under 400ms (0,4s)

How to increase the server fastness ?

Increasing server fastness is a very technical move. Well often, the site is highly slowed down by one of your CMS plugin (Wordpress, Magento, Prestashop, etc.).

A simple solution, easy to do for everyone, is to deactivate each of your CMS plugin one by one, and then to test the fastness of your server thanks an analysis update. You will then be able to know which plugin makes your server slows down. Once the plugin identified, you can look for solutions : updates, find another plugin, deactivate it on some pages,  or simply stop using this plugin.

If it is not a plugin ?

Often, a high TTFB can come from :

  • A badly configured or not powerful enough HTTP server
  • A badly configured or not powerful enough data basis
  • Badly coded scripts doing too much calculations on the page

The solution then consists in looking in the website’s source code step by step with your technical support in order to identify the elements that cause a slow down of the server. Indeed, it is not always helpful to change for a more powerful web server.

U

Unexpected web page refresh

What is an unexpected web page refresh ?

It is a page refresh or redirection to another page that occurs during the user's navigation. This refresh is usually caused by an HTML "refresh" instruction after a certain delay.

Why is it harmful ?

The fact that a page refreshes its contents automatically, or even worse, that the user is redirected to another page, can cause the user to lose track of his navigation and become deeply frustrated. In the majority of cases, the user will prefer a site with intuitive navigation where he is in control of the actions performed on the page.

How to correct it 

If this type of redirection is observed, it is necessary to remove the instruction in question:

  • At the level of the HTML page :
<meta http-equiv="refresh" ...>
  • At the HTTP headers level :
Refresh: ...

Similarly, it may be useful to inspect the JavaScript code on the page to verify that there is no redirection caused randomly. A JavaScript redirection should preferably be triggered by a user action.

Unload event

What is the unload event ?

The unload event occurs when the user interups the loading of a page by leaving the page; or when the user clicks on a link, sends a form, closes the browser window or returns to the previous page. In contrast, the "load" event occurs when the page has finished loading. 

Why is this important ?

The "onUnload" and "onLoad" attributes are embedded in the <body> tags in HTML or <frameset> in JavaScript.
However, the unload event does not work, especially on cell phones, when :

  • you close the tab of a web page from the tab selector 
  • you close the browser application from the application selector

In addition, the presence of an "unload" event can prevent browsers from caching or placing pages in the background while browsing.

For example : If you are on a web application that plays a video and you decide to view another application at the same time, the unload event can prevent the application containing the video from stopping. The unload will prevent that application from being considered as background, which will not allow the video to be interrupted by switching to another application or web page.

How do I fix this problem ?

It is recommended on all modern browsers to use the "pagehide" event to detect page unloads.

Unused CSS resources

What is an unused CSS resource ?

It is a CSS style critically loaded (essential for the first rendering) by the page whose formatting rules are not or little used by the page (use less than 25%). For example, the page loads a CSS library with a multitude of rules and the page only uses those necessary for the formatting of the titles.

Why is it useful to avoid them ?

Loading an unused resource unnecessarily increases the overall weight of the page and delays its loading time. In addition, the browser must also browse the CSS style to determine which rules to apply, which delays the first rendering. It is therefore a good idea to remove these unnecessary styles or delay loading them (to avoid blocking the first rendering) in order to improve page speed and user experience.

How to manage an unused CSS resource

Before intervening on CSS files, it is necessary to understand that page analysis focuses on page optimization without taking into account the overall site. Thus a CSS style blocking unused on a certain page can be used on another one. The grouping of the different CSS rules useful to the site in the same file and declared in an HTML page template, is a good thing, even if these rules are hardly used by a particular page. It is therefore important to check this aspect before intervening and to ignore this criterion if this style is useful globally and whose loading cannot be delayed.

In general, to solve this problem, it is necessary to :

  • remove the <link> tag from the HTML code of the page if the style is not used at all 
<head>
...
    <link rel="stylesheet" href="styles/unused.css" />
...
</head>
  • postpone loading using the "defer" attribute if the style is not critical for the first rendering, i.e. it is not useful for content above the fold
<head>
...
    <link rel="stylesheet" href="styles/unused.css" defer/>
...
</head>
  • extract critical CSS rules at first rendering and defer global style loading
<head>
    <style>
        .titre {
            font-size: 20px;
            color: blue;
        }
    </style>
...
    <link rel="stylesheet" href="styles/unused.css" defer/>
...
</head>
  • rework the CSS file by removing all the rules not used by the site in order to reduce its weight

Unused JavaScript resources

What is an unused JavaScript resource ?

It is a JavaScript script included by the page whose code is not or almost not used  (use less than 25%). For example, the page loads a JavaScript module offering a multitude of utilities and uses only the function necessary for date formatting.

Why is it useful to avoid them ?

Loading an unused resource adds to the overall weight of the page and delays its loading. Furthermore, the browser must also interpret the code, which delays the interaction time for the user. Even if the script is loaded asynchronously and is not required for the first rendering, the code competes for bandwidth with other resources during download, which has significant performance implications. Therefore, it makes sense to rework/remove these scripts to improve the speed of the page and the user experience.

How do I manage an unused JavaScript resource ?

Before intervening on JavaScript files, it is necessary to understand that page analysis focuses on page optimization without taking into account the overall site. Thus a script that is unused on a certain page can be used on another one. The grouping of different codes useful to the site in the same file is not a bad thing. It is therefore important to check this aspect before intervening and to ignore this criterion if the script found is useful globally.

In general, to solve this problem, it is necessary to :

  • remove the <script> tag from the HTML code of the page if it is not used
...
    <script src="scripts/inutile.js"></script>
...
  • remove unused code from the script to reduce its weight and the interpretation time required by the browser
  • segment, if possible, the different codes in several files and load only the useful one for the page
V

Vulnerable module

What is a vulnerable module ?

A vulnerable module is a third-party JavaScript library with security holes that have been discovered and made public. When a vulnerability is discovered, a criticality score from 0 to 10 is determined according to several criteria (attack vector, complexity, necessary privileges, etc.) and is then classified into one of three levels:

  • high, between 7 and 10: high risk
  • medium, between 4 and 6.9: moderate risk
  • low, between 0 and 3.9: low risk

Why are they dangerous ?

Vulnerable modules can be exploited by hackers, which, depending on the flaws, can have a more or less serious impact on the integrity and trust of a WEB site. In order not to be hacked and not to compromise user data, it is necessary to close these loopholes.

Some examples of attacks :

  • XSS (Cross-Site Scripting): allows to inject code executed by the browser in a page, this code sends back for example the cookie of the users to the hacker so that he can connect to the session of a user.
  • CSRF (Cross-Site Request Forgery): allows to do actions to the user without him/her being aware of it, such as deleting his/her account
  • SQL Injection: allows access to database data without the necessary authorizations
  • DoS (Denial of Service): disables the browser due to high CPU/memory consumption, for example

How to correct them 

When a JavaScript module has recognized security flaws, it is necessary to :

  • update it with a more recent version
  • use an alternative module
  • remove it from the website