Come testare i tag del proprio sito mediante il CSS? Ebbene si, è possibile sfruttare il CSS per valutare se per esempio un link abbia l’attributo title o meno grazie alle tecniche del grandissimo Eric A. Meyer guru del CSS è stato un pioniere della conoscenza e della effettiva utilizzazione del CSS.
Prima che il normalize.css ci fosse, c’era il CSS reset.
Uno strumento che ai più dice poco, ma a persone di una certa esperienza dice, e dici molto. Fu un punto di svolta e indispensabile nella costruzione mediante CSS dei siti internet: come dice il suo nome azzerava i CSS iniettato da browser, in modo tale che, tutti i progetti partissero dalla stessa base del css, resettato appunto.
Eric sfruttando le proprietà delle regole del CSS ha creato delle regole, tali per cui a seconda che la tua immagine abbia o meno l’attributo title o alt viene riquadrata, da un bordo di colore molto acceso (il rosso, il fucsia, in modalità solid o background). Idea molto semplice ma decisamente corretta e geniale. Da notare che se l’immagine non vine riquadrata di niente allora ha superato il testo, congratulazioni 😉
Come testare i tag del proprio sito mediante il CSS: indice del contenuti
1. Testare le immagini
Vuoi sapere quali immagini non siano SEO frinedly, e dunque non abbiano l’attributo alt o title? Scrivi il codice qui sotto nel tuo style.css:
img[alt=""] { border: 3px dotted red !important; } img:not([alt]) { border: 5px solid red !important; } img[title=""] { outline: 3px dotted fuchsia !important; } img:not([title]) { outline: 5px solid fuchsia !important; }
Il risultato che avrete sarà simile allo schemetto posto qui sotto:
Title | senza alt | con alt, ma vuoto | con alt e pieno |
---|---|---|---|
senza title | |||
con title, ma vuoto | |||
con title e pieno |
2. Testare i link
Testare anche i link vul dire essenzialmente che: l’attrbuto href sia è presente, e non pieno sol di #, che l’attributo tile sia presente e non vuoto.
Per sapere quali link soddisfano queste caratteristiche SEO scrivi il codice qui sotto nel tuo style.css e lo scoprirari:
a[href]:not([title]) { border: 5px solid red; } a[title=""] { outline: 3px dotted red; } a[href="#"] { background: lime; } a[href=""] { background: fuchsia; }
Avrai un risultato dei link simile al seguente:
Sommario
- blah# (senza title, href di forma href=””)
- blah# (con title ma vuoto, href di forma href=””)
- blah# (con title e pieno, href di forma href=””)
- blah (senza title, con href ma vuoto)
- blah (con title ma vuoto, con href ma vuoto)
- blah (con title e pieno, con href ma vuoto)
- fillblah (senza title, con href e pieno)
- fillblah (con title ma vuoto, con href e pieno)
- fillblah (con title e pieno, con href e pieno)
Com vedi solo il nono link
<a href="https://www.sergiopinna.it" title="blah">fillblah</a>
soddisfa le caratteristiche, difatti non ha una colorazione stana e non è riquadrato da nessun bordo
3. Testare i div, span, li, p vuoti
Con l’aiuto di questo codice potremmo individuare div, span, li, p vuoti, cosa che talvolta Wordporess, addirittura per default fa:
div:empty, span:empty, li:empty, p:empty { padding: 0.5em; background: yellow; } div:empty, span:empty, li:empty, p:empty { padding: 0.5em; background: yellow; }
ecco il risultato degli errori:
-
linea piena:
- span vuoto [ ], and a break [
] - div vuto: [
]
lista vuota ccon it tag uniti;
lista vuota ma con
<!-- comment -->
)
lista vuota con uno spazio fra i tag li;
Altro articolo, oltre che al qui presente “Come testare i tag del proprio sito mediante il CSS”, che mostra tutta la portatata della “magia” del CSS che potrebbe interessarti è: Guida completa per cambiare la posizione a qualsiasi elemento
Font:
– CSS Tools: Diagnostic CSS