Background cover SEO friendly avec Object-fit

Actualisé le 30 octobre 2017 -

Lorsque l’on a besoin dans une liste d’articles de superposer le titre par dessus l’image, tout en ayant un système fluide et responsive, on peut passer par le système de background image en spécifiant un background-size: cover. Cela a l’avantage d’être totalement responsive, et d’avoir une image fluide, l’inconvénient reste que niveau SEO, on est pas encore au top étant donné que sémantiquement une image en background n’a pas vraiment d’essence.

La bonne nouvelle c’est que l’on peut facilement obtenir un résultat équivalent et SEO friendly avec la propriété “object-fit”.

0

Côté compatibilité, tous les principaux navigateurs sont supportés sauf… Internet Explorer. Pour Edge cela ne fonctionnera que sur la balise img, mais dans notre cas ce sera suffisant.

Une proposition de polyfill existe pour passer le src de l’objet image en background image pour rendre la propriété compatible sur IE.

Commentaires

Laisser un commentaire