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.
Miguel Beignon February 22, 2023 · 5 min read
Two waves of indexing
Google has implemented a two waves of indexing system for its search engine.
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"/>.
<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:
- React, Next.js and Gatsby.js
- Vue.js (version 2), Vue.js (version 3), Nuxt.js (version 2) and Nuxt.js (version 3)
- Svelte (version 3) and SvelteKit
alt attributes, can help to improve the SEO score of your pages.