Html, immagini, come fare una didascalia semantica seo friendly e come farla responsive.

In questo video è possibile vedere come inserire il tag più aggiornato per
l’HTML e più efficace in termini semantici quindi per migliorare e ottimizzare
la SEO relativa alle immagini

Esempio Tag figcaption

</p> <figure> <img decoding="async" src="urlimmagine.jpg" alt="immagine di esempio"><figcaption> Esempio didascalia<br /> </figcaption></figure> <p>

Tag picture: come avere immagini Responsive

In quest’altro video è possibile vedere come inserire immagini responsive in in html, l’esempio fatto non è graficamente dei migliori, quello che è importante da capire è che le immagini per i cellulari conviene crearle e impaginarle in verticale, mentre le immagini per il desktop conviene crearle in orizzontale. Questo vuol dire che nel caso di immagini e campagne pubblicitarie, potremmo aver bisogno di immagini impaginate in modo differente in base al device.

Tag picture: esempio.

<picture><source media="(max-width:400px)" srcset="urlimg-x-cell.jpg" alt="immagine di esempio"><source media="(max-width:800px)" srcset="urlimg-x-tablet.jpg" alt="immagine di esempio"><source media="(max-width:1920px)" srcset="urlimg-x-desktop.jpg" alt="immagine di esempio"></picture>