Supporto volontario e collaborativo per Joomla!® in italiano

SEO override sui tag h3 dei moduli

seo tag h3 joomla
Dopo aver letto un articolo davvero molto interessante sull'override su h1 per Joomla mi è venuta questa idea.

E se invece volessi togliere i tag h3 dai titoli dei moduli (quali ad esempio "menu", "chi è online", "sondaggio", ecc.) che sono titoli completamente anti-seo?

Il principio che mi ispira è fondamentalmente quello a cui si fa spesso riferimento quando si parla di seo: che senso ha dare il titolo "Home page" alla propria home page? Quante migliaia di siti ci sono con quel titolo decisamente inutile? Forse ancora troppi.

Lo stesso vale per i siti Joomla, che hanno tutti i titoli dei moduli uguali, il che li rende un ago in pagliaio. Certo, non voglio paragonare l'importanza del tag h1 a quello del tag h3, ma questa che vi propongo è una cosa in più.

In questo modo saremo noi a decidere, all'interno dei nostri articoli, di dare più enfasi alle frasi più valide e significative per noi.

Per assurdo infatti gli h3 dovrebbero contenere logicamente le nostre keyphrase (ovvero combinazioni di più keyword, di solito 2 o 3, ma anche di più), mentre l'h1 essendo il titolo principale contiene le keyword, dovendo essere il più generico possibile.


Se non foste convinti dell'importanza dei tag h3:

http://www.seocentro.com/articles/google/ranking-factors-keywords.html

Come potrete vedere gli h3 hanno pressoché la stessa importanza degli h1 per Google & Company e quindi non vanno trascurati.


Epilogo anticipato (per motivarvi maggiormente)

Quando avrete fatto tutto quello che è spiegato in questa guida..

Se avete un sito aziendale, potrete utilizzare il tag h3 per scopi più utili, ad esempio per  i nomi dei propri servizi.

Invece, per un blog, l'h3 potrebbe essere un ottimo tag per i nomi delle nostre sezioni.

E il vecchio zio Google apprezzerà i vostri sforzi. Bocca danarosa

Passiamo alla pratica

Per fare ciò offro una soluzione forse tanto "ricercata" quanto utile (si spera!).

Useremo l'override sul file modules.php (tanto per curiosità: fa parte del core di Joomla e si trova in templates/system/html).

E inseriremo del testo al suo interno che va a definire un nuovo "stile" - che non è altro che lo stile "rounded" del mod_chrome di Joomla 1.5 leggermente ritoccato.

Articolo che spiega in maniera chiara cos'è un override in Joomla 1.5
http://www.joomla.it/articoli-della-community/788-override-del-template-come-personalizzare-le-pagine-di-joomla.html

Caso a) Modifica di un override preesistente

Attenzione: template come Beez, Rhuk Milkyway, Ja Purity (che fanno già parte del core di Joomla) utilizzano già un override su questo file, anche se per altri scopi.

Esempio per Ja Purity: templates/ja_purity/html/modules.php

In questo caso dovremo aggiungere all'interno del già presente file modules.php una nuova funzione – modChrome_noh3 - e lo faremo copiando e incollando questo al fondo:

{code lang:php hidden:false title:"Codice da aggiungere"}function modChrome_noh3($module, &$params, &$attribs)
{ ?>
<div>
<div>
<div>
<div>
<?php if ($module->showtitle != 0) : ?>
<div class="titolo-modulo"><?php echo $module->title; ?></div><br />
<?php endif; ?>
<?php echo $module->content; ?>
</div>
</div>
</div>
</div>
<?php
}{/code}

Caso b) Creazione di un nuovo override dal nulla

Se invece usiamo un template che non fa uso di ovveride su modules.php dobbiamo crearcelo noi.
Quindi andiamo a creare il nostro file di ovverride modules.php in templates/miotemplate/html/
[dove la cartella "miotemplate" sta per la cartella del template che state utilizzando e va sostituito con il vero nome della cartella del template]
[dove la cartella "html" potrebbe già esistere, altrimenti createla voi]

Possiamo creare un nuovo file .txt, rinominarlo in modules.txt e poi cambiare l'estensione in php (dare la conferma al cambio di estensione).

Ora apriamo questo nuovo file che abbiamo appena creato - modules.php - e gli copiamo dentro:

{code lang:php hidden:false title:"Codice da inserire"}<?php
defined('_JEXEC') or die('Restricted access');

function modChrome_noh3($module, &$params, &$attribs)
{ ?>
<div>
<div>
<div>
<div>
<?php if ($module->showtitle != 0) : ?>
<div class="titolo-modulo"><?php echo $module->title; ?></div><br />
<?php endif; ?>
<?php echo $module->content; ?>
</div>
</div>
</div>
</div>
<?php
}
{/code}


Per entrambi i casi (a e b)

NON ALLARMATEVI: l'unica differenza rispetto al "vecchio stile" è che stiamo togliendo i tag h3 e li stiamo sostituendo con dei div più l'aggiunta di un "a capo". Il tag br serve infatti per far sì che tutto ciò che si trova dopo lo pseudo-titolo (chiamiamolo così, dai Sorridente ) vada a capo (proprietà che i tag di heading hanno invece automaticamente).


Modifica sul template

Per far sì che le modifiche prendano atto dobbiamo andare ad aprire e modificare il file che determina il nostro template, ovvero il file che dà le istruzioni a Joomla su dove e come caricare stili, componenti e soprattutto i moduli, che è la parte che ci interessa.

Questo file da modificare si chiama index.php e si trova in templates/miotemplate/ .

Per esempio, se prima nel nostro file per richiamare il modulo menu in posizione left avevamo:

{code lang:php hidden:false title:""}<jdoc:include type="modules" name="left" style="rounded" />{/code}

Ora dobbiamo modificare lo stile da "rounded" a "noh3", così:

{code lang:php hidden:false title:""}<jdoc:include type="modules" name="left" style="noh3" />{/code}

In questo modo otterremo il controllo definitivo di come il modulo deve essere visualizzato; in questo caso il modulo menu sarà renderizzato da Joomla senza l'uso del tag h3.

Nota: questa modifica va fatta su tutti i moduli al cui titolo vogliamo togliere il tag h3.


Modifica sul css

Per non perdere il gradevole effetto del titolo h3 in questione, stiamo utilizzare un piccolo stratagemma facendo leva sulla forza del css Fico

Infatti, anzichè eliminare il tag h3 lo abbiamo sostituito con un div (ovvero un "livello") di classe specificata da noi, precisamente "titolo-modulo".

Adesso ci occorre andare a stabilire questa classe del div che abbiamo chiamato "titolo-modulo" nel file css del nostro template che solitamente si chiama template.css e si trova in templates/miotemplate/css/.

Prima di fare questa aggiunta facciamo una ricerca nel foglio css per vedere se esistono dei riferimenti pre-esistenti ai tag h3 (cosa che è comune nei template di Joomla).


Caso 1. H3 già definito nel vostro foglio di stile

Se vi è già un riferimento ad h3 e vogliamo mantenere lo stesso stile predefinito (ovvero vogliamo fare questa modifica SEO con impatto grafico impercettibile) ci occorrerà copiare tutti gli attributi contenuti in h3 {} ed incollarli all'interno di div.titolo-modulo {}.


Esempio:

Vi pongo il mio caso come esempio pratico.

Io ho il template jpmobile e nel suo template.css ho trovato questa definizione di stile:

h3 {
font: normal 18px Arial, Helvetica, sans-serif;
color: #000000;
letter-spacing: 0px;
text-transform: none;

}



Allora andiamo ad aggiungere in fondo al nostro foglio css:

div.titolo-modulo {
font: normal 18px Arial, Helvetica, sans-serif;
color: #000000;
letter-spacing: 0px;
text-transform: none;

font-weight: 500;
margin-top: 15px;
margin-bottom: 10px;

}

Come potete notare:

Nelle prime quattro righe di attributi non ho fatto altro che un copia ed incolla degli attributi h3.

Con font-weight ho leggermente ispessito il testo (400 è il valore normale).

Le ultime due righe sono molto importanti e in quanto contengono i valori di margin.
Il margin è un attributo che serve per determinare le distanze di un dato elemento dagli elementi circostanti. I tag di heading hanno un loro valore in automatico.Dal nome, margin-top fissa la distanza dall'alto. Al contrario, margin-bottom quella dal basso. Sono distanze da esprimere preferibilmente in pixel.Nota:
In linea di massima consiglierei comunque di impostare "font-family" e "color", qualora NON siano già stati specificati, in modo da sovrascrivere eventuali altri attributi stabiliti nel css e avere un controllo stilistico appropriato del nostro pseudo-titolo.

Casomai non foste soddisfatti della grossolanità del testo (anche se non dovrebbe essere stata inficiata in alcun modo) potete sempre aumentarla o diminuirla usando l'attributo font-weight.

Fonte sull'attributo font-weight:

http://www.w3schools.com/Css/pr_font_weight.asp

Esempio del suo utilizzo:

http://www.w3schools.com/Css/tryit.asp?filename=trycss_font-weight


Caso 2. H3 non definito nel vostro foglio di stile

Inserite al fondo del vostro foglio di stile:
div.titolo-modulo{ 
font-size: 1.17em;
margin: .83em 0;
}


Nota:
Quelli riportati sopra non sono altro che i valori base del tag h3 quando non è modificato tramite css. Sono decisamente impersonali, stilisticamente parlando, e vi consiglierei di non usarli. Per correttezza li ho riportati. Vi consiglio invece di personalizzarli a vostro gusto e piacimento a seconda delle vostre conoscenze del css, cercando magari di rispettare gli standard del W3C.

Sito per gli standard W3C:
http://www.w3.org


LuxorTheFirst

http://luxor.altervista.org

commentaCommenta questo articolo sul forum