search

TwicPics / components

A Web component library that brings the power of TwicPics to your favorite web framework.
MIT License
54 stars 2 forks source link

[Nuxt 3] Rendered `<img>` in SSR (without JavaScript) not SEO friendly. #29

Closed madebyfabian closed 1 year ago

madebyfabian commented 2 years ago

Hi there, first of all, very impressed on TwicPics! Easy onboarding, and within a few mins, I got everything set up. I am planning to use it to optimize Supabase Storage Images. I am using Nuxt 3, SSR. When I am using the Nuxt Plugin like in the docs:

<template>
  <TwicImg src="path/name-of-my-image.jpg" />
</template>

This is what gets rendered by the server:

<div class="twic-i">
   <div class="twic-w twic-tf" style="padding-top:;">
      <img alt="name-of-my-image" style="" data-twic-src="image:path/name-of-my-image.jpg">
      <div style=""></div>
   </div>
</div>

which is not SEO Friendly, since the img has no src param.

After the app mounts and the plugin ran, the markup looks fine, <img> now has a correct src.

Is there some guide on how to resolve this?

mbgspcii commented 2 years ago

HI @madebyfabian.

Thank you very much for your kind feedback.

We do not have an existing solution to the problem identified here. That said, as a first step, I refer you to this article 6 Tips to Optimize Images for SEO.

We will consider the possibility of generating this part no script through the TwicPics components.

Hope it helps.

Thank you again for this issue.

Miguel

madebyfabian commented 2 years ago

Thanks for your answer @mbgspcii, I will take a look at the Article!

mbgspcii commented 1 year ago

Hi @madebyfabian

I take the liberty of closing this issue and I add another link to a small article that tries to answer your question.

Do not hesitate to come back to us in case of other difficulties and thank you again for your question.

Yours sincerely.

Miguel.