Tag H1 mancante nella home

[alberto79]

Ciao a tutti !

sul mio sito alkashop.it manca il tag H1 nella home ...

Il tema evidentemente non lo prevedeva...

Come posso aggiungerlo ? Quale file va modificato e come ?

 

 

[luca1711]

14 ore fa, alberto79 dice:

Ciao a tutti !

sul mio sito alkashop.it manca il tag H1 nella home ...

Il tema evidentemente non lo prevedeva...

Come posso aggiungerlo ? Quale file va modificato e come ?

 

 

Ciao, ringrazia che il tema non lo aggiunge in automatico così lo puoi scegliere tu.

Presumo che dovrai aggiungere contenuti alla home, quando scrivi il primo testo per la home, metterai la un tag H1 includendo la parola chiave che ti interessa.

Saluti

Edited October 31, 2019 by luca1711 (see edit history)

[ThemeBooster.com]

Oppure puoi modificare con un editor di testo il file denominato header.tpl che trovi in /themes/PRS026/templates/_partials/

Ovvero questa porzione di codice:

<div class="col-md-3 hidden-sm-down" id="_desktop_logo">
  <a href="{$urls.base_url}" class="header-logo">
    <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
  </a>
</div>

potrebbe essere sostituita con questa:

<div class="col-md-3 hidden-sm-down" id="_desktop_logo">
  {if $page.page_name == 'index'}  
    <h1>    
      <a href="{$urls.base_url}" class="header-logo">
        <img class="logo img-responsive" src="{$shop.logo}" alt="">
        <span>{$shop.name} {$page.meta.title}</span>
      </a>
    </h1>
  {else}
    <a href="{$urls.base_url}" class="header-logo">
      <img class="logo img-responsive" src="{$shop.logo}" alt="">
    </a>
  {/if}
</div>

Come ultima azione, sempre utilizzando un editor di testo, puoi aprire il file custom.css che dovresti trovare in /themes/PRS026/assets/css/
ed aggiungere la seguente regola:

.header-logo span {
  position: absolute;
  top: -9999em;
}

Il codice per il file header.tpl effettua un controllo: se la pagina visualizzata è la Home Page, allora utilizza il codice contenuto tra i tag <h1></h1> dove viene richiamata l'immagine del logo (meglio lasciare il campo alt vuoto per non creare inutili fastidi ai non vedenti che, utilizzando uno screen reader, sentirebbero solo ripetere un'ulteriore volta il nome dello shop).
Dopo l'immagine del logo, vengono richiamati il nome dello shop ed il valore del campo meta_title che potrai personalizzare, da pannello di amministrazione, nella sezione CONFIGURA > Parametti Negozio > SEO & URLs: pagina index (campo Titolo della Pagina).

La regola CSS da aggiungere, non fa altro, che nascondere alla vista dell'utente (ma non ai motori di ricerca) le 2 informazioni appena aggiunte ma lascia visualizzata, ovviamente, l'immagine del logo del tuo negozio.

Note
Il codice che troverai nel file header.tpl potrà variare in base a come sia stato sviluppato dal creatore del tema. Potresti anche ritrovare il codice per visualizzare il logo 2 volte (una per dispositivi fissi, l'altro per quelli mobili).

Vi è un problema di visualizzazione da smartphone: su alcuni dispositivi, il logo si trova al di sotto delle icone del menù, del carrello e del login, occupando spazio inutile.
Al tuo file custom.css potresti aggiungere anche questa regola:

@media screen and (max-width: 479px) {
  #header .header-nav .top-logo {
    width: auto;
  }
}

 

[alberto79]

1 hour ago, ThemeBooster.com said:

Oppure puoi modificare con un editor di testo il file denominato header.tpl che trovi in /themes/PRS026/templates/_partials/

Ovvero questa porzione di codice:

<div class="col-md-3 hidden-sm-down" id="_desktop_logo">
  <a href="{$urls.base_url}" class="header-logo">
    <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
  </a>
</div>

potrebbe essere sostituita con questa:

<div class="col-md-3 hidden-sm-down" id="_desktop_logo">
  {if $page.page_name == 'index'}  
    <h1>    
      <a href="{$urls.base_url}" class="header-logo">
        <img class="logo img-responsive" src="{$shop.logo}" alt="">
        <span>{$shop.name} {$page.meta.title}</span>
      </a>
    </h1>
  {else}
    <a href="{$urls.base_url}" class="header-logo">
      <img class="logo img-responsive" src="{$shop.logo}" alt="">
    </a>
  {/if}
</div>

Come ultima azione, sempre utilizzando un editor di testo, puoi aprire il file custom.css che dovresti trovare in /themes/PRS026/assets/css/
ed aggiungere la seguente regola:

.header-logo span {
  position: absolute;
  top: -9999em;
}

Il codice per il file header.tpl effettua un controllo: se la pagina visualizzata è la Home Page, allora utilizza il codice contenuto tra i tag <h1></h1> dove viene richiamata l'immagine del logo (meglio lasciare il campo alt vuoto per non creare inutili fastidi ai non vedenti che, utilizzando uno screen reader, sentirebbero solo ripetere un'ulteriore volta il nome dello shop).
Dopo l'immagine del logo, vengono richiamati il nome dello shop ed il valore del campo meta_title che potrai personalizzare, da pannello di amministrazione, nella sezione CONFIGURA > Parametti Negozio > SEO & URLs: pagina index (campo Titolo della Pagina).

La regola CSS da aggiungere, non fa altro, che nascondere alla vista dell'utente (ma non ai motori di ricerca) le 2 informazioni appena aggiunte ma lascia visualizzata, ovviamente, l'immagine del logo del tuo negozio.

Note
Il codice che troverai nel file header.tpl potrà variare in base a come sia stato sviluppato dal creatore del tema. Potresti anche ritrovare il codice per visualizzare il logo 2 volte (una per dispositivi fissi, l'altro per quelli mobili).

Vi è un problema di visualizzazione da smartphone: su alcuni dispositivi, il logo si trova al di sotto delle icone del menù, del carrello e del login, occupando spazio inutile.
Al tuo file custom.css potresti aggiungere anche questa regola:

@media screen and (max-width: 479px) {
  #header .header-nav .top-logo {
    width: auto;
  }
}

 

Ti ringrazio moltissimo per la risposta esaustiva!!!!

Una domanda...Con questa soluzione in H1 cosa viene scritto ? Perdonami l’ignoranza..

[Fabry]

Ok folks..i miei 2 cent visto che sconfiniamo in ambito SEO che é la mia passione:-)

I tag h1 non vanno mai dati per il loghi/img come questo considerato che costituito da un'immagine!...

I tag come gli H1 servono per aiutare i motori di ricerca a capire "cosa stanno vedendo" in quel momento..dico vedendo ma i crawler non vedono perché nella realtá vedono proprio attraverso i tag che trovano nelle pagine:-)....quindi l'ideale é destinare questi tag a del testo.

Quindi individua nella tua home quale é la parte piú importante che vuoi "comunicare" ai motori e piazzagli un H1...solo 1 per pagina, non andare oltre...segui semmai una gerarchia h2 h3 etc...

ciao

 

Ps: semmai arrichisci di contenuti quella home eppoi pensa a dove piazzare gli h1;-)

Edited November 9, 2019 by Fabry (see edit history)

[ThemeBooster.com]

1 hour ago, Fabry said:

I tag h1 non vanno mai dati per il loghi/img come questo considerato che costituito da un'immagine!...

E su questo non si può che essere d'accordo.

Con il codice proposto il tag h1 conterrebbe si un'immagine ma anche il nome del sito ed il testo che viene inserito nel campo Titolo della pagina (inteso magari come breve presentazione del sito).

A questo punto il codice può essere modificato in modo da eliminare l'immagine del logo. Tale immagine può essere richiamata, per la sola home page, attraverso il CSS come immagine di sfondo del tag <a>.

In questo modo, il tag h1 conterrebbe solo testo e gli utenti vedrebbero sempre e solo il logo.

Domani aggiornerò con il codice completo.

[alberto79]

Vi ringrazio per l’aiuto...siete grandi!

[ThemeBooster.com]

Come detto da Fabry, una soluzione potrebbe essere quella di inserire manualmente del contenuto testuale utilizzando il tag <h1></h1> per il titolo, il tag <p></p> per una breve introduzione.
In questo scenario, si  potrebbe pensare di utilizzare il modulo Blocchi di testo personalizzati.

Potrebbe, però, esserci un altro scenario in cui non si voglia mostrare del testo nella home page e/o non si voglia modificare il design della pagina.

In questo caso, allora, può essere utile la soluzione mostrata nella risposta precedente, di seguito ottimizzata come segue:

1. Modificare il codice del file denominato header.tpl che trovi in /themes/PRS026/templates/_partials/

   <div class="col-md-3 hidden-sm-down" id="_desktop_logo">
     <a href="{$urls.base_url}" class="header-logo">
       <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
     </a>
   </div>

   con il seguente:

   <div class="col-md-3 hidden-sm-down" id="_desktop_logo">
     {if $page.page_name == 'index'}
       <h1 class="home-logo">
         <span>{$shop.name} {$page.meta.title}</span>
       </h1>
     {else}
       <a href="{$urls.base_url}">
         <img class="logo img-responsive" src="{$shop.logo}" alt="">
       </a>
     {/if}
   </div>

   In questo modo, il tag <h1> non conterrà più alcuna immagine, ovvero il logo del negozio,

2. che invece sarà visualizzato dalle seguenti regole da aggiungere al file custom.css che dovresti trovare in /themes/PRS026/assets/css/  (altrimenti puoi crearlo tu manualmente):

   .home-logo {
     display: inline-block;
     width: 100%;
     max-width: 184px;
     min-height: 29px;
     height: auto;
     background: url(../img/logo.png) 0 0 no-repeat;
     background-size: contain;
   }
   
   .home-logo span {
     position: absolute;
     top: -9999em;
   }

    

3. Come ultimo step, è necessario caricare il file logo.png nella cartella /themes/PRS026/assets/img/
   
   Ovviamente il nome del file immagine del logo puoi nominarlo come meglio credi a patto di cambiare il nome anche nella regola css.
   
   La regola background-size: contain assieme a quelle relative alla larghezza/altezza dell'elemento contribuiscono a ridimensionare il logo (in home page) per schermi di piccole dimensioni.