Aldolat.it — Post con tag SEO

WordPress e l’attributo rel del tag HTML link

aldolat@gmail.com (Aldo Latino) — Sat, 05 Jan 2019 21:13:53 +0000

Mentre stavo leggendo quali sono i meta tag HTML considerati da Google nell’indicizzazione delle pagine, mi sono imbattuto nell’articolo correlato Indicare a Google i contenuti suddivisi in più pagine. Siccome ho qualche articolo suddiviso in più pagine, come questo, ho voluto verificare se e come sono inseriti questi tag nel codice.

E ho notato qualcosa di strano.

Un ripasso veloce

L’attributo rel="next" e rel="prev" per il tag HTML <link> inserito nel tag <head> va usato per indicare che la pagina che si sta leggendo fa parte di un articolo unico suddiviso in più pagine. Il W3C definisce next così:

The next keyword indicates that the document is part of a sequence, and that the link is leading to the document that is the next logical document in the sequence.

W3C, Link type “next”.

mentre per prev dice:

The prev keyword indicates that the document is part of a sequence, and that the link is leading to the document that is the previous logical document in the sequence.

W3c, Link type “prev”.

Per cui, se un articolo è suddiviso in 5 parti e stiamo leggendo la pagina 1 della serie, il tag <link> sarà così:

<link rel="next" href="http://www.example.com/parte-2" />

mentre nella pagina 2 avremo:

<link rel="prev" href="http://www.example.com/parte-1" /> <link rel="next" href="http://www.example.com/parte-3" />

e nell’ultima:

<link rel="prev" href="http://www.example.com/parte-4" />

Cosa ho notato

E veniamo ora al punto. Ho scoperto che WordPress non usa in modo corretto questo attributo, in quanto lo usa per indicare il post precedente e il post successivo a quello che si sta leggendo. Ad ogni modo è possibile intervenire per ripristinare l’uso corretto del tag <link>.

Non ho verificato se esiste un ticket su questa cosa, ma comunque ho cercato se qualcuno si fosse già accorto del problema. Tra i risultati vi segnalo questo post, da cui ho tratto ispirazione per il mio articolo e in parte per la funzione che vi propongo sotto. Vi voglio evidenziare questo passaggio di quanto scrive l’autore:

Currently (version 4.2.2), wordpress already adds a rel=“prev” and rel=“next” tag to single posts, but these tags are added to all posts irrespective of whether they have pagination or not. And oddly enough, the pages that have pagination do not have these tags. Having these tags on non-paginated posts makes little to no sense from the SEO perspective and it only serves as additional clutter you can get rid of.

Mukesh M, Adding Rel=“Next” And Rel=“Prev” Tags To Paginated Single Posts (Using NextPage Tag).

Rimozione del tag <link> di WordPress

Se avete un plugin personale con le funzioni che vi trascinate dietro anche quanto cambiate tema, inserite la seguente riga:

remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );

Se non avete questo tipo di plugin, inseritela nel file functions.php del tema in uso.

Aggiunta del tag <link> corretto

Aggiungiamo ora la funzione che utilizza in modo corretto il tag <link> e il suo attributo rel="next" e rel="prev" solo quando il post o la pagina sono suddivisi in più pezzi.

Aggiungete le righe seguenti al plugin personale o al file functions.php del tema. Il codice è abbastanza commentato.

 1/**
 2 * Prints the HTML tags link rel prev and next in the header.
 3 *
 4 * The attributes prev and next for the HTML tags link in the header
 5 * must be used when an article in divided into multiple pieces, so that the
 6 * first page has a link tag to the second part, the second page has a link
 7 * to the previous part and to the following part, the last page has a link
 8 * to the previous part.
 9 *
10 * WordPress uses incorrectly these tags to link the current post to the previous
11 * and the following posts, as if all the published posts belong to a single big article.
12 *
13 * @link https://support.google.com/webmasters/answer/1663744?hl=it&ref_topic=4617741
14 * @global object $wp_query The WP_Query object.
15 */
16function add_link_tag_header() {
17    // Get the global variable $wp_query, which will be used later.
18    global $wp_query;
19
20    // Figure out if we have a paginated post/page and count them.
21    $total_pages = count( explode( '<!--nextpage-->', $wp_query->post->post_content ) );
22
23    // If we are in a post/page and the total number of pages is greater than 1.
24    if ( is_singular() && 1 < $total_pages ) {
25        // Get the current number of page.
26        $current_page = intval( get_query_var( 'page' ) );
27
28        // If we are in the first page, change the number to 1 (in an array, the first element has number = 0).
29        if ( 0 === $current_page ) {
30            $current_page = 1;
31        }
32
33        echo "\n\n" . '<!-- Function: add_link_tag_header() -->' . "\n";
34
35        // Add prev HTML link tag.
36        if ( $current_page > 1 && $current_page <= $total_pages ) {
37            echo '<link rel="prev" href="' . esc_url( trailingslashit( get_permalink() . ( $current_page - 1 ) ) ) . '" />' . "\n";
38        }
39
40        // Add next HTML link tag.
41        if ( $current_page >= 1 && $current_page < $total_pages ) {
42            echo '<link rel="next" href="' . esc_url( trailingslashit( get_permalink() . ( $current_page + 1 ) ) ) . '" />' . "\n";
43        }
44
45        echo '<!-- Function: add_link_tag_header() -->' . "\n\n";
46    }
47}
48add_action( 'wp_head', 'add_link_tag_header' );</code>

Una volta messa in opera la modifica, alla pagina 6 di un articolo di 10 pagine avremo all’interno dal tag <head> qualcosa di questo tipo:

<!-- Function: add_link_tag_header() -->
<link rel="prev" href="https://www.example.com/titolo-del-post/5/" />
<link rel="next" href="https://www.example.com/titolo-del-post/7/" />
<!-- Function: add_link_tag_header() -->

Tutto questo in attesa che gli sviluppatori di WordPress sistemino la cosa.

L'articolo WordPress e l’attributo rel del tag HTML link è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

Visualizzare il numero di pagina nell’elemento title

aldolat@gmail.com (Aldo Latino) — Sat, 24 Apr 2010 15:02:05 +0000

Qualche giorno fa un utente del mio forum mi ha chiesto di aiutarlo a inserire nell’elemento title della pagina, qualora il post di WordPress o la pagina “statica” fosse suddivisa su più pagine, il numero di pagina attualmente visualizzata: in altre parole, avere un titolo di questo tipo “Titolo della pagina — Pagina 7”. Mentre era riuscito a farlo con le pagine di archivio, non aveva avuto altrettanto successo con quelle dei post (e, aggiungo io, con quelle delle pagine statiche).

Il motivo è semplice: la variabile $paged, che contiene il numero di pagina attualmente visualizzata, è attiva nella home e nell’archivio, cioè data, autore, categoria, tag; per i post e le pagine che si estendono su più pagine bisogna usarne un’altra: la semplice $page.

La richiesta del lettore è stata molto istruttiva per me e il merito di questo post, dunque, va dato a lui, che ringrazio per avermi spinto ad analizzare questa faccenda e a farmi entrare nei meandri di /wp-includes/post-template.php. Ho anche approfittato dell’occasione per implementare questa soluzione in Ubuntu block notes, che in questo articolo vi mostro.

Inserire il numero di pagina attuale nell’elemento title

Di solito nel file header.php troviamo che il tag title è generato da una riga simile:

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

che ci restituisce:

<title>Titolo del post < Titolo del blog</title>

o, se siamo in un archivio di categoria, sarà:

<title>Nome categoria < Titolo del blog</title>

Questa soluzione, però, può essere migliorata dando al lettore altre informazioni più chiare e dettagliate. Credo che anche dal punto di vista SEO si abbiano miglioramenti, ma non ho verificato.

Nel mio header.php la semplice riga è stata sostituita con le seguenti, che differenziano il titolo ogni volta che si accede a un determinato tipo di pagina: articolo, pagina statica, archivio. Ecco le righe:

 1<title>
 2 <?php
 3  /**
 4   * Prepara il titolo della pagina a seconda del tipo
 5   * Stampa anche il numero di pagina a partire dalla seconda
 6   *
 7   * $paged contiene l'attuale numero di pagina nella home e nell'archivio
 8   * $page  contiene l'attuale numero di pagina di un articolo multipagine o di una pagina multipagine
 9   *
10   */
11  if (is_home()) {
12    echo 'Home';
13    // Si può usare `if (is_paged())` oppure `if ($paged)` oppure `if ($paged > 1)`
14    // Nella prima pagina di una serie, $paged è sempre 0
15    if ($paged) { echo ' | Pagina '.$paged; }
16  } elseif (is_category()) {
17    echo 'Archivio della categoria &laquo;'.single_cat_title('', false).'&raquo;';
18    if ($paged) { echo ' | Pagina '.$paged; }
19  } elseif (is_tag()) {
20    echo 'Archivio del tag &laquo;'.single_tag_title('', false).'&raquo;';
21    if ($paged) { echo ' | Pagina '.$paged; }
22  } elseif (is_day()) {
23    echo 'Archivio del '.get_the_time('j F Y');
24    if ($paged) { echo ' | Pagina '.$paged; }
25  } elseif (is_month()) {
26    echo 'Archivio di '.get_the_time('F Y');
27    if ($paged) { echo ' | Pagina '.$paged; }
28  } elseif (is_year()) {
29    echo 'Archivio per l\'anno '.get_the_time('Y');
30    if ($paged) { echo ' | Pagina '.$paged; }
31  } elseif (is_author()) {
32    $author = $wp_query->get_queried_object();
33    echo 'Archivio di '.$author->display_name;
34  if ($paged) { echo ' | Pagina '.$paged; }
35    } elseif (is_search()) {
36    echo 'Risultati della ricerca di &laquo;'.wp_specialchars($s).'&raquo;';
37  if ($paged) { echo ' | Pagina '.$paged; }
38    } elseif (is_404()) {
39    echo 'Errore 404: Non trovato';
40  } elseif (is_single() || is_page()) {
41    wp_title('');
42    // qui non si può usare $paged: si usa $page al suo posto
43    if ($page) { echo ' | Pagina '.$page; }
44  }
45  echo ' &lsaquo; '.get_bloginfo('name');
46 ?>
47</title>

Ci sono dei commenti nel codice: penso siano chiari.

Provate, ora, a dare un’occhiata al titolo pagina della pagina 2 del blog: mentre nella 1 (la homepage) il numero non viene stampato, lo vediamo dalla 2 in poi; così anche date un’occhiata alla categoria WordPress, al tag Guide del blog, a un archivio basato su anno o su ricerca.

Date ora uno sguardo a un post suddiviso su più pagine: il title presenta solo il titolo dell’articolo più il nome del blog, mentre nella pagina 2 vediamo scritto anche il numero.

Specificare anche il numero totale di pagine

E se volessimo aggiungere anche il numero complessivo delle pagine, nella forma: “Pagina 3 di 10”?

Anche in questo caso dovremmo distinguere se si tratta di Home/Archivio e di Post/Pagina. Nel primo caso useremmo:

if ($paged) { echo ' | Pagina '.$paged.' di '.$wp_query->max_num_pages; }

mentre nel secondo dobbiamo agire diversamente perché non abbiamo una variabile diretta fuori dal loop:

global $page;
$pages = count( explode( '<!--nextpage-->', $wp_query->post->post_content ) );
if ($page) { echo ' | Pagina '.$page.' di '.$pages; }

Usare queste forme in altre parti del tema

Chiaramente questa soluzione può essere usata altrove. Io l’ho fatto nel template single.php nel caso il post sia suddiviso su più pagine: a lato del testo appare la dicitura che restituisce le informazioni. L’ho usata anche nelle ricerche che si estendono su più pagine e anche nelle pagine d’archivio: penso sia un servizio in più che si fornisce al lettore.

Mi fermo qui, con la promessa di scrivere qualcosa di più dettagliato su questo argomento e anche su come ho agito per personalizzare il mio archivio e le informazioni che ne escono.

L'articolo Visualizzare il numero di pagina nell’elemento title è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

Personalizzare gli elementi meta Description e Keywords

aldolat@gmail.com (Aldo Latino) — Thu, 06 Aug 2009 10:21:16 +0000

In genere gli articoli dei nostri blog così come le pagine statiche presentano gli elementi meta “Description” e “Keywords” uguali fra tutti i post e tutte le pagine. Con un piccolo sforzo possiamo però personalizzarli e rendere ciò che scriviamo più facilmente rintracciabile. Esistono plugin che fanno questo per noi e anche molto di più: a me preme invece, come di consueto, la parte teorica del ragionamento.

Questo post prende spunto da un articolo di WP Recipes, ma utilizza una soluzione differente. Vediamo come ho implementato questa caratteristica in Ubuntu block notes.

Personalizziamo l’elemento meta Description

L’elemento Description presenta in brevissima sintesi il contenuto della pagina che si sta visualizzando. Una sintesi generica va bene per la home page e altre pagine, ma non precisamente per gli articoli e per quelle pagine statiche che trattano argomenti più in profondità. Possiamo però, con semplici istruzioni PHP, sostituire la generica descrizione (e le Keywords generiche, come vedremo dopo) con una personalizzata per ogni articolo. Per far ciò useremo i Campi personalizzati di WordPress.

Aprite il file del vostro tema header.php e individuate la riga che dice più o meno così:

<meta name="description" content="bla bla bla" />

Se non c’è, la creeremo noi: inseritela dove volete, l’importante è che stia all’interno dell’elemento <head>. Un buon posto è di certo vicino agli altri elementi meta.

Al posto di tutta la riga inserite queste:

<meta name="description" content="<?php
    $standard_desc = 'Questa è la descrizione generica del mio blog';
    $single_desc = get_post_meta($post->ID, "Metadescription", true);
    if (is_single() || is_page()) {
        if ($single_desc == '') {
            echo $standard_desc;
        } else {
            echo $single_desc;
        }
    } else {
        echo $standard_desc;
    }
?>"/>

Personalizzate la variabile $standard_desc inserendo la descrizione generica del vostro blog.

In breve quelle righe non fanno altro che controllare se avete inserito una descrizione specifica per l’articolo o la pagina, secondo il metodo che vi spiegherò subito sotto, e la usano, altrimenti useranno quella generica.

Personalizziamo l’elemento meta Keywords

Stesso discorso per l’emento meta Keywords. Se avete già una riga, sostituitela con quelle seguenti, altrimenti incollate queste subito sotto le righe che avete appena inserite. Eccole:

<meta name="keywords" content="<?php
    $standard_key_list = 'questa, è, la, mia lista, di parole, chiave';
    $single_key_list = get_post_meta($post->ID, "Metakeywords", true);
    if (is_single() || is_page()) {
        if ($single_key_list == '') {
            echo $standard_key_list;
        } else {
            echo $single_key_list;
        }
    } else {
        echo $standard_key_list;
    }
?>"/>

Personalizzate con la vostra lista di parole chiave la riga 2. Il ragionamento delle istruzioni è lo stesso di prima.

Come utilizzare queste istruzioni

Prendete un articolo già scritto e modificatelo. Senza toccare il testo, scendete nella pagina fino al riquadro “Campi personalizzati” e fate clic su “Aggiungi nuovo”. Scrivete come “Nome” il testo “Metadescription” e come valore la descrizione dell’articolo che state modificando. Quindi fate clic su “Aggiungi campo personalizzato”.

Fate la stessa cosa con un altro campo nuovo, che però chiamerete “Metakeywords” e a cui darete come valore le parole chiave che contraddistinguono l’articolo in modifica. Generalmente i tag che avete usato vanno bene. Premete quindi su aggiungi.

Ora, senza premere sul pulsante solito “Modifica articolo”, andate sul blog e visualizzate il post. Dite al vostro browser di farvi vedere il codice sorgente della pagina (in genere Ctrl+U) e dovreste vedere le due righe con gli elementi Description e Keywords personalizzati.

Quando in seguito scriverete un nuovo post e volete personalizzare questi due elementi, troverete già, nel menu a tendina dei “Campi personalizzati”, i due nomi inseriti prima: vi basterà inserirne il contenuto nel campo “Valore”.

L'articolo Personalizzare gli elementi meta Description e Keywords è uno scritto di aldolat.it. Rispettane le condizioni di licenza.