TwicPics
Blog home

COMPONENTS JS FRAMEWORKS SEO

Google indexing system & TwicPics Components

When it comes to SEO, it's important to understand how search engines like Google crawl and index your website. Our components for JS frameworks integrate attributes to boost your ranking.

Google indexing system & TwicPics Components

When it comes to SEO, it's important to understand how search engines like Google crawl and index your website. One important aspect to consider is how Google handles pages that use JavaScript. In this article, we will explore the concept of “two waves of indexing or crawling" and how it affects the SEO of your website. We will also discuss the importance of delivering optimized media, and the benefits of using attributes like "data-twic-bot" and "alt" to improve your SEO score. By understanding these concepts and techniques, you'll be able to ensure that your website is properly indexed and has the best chance of ranking well in search results.

Two waves of indexing

Google has implemented a two waves of indexing system for its search engine.

  • The first wave is when the Google bot discovers the content of the page in pure HTML. Based on this initial analysis, the page is marked to be re-analyzed in a JavaScript context.
  • The second wave is when the page is analyzed with JavaScript enabled. The crawler uses several tricks during this process, including automatic scrolling and artificially increasing the height of the visible area (extended viewport heights) to get as much content as possible in its analysis.

However, this artificial increase in page height can also be detrimental, as it increases the loading time of the crawled page. This highlights the importance of delivering perfectly optimized media in terms of size and weight across the entire view, in order to maximize the score of the crawling bots.

data-twic-bot and alt attributes to the rescue

These fundamental media optimizations are handled by TwicPics. Moreover, the solution can be used as a tool to improve the SEO score by exposing specific image variants to indexing robots. This is the purpose of the data-twic-bot attribute. For example, the data-twic-bot attribute can push for indexing a 200px² variant on a page where the image should have been loaded at 1000px². As a result, the image loads much faster than the version actually delivered to the real user. Additionally, the crawler spends less time simulating different devices.

Our components for JS frameworks integrate this data-twic-bot attribute through the "bot" property, making it easy to benefit from this additional indexing optimization with a simple: <TwicImg src="myImage" bot="cover=200"/>.

Another important point to consider is the use of the alt attribute. By default, the TwicImg component will add an alt attribute with the same value as the source. More relevant values can also be specified for this attribute: <TwicImg src="myImage" alt="keyword1 keyword2 keyword3" bot="cover=200"/>.

Let me provide a concrete example from our website, where we use the Nuxt components. The following is an excerpt of the SSG generation of one of our blog pages. This is the source received by the browser before JavaScript increases the page:

<div class="twic-i" data-v-46d7b98a>
  <div class="twic-w twic-tf" style="padding-top:56.25%">
    <img
      alt="6 Tips to Optimize Images for SEO"
      data-twic-src="image:https://assets.twicpics.com/blog/6-tips-to-optimize-images-for-seo/cover.jpg"
    />
    <div></div>
  </div>
</div>

We can see that the entire HTML structure is in place, including the alt attribute with its value. The src attribute of the img tag is not valued and no size is set for this image.

Yet, if we search for this image with Google Image or Google.com, we can see that this image and the page containing it have been successfully indexed.

To see our components in action, do not hesitate to check out our demonstration pages:

In conclusion, the activation of JavaScript imposes "two waves of indexing" on the search engines, which slightly delays the SEO time. On the other hand, it allows for more accurate and complete indexing. The use of optimized media, as well as the data-twic-bot and alt attributes, can help to improve the SEO score of your pages.