Mostrare nei post riquadri per ricette o schede tecnologiche con foto

Come creare schede di prodotti, ricette, autori, libri, film, serie TV per poi inserirle nei siti per mostrare i date essenziali al lettore di una recensione

Uno dei fattori di grande novità nell'algoritmo di Google è quello dei rater, o valutatori detto in italiano, che sono persone reali che aprono effettivamente le pagine dei siti e che danno una valutazione sulla validità dei contenuti, sulla facilità di navigazione e su altri fattori riguardo alla loro esperienza di lettori.

Questi dati vengono poi elaborati da Google per premiare i siti che offrono contenuti ben confezionati e per penalizzare quelli che invece scrivono post senza curarsi troppo dei lettori ma con l'unico scopo di ben posizionarsi nei risultati dei motori di ricerca.

Ho illustrato queste tematiche nell'articolo su come affrontare gli aggiornamenti principali dell'algoritmo, denominati Google Core Update. Una prima risposta a questa esigenza è quella di aggiungere un numero adeguato di immagini ai post, per facilitarne la comprensione da parte dei lettori. Un altro modo per avere delle buone valutazioni è quello di inserire video tutorial negli articoli che illustrino visivamente il tema senza che siano necessariamente stati pubblicati da noi su Youtube.

Anche l'inserimento di tabelle responsive, cioè visualizzabili correttamente da desktop e da mobile, è un modo per rendere più professionale e fruibile il sito e quindi avere delle valutazioni migliori da parte dei rater. Infine, quando i post sono abbastanza lunghi, suddividerli in sezioni o capitoli e creare un indice con link per permettere al lettore di spostarsi più facilmente al loro interno, è un modo per facilitare la comprensione del loro contenuto.

In alcune tipologie di siti può essere particolarmente utile per i lettori visualizzare delle schede. Queste possono essere usate nei blog di cucina per sintetizzare gli ingredienti necessari a una ricetta, nei siti di tecnologia per creare delle schede di prodotti, nei blog di letteratura per creare schede su autore e opera, nei siti di fashion e make-up per presentare le caratteristiche di prodotti di abbigliamento e di cosmetica.

La creazione di schede adeguate è meno complicata di quanto possa sembrare. Qui di seguito ho preparato uno screenshot con un esempio di scheda con la sua visualizzazione da desktop e da mobile.

Si tratta di un esempio di ricetta con visualizzazione da computer desktop e da dispositivo mobile. La visualizzazione da tablet è identica a quella da cellulare. Per creare un tale riquadro viene utilizzato il tag fieldset che è usato per la creazione di moduli. Ecco la sintassi generica per realizzare una tale personalizzazione:

<fieldset style="background: #FFEAE9; border: 4px double #940F04; width: 450px; padding:5px;">
<legend style="color: #036; font-weight: bold;">TITOLO</legend>
... Qui incollare il codice HTML del riquadro con foto e link ...
</fieldset>

I parametri colorati possono essere personalizzati a piacere e riguardano i seguenti elementi:

1. Colore di background del riquadro (#FFEAE9)
2. Colore e stile dei bordi con  border: 4px double #940F04;
3. Larghezza del riquadro width: 450px;
4. Il padding setta la distanza tra il riquadro e il suo contenuto (5px)
5. Titolo da visualizzare in alto  a sinistra nella zona del bordo
6. Grassetto del titolo (font-weight: bold;)
7. Colore del titolo (#036).

Al posto della scritta in viola si incolla l'HTML del contenuto della scheda eventualmente con elenchi, link, foto, tabelle e altri oggetti HTML. Ecco qui di seguito l'HTML usato per la scheda di test che realizzato:

<div><fieldset style="border-bottom: #191919 1px solid; border-left: #191919 1px solid; padding-bottom: 5px; padding-left: 5px; width: 450px; padding-right: 5px; background: #ffffff; border-top: #191919 1px solid; border-right: #191919 1px solid; padding-top: 5px"><legend style="color: #191919; font-weight: bold">Cinghiale in bianco</legend>    <ul><a style="margin-bottom: 1em; float: right; margin-left: 1em; clear: right" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vLe0tKDEFwfI8vzLwaE1j17yiYZvz5RyBMlik8ge1D_kIquXWx9lkfQisHLMA6687aPq0WDChi6_OLhxSVTfewVLhM-qntctBlRmvM7-wu2KpMXXeTCq63l-_YAZlpEKnZoF96OUoi4/s1600/cinghiale-maremmana.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vLe0tKDEFwfI8vzLwaE1j17yiYZvz5RyBMlik8ge1D_kIquXWx9lkfQisHLMA6687aPq0WDChi6_OLhxSVTfewVLhM-qntctBlRmvM7-wu2KpMXXeTCq63l-_YAZlpEKnZoF96OUoi4/s200/cinghiale-maremmana.png" width="250"></a>       <li>1 Kg di cinghiale circa </li>      <li>ginepro </li>      <li>alloro </li>      <li>chiodi di garofano </li>      <li>olio </li>      <li>aglio </li>      <li>dado per brodo </li>      <li>vino bianco. </li>   </ul>   <span style="font-size: x-small">Per la ricetta completa </span><a title="ricetta cinghiale in bianco" href="#" target="_blank"><span style="font-size: x-small">leggi qui</span></a></fieldset> </div>

Meglio non usare larghezza delle schede superiori ai 450 pixel, perché potrebbero non entrare nello schermo dei cellulari di fascia medio bassa. I due URL colorati di rosso sono identici e rappresentano il link e l'hotlink della foto da mostrare nel riquadro. Per un test, incollatelo in un Editor HTML Online.

L'URL di una pagina più dettagliata della scheda si incolla sostituendolo al cancelletto # colorato di rosso.