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?

seo css images

— user1551817
quelle

Dies hat keine wirkliche Antwort, da sich die Antwort mit der Situation stark ändert.

— Insidesin

@insidesin, keine Logos sollten immer Bilder sein .

— zzzzBov

Wir sprechen hier nicht über Logos, sondern über Logos und Firmennamen.

— Insidesin

@insidesin Nein, sagt der OP das Logo enthält ein Bild und einen Firmennamen . Der Name ist Teil des Logos.

— Angew ist nicht mehr stolz auf SO

>I'm not sure whether to save the company name text as part of an image file, or to have it as actual text in the html and styled using css.

Nein, er erwägt, es nicht einzubauen. Es ist keine Raketenwissenschaft. In einigen Situationen ist der außerhalb des Bildes verbleibende Text von Vorteil.

— Insidesin

Antworten:

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).

— Simon Hayter
quelle

Alt-Tags sollten für jedes Bild und / oder geladene Objekt in Ihrer Szene / Site verwendet werden. Es sollte jetzt fast Boilerplate sein.

— Insidesin

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

— Pete
quelle

Das ALT-Tag sollte in jedem Fall aus Gründen der Barrierefreiheit beliebigen Text im Bild enthalten. Denken Sie daran, dass es dazu dient, blinden und sehbehinderten Menschen, die Bildschirmleseprogramme verwenden, zu helfen, zu wissen, was ein Bild ist, und bei Logos, die Text enthalten, was sie sagen. Es sollte den Firmennamen, die Telefonnummer, falls vorhanden, und jeden anderen Text enthalten.

— GeekOnTheHill

@GeekOnTheHill Ein Logo sollte aus Gründen der Zugänglichkeit und des UX niemals eine Telefonnummer enthalten, da sie auf Mobilgeräten nicht darauf tippen und die Nummer wählen können. Ich stimme jedoch zu, dass die Alternativbeschreibung den Inhalt des Bildes beschreiben sollte, wenn das Logo zusätzliche Informationen wie einen Slogan enthält.

— Simon Hayter

Ich stimme zu, Simon. Das Einfügen von Telefonnummern in Logos ist im Zeitalter mobiler Geräte und Touchscreens eine schreckliche Praxis. Wenn die Telefonnummer jedoch vorhanden ist, obwohl sie nicht empfohlen wird, muss sie meiner Meinung nach auch im ALT-Tag enthalten sein. Der Grund, warum ich das sage, ist, dass Vertreter von Organisationen für Blinde mir nachdrücklich gesagt haben, dass es so sein sollte. Die Unfähigkeit, ein Unternehmen zu kontaktieren, weil die Telefonnummer nicht so angezeigt wird, wie es ein Bildschirmleser interpretieren kann, ist offenbar eine häufige Quelle der Frustration für blinde Besucher. Aber ich stimme zu, es ist besser, dass es überhaupt nicht im Logo ist.

— GeekOnTheHill

Der altInhalt eines Logos sollte kein "Logo" enthalten (es sei denn, "Logo" ist natürlich Teil des Namens).

— Unor