web-dev-qa-db-fra.com

SVG en ligne dans H1

Je suis en train de mettre à jour mon site Web en remplaçant de grandes images PNG par des images SVG en ligne.

Mon code actuel ressemble à ceci:

<h1>
    <img src="logo.png" alt="Company Name" />
</h1>

Et j'aimerais le remplacer par quelque chose comme ceci:

<h1>
    <svg>
        <title>Company Name</title>
    </svg>
</h1>

En ce qui me concerne, c'est le balisage HTML5 correct. Mais je crains un peu que cela n’affecte négativement le classement de la page après tout ce que vous pouvez lire sur l’importance des balises H1 et TITLE pour le référencement.

Est-ce que quelqu'un en sait plus à ce sujet ou a des conseils sur la façon de s'y prendre?

(Je sais que je pourrais simplement changer l'attribut src de la balise pour pointer vers la version SVG du logo, mais je préfère l'inclure en ligne afin de réduire le nombre de requêtes HTTP.)

seopagerankhtml5svg
3
Alexander Jank

2 façons d'ajouter un titre: avec css et positionnement et z-index. Mais cela ne serait jamais bien avec svg. Et SVG est parfait pour la mise à l'échelle. Vous pouvez utiliser la balise foreignObject pour ajouter des éléments HTML dans votre fichier SVG. Au moins chaque tekstbrowser, comme un bot, peut lire cela. Je ne sais pas si Google-bot fera quelque chose avec cela, mais au moins, il est lisible. Mon expérience n’est pas de surestimer de tels détails. un texte comme svg charge beaucoup plus vite qu'une image, Google récompense la vitesse de votre site :)

2
Terradon