Tattiche di crescita degli editori per la stagione elettorale | WEBINAR
Tattiche di crescita degli editori per la stagione elettorale | WEBINAR
Dopo aver letto questa guida, dovresti essere in grado di capire come gli articoli di notizie esistenti vengono modificati e creati utilizzando layout di pagina che migliorano la capacità di Google di analizzare e comprendere il contenuto della pagina.
Durata del video
15:35
Rispondi al quiz
Fai il quiz del modulo attuale
Materiali
Modelli pronti all'uso
Risorse
Rapporti e risorse
2.1.1 Cosa sono il design e il layout?
Il design e il layout del tuo sito determinano come apparirà all'utente finale. Questo è importante perché Google è fondamentalmente guidato da una filosofia che mette l'utente al primo posto. Le pagine web che soddisfano le esigenze dell'utente per prime, più velocemente e nel modo più semplice possibile vengono premiate con un posizionamento più alto nelle SERP.
Il design e il layout del tuo sito determinano anche la facilità con cui i web crawler, come Google bot, lo scansionano e lo indicizzano. Un design e un layout semplici e ottimizzati garantiscono una scansione rapida e semplice, che a sua volta si traduce in un posizionamento migliore.
Cosa impedisce quindi agli editori di implementare le migliori pratiche di design e layout? Il più delle volte, gli editori si trovano ad affrontare questi punti critici:
Per rispondere a questa domanda, abbiamo effettuato una semplice ricerca su Google inserendo le parole chiave "Charlie Puth News" nella barra di ricerca.
Ecco cosa è emerso dai risultati della ricerca:
Al secondo posto della classifica SERP delle notizie più importanti, subito sopra un articolo di NME, c'è l'articolo del Daily Illini sull'ultima pubblicazione di Charlie Puth.
Il fatto che il Daily Illini, un giornale studentesco universitario, superi il più grande sito web musicale indipendente del mondo, solleva alcune importanti domande
Come fa un giornale studentesco di una cittadina di circa 40.000 abitanti del Midwest americano a superare il più grande sito web di notizie musicali del mondo? Incuriositi, decidiamo di approfondire ulteriormente la questione.
Per prima cosa abbiamo dato un'occhiata alla pagina di NME dedicata a Charlie Puth.
La prima cosa che notiamo subito è il video pop-up che cerca di caricarsi nell'angolo in basso a destra dello schermo. Evidentemente non sta caricando molto bene. Il video in buffering nasconde anche parte del titolo della notizia e il suo corpo.
Successivamente, notiamo che la finestra iniziale è occupata principalmente da contenuti non pertinenti alla notizia. C'è un grande banner pubblicitario che copre circa metà della pagina e, naturalmente, c'è il video.
Scorrendo la pagina, infatti, troviamo altri video, immagini più grandi e ricche di dettagli, più annunci pop-up e molti link ipertestuali. Considerata la ricchezza di contenuti multimediali della pagina, non sorprende che il caricamento abbia richiesto parecchio tempo.
Successivamente abbiamo esaminato il Daily Illini ed ecco cosa abbiamo scoperto.
La pagina è ordinata, pulita e ordinata. Ha la sua buona dose di pubblicità e un grande pulsante "Dona" in alto, ma non ci sono video o pop-up che coprano la finestra o ostruiscano il titolo della notizia. Il titolo è immediatamente visibile, ed è molto probabile che lo stesso valga per il web crawler di Google.
Nel complesso, la pagina è leggera, minimalista e si carica in un lampo.
Abbiamo deciso di dare un'occhiata più approfondita al codice sottostante. Cliccando con il tasto destro del mouse sulla pagina e selezionando "Visualizza sorgente" (su Chrome), possiamo visualizzare il codice della pagina.
Ecco cosa abbiamo visto per la pagina NME:
Due cose hanno attirato la nostra attenzione:
Questa non è la cosa migliore per una pagina per due motivi:
D'altro canto, quando abbiamo esaminato il codice della pagina del Daily Illini, abbiamo visto questo:
Questo è un codice HTML molto semplice. Inoltre, non ci sono script in esecuzione all'interno<head> sezione.
Come si spiega tutto questo perché il Daily Illini supera l'NME?
Probabilmente ci sono diversi fattori in gioco, e uno di questi è il design e il layout. La pagina del Daily Illini utilizza alcune tecniche di design e layout che anche i piccoli editori possono facilmente replicare per potenziare la loro strategia SEO complessiva.
Tra queste rientrano l'utilizzo di codice HTML semplice e pulito, l'eliminazione di script nella sezione dell'intestazione, il caricamento rapido e leggero della pagina e il non ricorso eccessivo a pop-up e annunci interstiziali.
La guida seguente analizza in dettaglio ciascuna di queste tecniche, spiegando anche altre tecniche che puoi implementare per migliorare significativamente il tuo posizionamento nei risultati di ricerca.
La semantica riguarda il significato delle parole. I tag HTML semantici sono quelli che definiscono chiaramente il loro significato sia per il lettore che per un web crawler.
Ad esempio, quando utilizziamo un tag come<header> , sappiamo cosa contiene: informazioni sull'intestazione.
Allo stesso modo<h1> è un tag semantico che indica a Googlebot che il titolo seguente è il più importante dell'articolo.
Al contrario, quando utilizziamo un tag come<div> , il suo significato non è immediatamente evidente. In HTML<div> sta per divisione e implica solo che è iniziata una nuova sezione di codice, senza necessariamente rivelare alcuna informazione sul contenuto di questa sezione.
I web crawler come Googlebot sono progettati utilizzando algoritmi di intelligenza artificiale e apprendimento automatico che tentano di simulare il funzionamento del cervello umano. Ciò significa che interpretano il testo in modo molto simile al cervello umano.
Un codice HTML facile da comprendere per gli esseri umani dovrebbe esserlo anche per il web crawler di Google.
Come esempio, prendiamo in considerazione i due pezzi di codice HTML qui sotto:
Fonte: https://www.pluralsight.com/guides/semantic-html
Questa pagina utilizza il<div> tag per tutto, dall'intestazione al contenuto principale fino al piè di pagina. Leggendo i tag, il contenuto non è immediatamente evidente.
Al contrario, la pagina seguente utilizza un markup semantico. L'intestazione è posizionata all'interno di<header> tag, il piè di pagina all'interno del<footer> tag, e il corpo principale dell'articolo va all'interno del<main> etichetta.
Fonte: https://www.pluralsight.com/guides/semantic-html
Poiché Googlebot può leggerlo e comprenderlo facilmente, questa pagina ha maggiori probabilità di posizionarsi più in alto rispetto alla precedente, a parità di altre condizioni.
Per verificare se la tua pagina utilizza markup semantico, fai clic con il pulsante destro del mouse sulla pagina (se utilizzi Google Chrome) e seleziona "Ispeziona". Potrai visualizzare il codice sorgente HTML della pagina. Gli elementi semantici più comuni includono:<author> ,<video> ,<article> ,<form> ,<header> , ecc.
Ora sappiamo cos'è il markup semantico e perché è importante. Ma come possiamo usarlo per migliorare la SEO?
È semplice: usa sempre il markup semantico per evidenziare le informazioni importanti sul design e l'impaginazione del tuo articolo. Tra queste rientrano le seguenti informazioni:
Assicurati che il layout della tua pagina sia ben ordinato per migliorare la scansione
Stai progettando il tuo sito in modo che possa essere letto sia dagli esseri umani sia dai web crawler e, in quanto tale, il tuo design e il tuo layout dovrebbero riflettere questo fatto.
Di seguito sono riportati alcuni suggerimenti per aiutarti a raggiungere risultati misurabili per il tuo sito web.
È possibile utilizzare HTML, CSS, Javascript o qualsiasi altro linguaggio front-end per creare pagine ricche e interattive. Tuttavia, è importante ricordare che più avanzato è il linguaggio, maggiore è la sua complessità e maggiori sono le probabilità che un web crawler possa trovarlo difficile da leggere, interpretare e compilare.
Tutto ciò che è codificato in HTML potrebbe non essere il più bello da vedere, ma verrà caricato più velocemente e sarà più ottimizzato per i motori di ricerca, per il semplice motivo che i motori di ricerca possono leggerlo e comprenderlo più velocemente.
Pensa al semplice codice HTML come allo scheletro essenziale della tua pagina web. Puoi aggiungere CSS e Javascript per arricchirlo e renderlo esteticamente gradevole e dinamico, ma sarebbe meglio mantenere i contenuti più importanti all'interno dello scheletro piuttosto che inserirli direttamente nella realtà.
Quindi, come implementiamo il semplice HTML? Un modo semplice per farlo è posizionare il corpo principale del contenuto all'interno<article> Tag HTML.
In questo modo, quando i crawler web incontrano il<article> tag, sanno immediatamente che quello che segue è il contenuto più importante della tua pagina: l'articolo di notizie. Questo aiuta il motore di ricerca a capire che il contenuto racchiuso in questo tag deve avere maggiore importanza.
HTML semplici<article> tag è un marcatore semantico che si presenta così:
Fonte: https://en.wikipedia.org/wiki/Article_element
La prossima domanda ovvia? Se utilizzo un CMS come WordPress, dove inserisco questi tag?
Come fare: se stai creando un sito web personalizzato utilizzando HTML, puoi controllare il codice sorgente per assicurarti che utilizzi HTML semplice, soprattutto nelle aree critiche. Ti consigliamo di parlare più approfonditamente con uno sviluppatore per evitare di compromettere accidentalmente la funzionalità.
Se utilizzi WordPress, consulta questa guida . Potresti trovare utile guida su come inserire codice HTML
Queste istruzioni sono per WordPress, poiché WordPress rimane il CMS più diffuso tra gli editori. Se utilizzi un CMS diverso, come Wix, consulta la pagina di supporto o la documentazione del tuo CMS.
Se hai a disposizione un team di sviluppatori web, è meglio affidare il lavoro a loro, poiché modificare il codice HTML può richiedere molto tempo.
Esegui dei test per assicurarti che i tuoi contenuti vengano visualizzati correttamente su tutti i browser, dispositivi e dimensioni. Questo è il punto più ovvio, ma spesso trascurato. Se i tuoi contenuti non vengono visualizzati come desideri su tutti i browser e dispositivi, ciò influirà sull'esperienza utente e, a lungo termine, sul tuo posizionamento nella SERP.
Come fare: per testare i contenuti su più piattaforme, devi aprire la pagina su dispositivi e browser diversi per vedere come viene visualizzata.
Come minimo, dovresti testare quanto segue:
I markup HTML aiutano a evidenziare i diversi elementi della tua pagina. I dati strutturati aiutano i motori di ricerca a leggere il contenuto dei diversi elementi della tua pagina e a comprenderne meglio il contenuto.
I dati strutturati sono semplicemente una serie di istruzioni scritte in un linguaggio semplice, come JSON-LD, che possono essere inserite nel codice HTML esistente della tua pagina web. Immaginali come una meta descrizione, ma per singoli contenuti della tua pagina.
Nell'esempio seguente, i dati strutturati aiutano Google a identificare cinque attributi relativi a una pagina di dbpedia su John Lennon:
Fonte: https://json-ld.org/
Come puoi vedere, il codice è scritto in un linguaggio semplice, facile da comprendere sia per un lettore umano che per un web crawler.
Ecco un altro esempio che mostra come i dati strutturati possano integrarsi perfettamente nel codice HTML esistente della tua pagina web. Le istruzioni per i dati strutturati sono evidenziate in verde.
Fonte: developers.google.com
In questo esempio, i dati strutturati indicano a Googlebot che si tratta di una pagina di ricette sulla torta al caffè di qualcuno chiamato Mary Stone.
L'utilizzo di dati strutturati nel layout del tuo sito web produce risultati misurabili. Ad esempio, l'utilizzo di dati strutturati può aumentare il tasso di clic (CTR) di un sito web fino al 30%.
L'utilizzo di dati strutturati aiuta inoltre la tua pagina a posizionarsi meglio nei caroselli, negli snippet in evidenza, nei video e nelle funzionalità del knowledge panel di Google.
Per la SEO di Google News, è importante includere i seguenti elementi durante la creazione di dati strutturati per fornire valore aggiunto:
Come fare: puoi aggiungere dati strutturati/schemi ai tuoi contenuti manualmente o utilizzando un plugin per il tuo CMS specifico.
Tutti gli elementi del tuo articolo di notizie dovrebbero essere disposti in un ordine specifico per consentirne una scansione più rapida e semplice. L'ordine è il seguente:
L'esperienza di pagina è una misura di come gli utenti percepiscono la tua pagina. Google ha una serie di parametri per quantificare l'esperienza di pagina. Abbiamo dedicato un intero modulo ai fattori che influenzano l'esperienza di pagina , quindi qui ci limiteremo a esaminarli brevemente.
Come fare: puoi testare l'esperienza di navigazione della pagina sia manualmente che utilizzando plugin o app di terze parti. Ad esempio, Page Speed Insights è uno strumento utile che ti aiuta ad analizzare le prestazioni del tuo sito in base al CWV e ad altri parametri, assegnando un punteggio in base all'analisi. Verifica anche la reattività sia su dispositivi mobili che desktop.
Gli editori di notizie non dovrebbero pubblicare più articoli con lo stesso URL. Questo impedirebbe a Google di indicizzarli. Ogni articolo dovrebbe avere un URL univoco.
Inoltre, questi URL dovrebbero essere permanenti. Ciò significa che la stessa notizia dovrebbe essere visualizzata su un URL specifico. Se la notizia associata a un URL specifico cambia frequentemente, Google non sarà in grado di scansionarla e indicizzarla. Gli editori dovrebbero tuttavia aggiornare la notizia con la frequenza necessaria.
Se è necessario utilizzare i reindirizzamenti per gli articoli di notizie, è necessario implementarli secondo le seguenti best practice:
Sebbene le azioni elencate in questa sezione non siano importanti quanto quelle sopra, consigliamo comunque di implementarne il maggior numero possibile una volta affrontati i punti critici della missione sopra elencati.
IL<head> L'elemento "URL" di una pagina contiene informazioni importanti sulla pagina stessa che non vengono effettivamente visualizzate. Include metadati che aiutano Googlebot a identificare i contenuti della pagina e a classificarli.
Di regola, il<head> L'elemento dovrebbe includere solo i tag più importanti e nient'altro, in modo che un post possa essere scansionato e visualizzato correttamente. Questi includono:
Qualsiasi altra cosa contenuta nel<head> è probabile che l'elemento confonda i web crawler.
Ad esempio, è comune per i principianti confondere il tag del titolo con<h1> e collocare quest'ultimo all'interno del<head> elemento. Come spiegato in precedenza, il<head> l'elemento può contenere solo metadati che non vengono visualizzati nella pagina.
Anche se il titolo e<h1> dovrebbero contenere essenzialmente le stesse informazioni: le prime sono metadati destinati ai web crawler e da visualizzare nei risultati SERP e nelle schede del browser, mentre le seconde sono informazioni da visualizzare nella pagina.
Il codice seguente mostra come posizionare il titolo all'interno del<head> elemento.
Fonte: developer.mozilla.org
Anche l'utilizzo di elementi di pagina che semplificano la scansione dei contenuti e rendono la navigazione un'esperienza fluida per l'utente ha un impatto sulla SEO.
Una pagina facile da navigare conterrà i seguenti elementi:
A meno che tu non sia uno sviluppatore web esperto, è meglio consultare un esperto sul modo migliore per implementare un'esperienza utente intuitiva.
Google desidera che gli editori mostrino annunci pubblicitari senza compromettere l'esperienza dell'utente. Per questo motivo, potrebbe penalizzare i siti web che mostrano troppi annunci invasivi. Sebbene l'esperienza utente sia una metrica soggettiva, Google ha linee guida e best practice specifiche per quanto riguarda gli annunci pubblicitari.
Alcuni di essi riguardano:
Per maggiori informazioni su annunci e popup, consulta il nostro modulo dettagliato .
Javascript è ottimo per creare contenuti dinamici e interattivi, ma i web crawler potrebbero avere difficoltà a visualizzarlo.
Questo perché:
Nel caso degli articoli di notizie, è buona norma evitare interruzioni quali caroselli di articoli correlati o gallerie di immagini.
Molti editori che ottengono buoni risultati si preoccupano quando rilanciano/riprogettano il loro sito, poiché ciò richiede a Google di effettuare una nuova scansione. Seguite queste best practice per garantire una transizione fluida alla normalità dopo il rilancio/riprogettazione:
Mantieni le pagine dei tuoi articoli il più leggere possibile. Abbiamo già visto come evitare Javascript negli articoli, ma è anche buona norma evitare l'uso di contenuti HTML pesanti.
Questo perché, quando Googlebot esegue la scansione della tua pagina, può scaricare solo un massimo di 15 MB di dati della pagina durante la prima scansione. Per la maggior parte delle pagine, questo non rappresenta un problema significativo, poiché elementi di grandi dimensioni come video e immagini vengono referenziati separatamente all'interno del codice che Googlebot indicizza in seguito, e quindi esulano dal limite di 15 MB.
Tuttavia, questo sottolinea ancora una volta il fatto che più la pagina è leggera, più facile sarà per Googlebot scansionarla e indicizzarla.
Suggerimento: se vuoi controllare le dimensioni della tua pagina, vai alla pagina Strumenti per sviluppatori del tuo browser, passa alla scheda Rete e ricarica la pagina. Verranno visualizzate tutte le richieste effettuate dal browser per visualizzare completamente la pagina. La prima richiesta in questo elenco mostra le dimensioni della pagina nella colonna Dimensioni. Per la maggior parte delle pagine su Internet, questo valore è solitamente espresso in kilobyte.
Gli snippet di articolo offrono ai lettori un'anteprima del contenuto della pagina prima di cliccarci sopra. Google determina lo snippet da abbinare a ciascun articolo analizzando il testo nel corpo principale dell'articolo, appena sotto il titolo.
Per evitare che Googlebot includa frammenti errati, assicurati che:
A volte, Googlebot potrebbe non riuscire a indicizzare la tua immagine o potrebbe indicizzare un'immagine diversa da quella che intendevi includere nel tuo articolo. Per evitare che ciò accada, segui queste best practice:
Googlebot utilizza il titolo del tuo articolo per identificarlo e indicizzarlo correttamente. Utilizza queste best practice per assicurarti che legga il titolo correttamente:
Diamo un'occhiata a due casi di studio di siti che hanno già implementato i passaggi descritti in questo articolo.
I moderni siti web di informazione sono complessi e ricchi, e sarebbe irrealistico aspettarsi che aderiscano rigorosamente a queste linee guida. Tuttavia, in questa sezione cercheremo di dimostrare come il rispetto delle linee guida possa portare a risultati prevedibili e misurabili.
Il Manly Observer è un sito web di notizie iperlocali rivolto al pubblico di un popolare sobborgo costiero di Sydney, in Australia. Ecco come si presenta un tipico articolo di notizie sul sito:
I seguenti elementi di design risultano chiari e presenti a prima vista:
Osservando ora il codice HTML della pagina, possiamo notare l'uso del markup semantico.
Si tratta di codice facilmente leggibile da un essere umano. È lecito supporre che un web crawler sarà in grado di leggere e interpretare questo codice con altrettanta facilità.
Il sito web utilizza lo schema https:// e non presenta annunci pop-up o annunci interstiziali caricati nella finestra di visualizzazione iniziale.
Entrepreneur è una rivista popolare per imprenditori e aziende. Ecco come appare la sua homepage.
Il sito web si carica in modo rapidissimo e non ci sono annunci pop-up o video nella homepage. La maggior parte degli annunci pubblicitari viene posizionata sui singoli articoli di notizie.
Quando clicchiamo su "visualizza sorgente", vediamo il seguente codice HTML:
A prima vista, possiamo dedurre quanto segue da questo codice:
Scorrendo verso il basso, vediamo il seguente elemento di codice:
Abbiamo discusso l'uso di schema.org e Opengraph (OG) per le immagini. Riassumendo, schema.org e OG sono tipi di dati strutturati che aiutano i web crawler a identificare più facilmente elementi specifici del codice. Vediamo schema.org e OG implementati qui.
Più in basso vediamo anche i tag dei dati strutturati come mostrato di seguito:
Come nel nostro esempio precedente, anche entrepreneur.com utilizza lo schema https:// nei suoi link, non presenta interstitial o pop-up di disturbo ed è veloce da caricare. Gli articoli seguono un formato predefinito per titolo, immagine, attribuzione dell'autore, data e corpo principale del contenuto. Ciò si traduce in una migliore esperienza di navigazione e, di conseguenza, in un miglioramento della SEO tecnica.
Dopo aver seguito questa lezione, dovresti essere in grado di rivedere e aggiornare le pagine di notizie esistenti per ottimizzarne il design e il layout, in modo da rispettare le migliori pratiche tecniche SEO.
Attivo ora
Vedi altro
