Sollte der Firmenname im Logo ein Bild oder ein Text sein?

Ich platziere ein Logo (bestehend aus einem Bild und einem Firmennamen) auf meiner Website. Ich bin nicht sicher, ob ich den Firmennamentext als Teil einer Bilddatei speichern oder als tatsächlichen Text im HTML-Code speichern und mit CSS gestalten soll.

Wenn ich alles als Bild speichere, muss ich mir natürlich keine Sorgen machen, dass der Benutzer die richtigen Schriftarten usw. hat. Aber ich dachte, dass es für SEO besser sein könnte, es als Text zu haben.

Ist das Geschmackssache oder ist einer viel besser als der andere?

Google mag Unternehmen alt Attribut

Sowohl Google als auch Bing wissen, dass ein Logo in PNG, GIF und JPEG häufig wiederholt wird. Markieren Sie das Logo einfach mit der Alternativbeschreibung, um Suchmaschinen darüber zu informieren, dass es sich um LOGO für Ihr Unternehmen handelt.

Ein einfaches Beispiel:

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

Ein Schema-Beispiel:

<div itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="http://www.example.com/">Home</a>
  <img itemprop="logo" src="http://www.example.com/logo.png" alt="Company Name Logo"/>
</div>

Ein Beispiel für ein JavaScript-Schema:

Wenn Sie Ihren Code einfach halten möchten, verwenden Sie das JSON-LD-Schema, da Sie den Seitencode nie bearbeiten müssen, sondern einen Code am Ende Ihrer Seite hinzufügen müssen, oder verwenden Sie den Google Tag Manager, um in die Seite einzufügen, ohne einen Finger zu rühren.

z.B

<img src="logo.png" alt="Company Name Logo">
<script type="application/ld+json">
  {
  "@context": "http://schema.org/",
  "@type": "Organization",
  "url": "http://www.example.com/",
  "logo": "http://www.example.com/logo.png"
  }
</script>

Google mag auch SVG-Logos

Wenn Google oder Bing Ihren Firmennamen im Bild sehen soll, können Sie dies im SVG-Format tun. In diesem Format können Sie TEXT innerhalb des Bildes verwenden, das von Benutzern und Suchmaschinen angezeigt wird. Wenn die Barrierefreiheit ein Problem darstellt, sollten Sie den Firmennamen als TEXT und nicht als Form beibehalten, z. B. Konturen erstellen.

zB so etwas:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <polygon fill="#998675" points="125,466.5 0,250 125,33.5 375,33.5 500,250 375,466.5 "/>
    <rect x="137.5" y="137.5" fill="#534741" width="225" height="225"/>
    <polygon fill="#C7B299" points="250,175 294.1,189.3 321.3,226.8 321.3,273.2 294.1,310.7 250,325 205.9,310.7 178.7,273.2 178.7,226.8 205.9,189.3 "/>
    <text transform="matrix(1 0 0 1 196.3787 253.5039)" font-family="'Montserrat-Bold'" font-size="12">COMPANY NAME</text>
</svg>

Google mag keine von CSS gehackten Logos

Suchmaschinen mögen es nicht, wenn Logos mit Tricks und anderen Dingen angezeigt werden, wie z text-indent e.g -9999px; background: url(logo.png) no-repeat;. Hintergründe sollten immer als Hintergrund verwendet werden. Wenn es sich um ein On-Page-Ressourcenelement handelt, handelt es sich immer um ein Bild und niemals um einen Hintergrund. Verwenden Sie die beiden vorherigen Beispiele und nicht dieses ... dies war "früher" nützlich, wurde jedoch mit dem verfügbaren Markup nicht mehr benötigt.

Diese Methode ist auch schlecht für die Zugänglichkeit (beeinträchtigte Benutzer).

Da der Text Teil des Logos ist, würde ich ihn im Bild behalten (spart den Versuch, nicht standardmäßige Schriftarten zuzuordnen und ihn genau so zu positionieren, wie er im Logo ist) - Sie können ihn jederzeit in das alt-Attribut einfügen oder verwenden Sie Mikrodaten, um Ihr SEO zu verbessern:

<div id="main-logo-holder" itemscope itemtype="http://schema.org/Organization">
  <meta itemprop="name" content="Company Name">
  <meta itemprop="description" content="Company Description">
  <a itemprop="url" id="logo-home" href="https://www.website.co.uk/" class="main-logo">
    <img itemprop="logo" src="logo.jpg" alt="Company Name Logo">
  </a>
</div>

Weitere Informationen zu Organisationsmikrodaten

Google Microdata Validation Tool

Google-Richtlinien zum Logo-Markup