it-swarm.com.de

Inline-SVG innerhalb von H1

Ich aktualisiere gerade meine Website, indem ich große PNG-Bilder durch Inline-SVG-Bilder ersetze.

Mein aktueller Code sieht ungefähr so ​​aus:

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

Und ich würde es gerne durch so etwas ersetzen:

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

Für mich ist dies das richtige HTML5-Markup. Aber ich mache mir ein bisschen Sorgen, dass sich dies negativ auf das Seitenranking auswirken könnte, nachdem Sie die Bedeutung der H1- und TITLE-Tags für SEO gelesen haben.

Weiß jemand mehr darüber oder hat irgendwelche Tipps, wie man das macht?

(Mir ist bewusst, dass ich einfach das src-Attribut des Tags ändern könnte, um auf die SVG-Version des Logos zu verweisen, aber ich bevorzuge, es inline einzuschließen, um die Anzahl der HTTP-Anforderungen zu reduzieren.)

3
Alexander Jank

2 Möglichkeiten, Titel hinzuzufügen: mit CSS und Positionierung und Z-Index. Aber dies würde mit svg niemals gut skalieren. Und SVG eignet sich perfekt für die Skalierung. Sie können das foreignObject-Tag verwenden, um HTML-Elemente in Ihre SVG-Datei einzufügen. Zumindest jeder Tekstbrowser, wie ein Bot, kann das lesen. Ich weiß nicht, ob Google-Bot etwas damit anfangen wird, aber es ist zumindest lesbar. Meine Erfahrung ist es, solche Details nicht zu überschätzen. Text wie Svg lädt viel schneller als ein Bild, Google belohnt Geschwindigkeit Ihrer Website :)

2
Terradon