§38. I meta tag delle pagine WordPress per il SEO

Ammetto subito di non essere un adepto della religione chiamata SEO: la logica astratta e l’esperienza pratica mi suggeriscono che un sito costruito bene dal punto di vista tecnico e riempito di contenuti e/o funzionalità interessanti non può non diventare popolare tra le persone alle quali è destinato (e ognuno è libero di creare un sito utile ad appena due persone su tutto il pianeta). Allo stesso tempo, riconosco che spesso è necessario mostrare al cliente, al capo o al proprio cervello pieno di dubbi di avere fatto tutto il possibile per garantire al sito costruito o gestito una posizione alta tra i risultati di ricerca…
Almeno in questa sede evito di raccontarvi dei vari riti quasi magici riguardanti il modo di scrivere i testi o di inserire le immagini.
Vi racconto, invece, quali meta tag sono da inserire nei codici delle pagine del vostro sito per guadagnarsi – come si spera! – una maggiore fiducia da parte dei sistemi di ricerca tipo Google e, dunque, salire – come si spera! – più in alto possibile nella lista dei risultati mostrati agli utenti.
Come sostengono i sacerdoti del SEO esperti, attualmente i meta tag realmente utili non sono tanti: http-equiv, viewport, generator, title, author, copyright e description.

Attenzione! Il meta tag keywords è al giorno d’oggi ritenuto dannoso perché a partire dal 2009 non viene più preso in considerazione (o viene addirittura penalizzato) da Google. Succede perché i vari addetti al SEO poco seri avevano esagerato con l’utilizzo del keywords, assegnando alle pagine da loro promosse delle parole-chiave popolari, ma assolutamente estranee ai contenuti reali delle pagine concrete.

Se state leggendo questo paragrafo, molto probabilmente sapete già cosa sono i meta tag delle pagine web, ma per sicurezza li commento molto, molto brevemente. In sostanza, sono dei tag (X)HTML <meta> che possono essere usati per specificare le informazioni di servizio su una pagina web. Tali informazioni sono collocate all’interno del contenitore <head>…</head> del codice della pagina e non vengono mostrate all’utente sullo schermo. Quei meta tag che ci interessano ora sono i seguenti:
– http-equiv – il tipo del documento inviato e la sua codifica;
– viewport – i dati sull’impostazione del viewport (per il corretto adattamento della pagina allo schermo sul quale viene visualizzata);
– generator – il tipo e la versione del CMS del sito;
– title – il titolo della pagina o dell’articolo (tecnicamente non è un meta tag, ma è un parametro comunque molto utile dal punto di vista del SEO);
– author – l’autore della pagina o dell’articolo;
– copyright – il copyright sui contenuti della pagina o dell’articolo;
– description – la descrizione della pagina web.
Tutti i tag appena elencati sono facilissimi da inserire manualmente nei codici delle pagine di un sito fatto non con un CMS, ma con dei semplici file singoli: sicuramente lo avete letto sui vari manuali di HTML consultati all’inizio della carriera. Ma se utilizziamo un CMS come WordPress, non abbiamo un codice separato per ogni pagina del sito, ma solo i template generici utilizzati per la visualizzazione di una qualsiasi quantità di pagine. Di conseguenza, ci serve un modo di generare automaticamente i meta tag in base al contenuto visualizzabile su ogni singola pagina del sito.
Prima di tutto aprite con il vostro editor del codice il file header.php del tema del vostro sito basato su WordPress. Nel contenitore <head>…</head> da qualche parte sarà sicuramente presente questa riga:

<?php wp_head(); ?>

Se per qualche strano motivo manca, inseritela: vi sarà molto utile, praticamente indispensabile. La sua presenza è importante soprattutto perché si tratta di una funzione che automatizza la comparsa dei meta tag viewport e generator sempre aggiornati: non dobbiamo più preoccuparci per questi due! Inoltre, tale funzione «assorbe» – come vedremo tra poco – gli altri meta tag che creiamo noi e li inserisce nel codice della pagina dove e quando serve.
Andiamo avanti. Sempre nel contenitore <head>…</head> ci deve già essere il tag title. Nel caso di un sito realizzato con WordPress la sua forma ottimale è la seguente, con le variabili che assumono il titolo della pagina (wp_title) e il nome del sito (bloginfo) che sicuramente sono stati creati nella admin del sito:

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

Ma potete anche minimizzare, lasciando solo il titolo della pagina o dell’articolo, senza il nome del sito:

<title><?php wp_title('&laquo;', true, 'right'); ?></title>

Molto probabilmente nel contenitore <head>…</head> del vostro tema è già presente anche il meta tag http-equiv. Vi dico, comunque, che la sua forma ottimale è questa:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

Ora possiamo occuparci dei meta tag author e copyright. Se l’autore / proprietario del sito è uno solo (e se siete sicuri che sarà uno solo per sempre o per molto tempo), possiamo non sforzarci troppo e inserire i rispettivi meta tag esattamente come lo avremmo fatto su un sito realizzato senza alcun CMS. Quindi in un qualsiasi punto del contenitore <head>…</head> inseriamo questo codice:

<meta name="author" content="Eugi Gufo" />
<meta name="copyright" content="Eugi Gufo" />

Ovviamente, non dimenticatevi di cambiare i valori del content…
Se, invece, volete una soluzione più evoluta, quella che controlla il nome dell’autore di ogni singolo articolo e di ogni singola pagina, dovete intervenire sul file functions.php del vostro file WordPress. In un qualsiasi punto di quel file – il punto che vi sembra più logico o più comodo – inserite la seguente funzione:

function meta_author_copyright() {
    if ( is_single() || is_page() ) {
        $author_name = get_the_author_meta( 'display_name' ); // recuperiamo il nome dell'autore
        $copyright = '&copy; ' . date('Y') . ' ' . esc_html( $author_name ); // recuperiamo il copyright: si aggiungi anche l'eventuale anno corrente
        echo '<meta name="author" content="' . esc_attr( $author_name ) . '">' . "\n"; // stampiamo il metatag author
        echo '<meta name="copyright" content="' . esc_attr( $copyright ) . '">' . "\n"; // stampiamo il metatag copyright
    }
}
add_action( 'wp_head', 'meta_author_copyright', 20 );

Tale funzione non va richiamata nel file header.php perché, come potete vedere alla riga 9 del listing appena riportato, il suo risultato viene automaticamente trasmesso alla funzione wp_head() già menzionata poco sopra (proprio quella che deve necessariamente essere presente nel contenitore <head>…</head>). Volendo, potete eliminare l’indicazione dell’anno corrente, trasformando la riga 4 in questo modo:

$copyright = '&copy; ' . esc_html( $author_name );

In ogni caso, la funzione appena mostrata sarà particolarmente utile in almeno una delle due situazioni: 1) se sul sito scrive più di una persona; 2) se il nome del proprietario e dell’autore unico potrebbe cambiare col tempo per uno qualsiasi dei motivi immaginabili (per esempio: l’adozione di uno pseudonimo, il cambio dei dati anagrafici, il ritorno al nome originale, la cessione del sito etc.). È spesso molto più facile cambiare il nome nella admin del sito che nel codice!

N.B.: la funzione è già progettata in modo da non entrare in conflitto con i plugin di SEO eventualmente utilizzati sul sito, ma, comunque, non è mai eccessivo controllare.

E ora, finalmente, passiamo al meta tag description. Su un sito realizzato senza alcun CMS avremmo fatto in questo modo:

<meta name="description" content="Ci va una descrizione sensata del sito. Non scrivere che si tratta del miglior sito al mondo, racconta cosa contiene la pagina concreta!">

Questo modo andrebbe bene anche per un sito costruito con un CMS ma costituito da una sola pagina (in quel caso l’unica riga del codice appena mostrata nel listing 8 va semplicemente inserita in un qualsiasi punto del contenitore <head>…</head>). Per tutti gli altri siti più evoluti bisogna invece scrivere una funzione in PHP.
Supponiamo di voler creare il meta tag description per tutti gli articoli e per tutte le pagine del nostro sito WordPress. Supponiamo anche di non voler complicare troppo la futura amministrazione del sito, cioè non obbligare l’autore del sito (o noi stessi) a inventare e inserire nel database il testo di descrizione di ogni nuova pagina. La soluzione è banalissima: assegniamo al meta tag description il valore del «riassunto» dell’articolo o della pagina!

N.B.: per default, il meccanismo di WordPress non permette all’utente di creare il «riassunto» delle pagine (ma solo degli articoli). Ma io ho già scritto abbastanza in dettaglio, in un paragrafo dedicato, di come aggiungere facilmente il campo «riassunto» anche alle pagine.

Prima di tutto, nel file functions.php del nostro tema inseriamo la funzione che permette di creare i «riassunti» delle pagine WordPress. Può essere particolarmente utile in quelle situazioni in cui una pagina contiene poco testo (ma tante funzionalità e/o immagini) e non può dunque fornire la «materia prima» per la creazione automatica di un buon «riassunto». Ecco il codice:

function add_excerpt_page() {
    add_post_type_support('page', 'excerpt');
}
add_action('init', 'add_excerpt_page');

Ora siamo totalmente pronti a prendere il contenuto del riassunto e assegnarlo al meta tag description. Lo facciamo con il seguente codice da inserire sempre nel file functions.php del tema:

function meta_description_r() {
    if ( is_single() || is_page() ) {
        global $post;

        $meta_description = get_the_excerpt($post); // recuperiamo il riassunto dei post e delle pagine (se presente)

        if ( empty($meta_description) ) {
            $meta_description = wp_trim_words( wp_strip_all_tags( $post->post_content ), 25, '...' ); // usiamo il contenuto della pagina se il riassunto manca
        }

        if ( !empty( $meta_description ) ) {
            echo '<meta name="description" content="' . esc_attr( $meta_description ) . '">' . "\n"; // aggiungiamo il metatag solo se esiste una descrizione
        }
    }
}
add_action( 'wp_head', 'meta_description_r', 20 );

Come potete vedere, se il riassunto dell’articolo o della pagina è stato creato dall’amministratore del sito, esso viene utilizzato anche per il meta tag description; se, invece, non è stato creato, viene generato automaticamente sulla base del testo dell’articolo o della pagina e poi passato al meta tag.
Tale funzione non va richiamata nel file header.php perché anche essa – come potete vedere alla sua ultima riga – trasmette automaticamente il proprio risultato alla funzione wp_head() già presente nel header.
E poi… e poi basta: abbiamo già fatto tutto. Salviamo i file modificati e li carichiamo sul server, nella directory del tema. Aspettiamo che il risultato del nostro lavoro venga indicizzato da Google e iniziamo a sperare in una popolarità del sito aumentata, ahahaha
P.S.: tra gli obiettivi del presente paragrafo non c’era quello di insegnarvi a scrivere i testi del meta tag description funzionali dal punto di vista del SEO. In base alle poche cose lette sull’argomento e la semplice logica, però, posso dirvi che i suddetti testi non devono essere identici a quelli del tag title, ma, invece, devono essere unici per ogni pagina del sito, rispecchiare il contenuto reale della pagina, essere lunghi tra 70 e 200 simboli, contenere le parole e/o espressioni con le quali la pagina potrebbe essere ricercata dai potenziali visitatori interessati (rimanendo dei testi sensati e non dei semplici elenchi). I guru del SEO sapranno spiegarvelo molto meglio di me. Mentre il mio obiettivo era quello di aggiornarvi sugli aspetti puramente tecnici, di programmazione.