Il nome dell'azienda nel logo deve essere un'immagine o un testo?

Sto inserendo un logo (comprendente un'immagine e il nome dell'azienda) sul mio sito Web. Non sono sicuro se salvare il testo del nome dell'azienda come parte di un file di immagine o averlo come testo effettivo nell'html e in stile usando CSS.

Ovviamente se lo salvo come immagine, non devo preoccuparmi che l'utente abbia i caratteri giusti, ecc. Ma ho pensato che averlo come testo potesse essere migliore per il SEO.

È una questione di gusti o è molto meglio dell'altro?

seo css images

— user1551817
fonte

Questa non ha una vera risposta poiché la risposta cambia selvaggiamente con la situazione.

— insidesin

@insidesin, nessun logo dovrebbe sempre essere immagini .

— zzzzBov

Non stiamo parlando di loghi qui, stiamo parlando di loghi e nomi di società.

— insidesin

@insidesin No, l'OP afferma che il logo comprende un'immagine e un nome di società . Il nome fa parte del logo.

— Angew non è più orgoglioso di 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.

No, sta pensando di non metterlo dentro. Non è scienza missilistica. In alcune situazioni il testo lasciato fuori dall'immagine sarebbe utile.

— all'interno del

Risposte:

A Google piace l'attributo alt dell'azienda

Sia Google che Bing comprendono che un logo verrà spesso ripetuto in PNG, GIF e JPEG. È sufficiente contrassegnare il logo utilizzando la descrizione alt per informare i motori di ricerca che è LOGO per la tua attività.

Un esempio di base:

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

Un esempio di schema:

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

Un esempio di schema JavaScript:

Se desideri mantenere semplice il tuo codice, utilizza JSON-LD Schema poiché non dovrai mai modificare il codice della pagina, ma piuttosto aggiungere un codice alla fine della pagina o utilizzare Google Tag Manager per iniettare nella pagina senza alzare un dito,

per esempio

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

A Google piacciono anche i loghi SVG

Se desideri che Google o Bing visualizzino il nome della tua azienda all'interno dell'immagine, puoi farlo utilizzando il formato SVG. Questo formato consente di utilizzare TEXT all'interno dell'immagine che verrà visualizzata dall'utente e dai motori di ricerca. Se l'accessibilità è un problema, allora dovresti mantenere il nome dell'azienda come TESTO e non come una forma, ad esempio creare contorni.

ad esempio qualcosa del genere:

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

A Google non piacciono i loghi hackerati CSS

Ai motori di ricerca non piacciono i loghi visualizzati con trucchi e altre cose simili, come ad esempio text-indent e.g -9999px; background: url(logo.png) no-repeat;. Gli sfondi devono sempre essere utilizzati come sfondo. Se è un elemento di risorsa sulla pagina, allora è sempre un'immagine e mai uno sfondo. Usa i 2 esempi precedenti e non questo ... questo è stato utile "back in the day" ma non è più necessario con il markup disponibile.

Questo metodo fa anche schifo per l'accessibilità (utenti con problemi).

— Simon Hayter
fonte

I tag alt dovrebbero essere usati per ogni immagine e / o oggetto caricato nella tua scena / sito. Ormai dovrebbe essere quasi un boiler.

— insidesin

Dato che il testo fa parte del logo, lo terrei nell'immagine (risparmia nel cercare di abbinare qualsiasi carattere non standard e nel posizionarlo esattamente come è nel logo) - puoi sempre inserirlo nell'attributo alt o usa i microdati per migliorare il tuo 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>

Ulteriori informazioni sui microdati dell'organizzazione

Strumento di convalida dei microdati di Google

Linee guida di Google sul markup del logo

— Pete
fonte

Il tag ALT dovrebbe contenere qualsiasi testo nell'immagine per motivi di accessibilità in ogni caso. Ricorda che il suo scopo è di aiutare le persone non vedenti e ipovedenti che usano gli screen reader a sapere cosa sia un'immagine e, nel caso di loghi che contengono testo, ciò che dicono. Dovrebbe contenere il nome dell'azienda, il numero di telefono se presente e qualsiasi altro testo.

— GeekOnTheHill

@GeekOnTheHill Un logo non dovrebbe mai contenere un numero di telefono per accessibilità e per molte ragioni, poiché sui dispositivi mobili non saranno in grado di toccarlo e comporre il numero. Ma sono d'accordo che la descrizione alternativa dovrebbe descrivere il contenuto dell'immagine se il logo contiene informazioni aggiuntive come uno slogan.

— Simon Hayter

Sono d'accordo, Simon. Inserire i numeri di telefono nei loghi è una pratica orribile nell'era dei dispositivi mobili e dei touchscreen. Tuttavia, se il numero di telefono è presente nonostante sia sconsigliabile, penso che debba essere presente anche nel tag ALT. Il motivo per cui dico questo è perché i rappresentanti delle organizzazioni per non vedenti mi hanno detto con forza che dovrebbe essere. Apparentemente, non essere in grado di contattare un'azienda perché il numero di telefono non appare in alcun modo che uno screen reader possa interpretare è una frequente fonte di frustrazione per i visitatori non vedenti. Ma sono d'accordo, è meglio che non sia affatto nel logo.

— GeekOnTheHill

Il altcontenuto di un logo non deve contenere "logo" (a meno che "logo" non faccia parte del nome, ovviamente).

— unor