Czy nazwa firmy w logo powinna być obrazem czy tekstem?

Umieszczam logo (składające się z obrazu i nazwy firmy) na mojej stronie internetowej. Nie jestem pewien, czy zapisać tekst nazwy firmy jako część pliku obrazu, czy też mieć go jako rzeczywisty tekst w pliku HTML i nadać mu styl css.

Oczywiście, jeśli zachowam to wszystko jako obraz, to nie muszę się martwić, że użytkownik będzie miał odpowiednie czcionki itp. Ale pomyślałem, że posiadanie go jako tekstu może być lepsze dla SEO.

Czy to kwestia gustu, czy jest o wiele lepsza od drugiej?

Google lubi firmowy atrybut alt

Zarówno Google, jak i Bing rozumieją, że logo często będzie powtarzane w formatach PNG, GIF i JPEG. Wystarczy oznaczyć logo za pomocą opisu alt, aby poinformować wyszukiwarki, że jest to LOGO dla Twojej firmy.

Podstawowy przykład:

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

Przykład schematu:

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

Przykład schematu JavaScript:

Jeśli chcesz, aby Twój kod był prosty, użyj schematu JSON-LD, ponieważ nigdy nie musisz edytować kodu strony, ale raczej dodaj kod na końcu strony lub użyj Google Tag Managera, aby wstrzyknąć na stronę bez podnoszenia palca,

na przykład

<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 lubi również logo SVG

Jeśli chcesz, aby Google lub Bing widział nazwę Twojej firmy na obrazie, możesz to zrobić, używając formatu SVG. Ten format pozwala używać TEKSTU na obrazie, który będzie widoczny dla użytkownika i wyszukiwarek. Jeśli dostępność jest problemem, powinieneś zachować nazwę firmy jako TEKST, a nie jako kształt, np. Tworzyć kontury.

np. coś takiego:

<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 nie lubi zhakowanych logo CSS

Wyszukiwarki nie lubią wyświetlania logo z trikami i innymi rzeczami, takimi jak text-indent e.g -9999px; background: url(logo.png) no-repeat;. Tła powinny zawsze być używane jako tło. Jeśli jest to element zasobów na stronie, to zawsze jest to obraz, a nigdy tło. Skorzystaj z 2 poprzednich przykładów, a nie tego ... było to przydatne „w ciągu dnia”, ale nie było już wymagane przy dostępnym znaczniku.

Ta metoda wymaga również dostępu (użytkownicy z upośledzeniem).

Ponieważ tekst jest częścią logo, zatrzymałbym go na obrazie (oszczędza na próbowaniu dopasowania niestandardowych czcionek i konieczności umieszczania go dokładnie tak, jak w logo) - zawsze możesz umieścić go w atrybucie alt lub użyj mikrodanych, aby poprawić swoją SEO:

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

Więcej informacji o mikrodanych organizacji

Narzędzie sprawdzania poprawności mikrodanych Google

Wytyczne Google dotyczące znaczników logo