ATTENZIONE: List post!

9 modi intelligenti di usare caratteri e simboli html nel sito web

Ci sono numerosi simboli html e caratteri speciali che possiamo usare per diversi scopi e senza scomodare Google Images, siti dove trovare  icone e Photoshop: basterà selezionare il nostro simbolo html o il carattere speciale con il mouse e fare un copia e incolla nei nostri testi e nei nostri file (in codifica non ANSI ma UTF-8… in caso il tuo editor html te lo chieda ;) ).

Ecco alcuni siti dove trovare questi simboli html e copiarli comodamente negli appunti:

Vantaggi: perché usare questi simboli, caratteri speciali, emoji.

Certamente per la velocità di utilizzo e la flessibilità: possiamo cambiarne la dimensione con una regola css:

☯<span style="font-size: 50px;">☯</span>

Cambiarci colore:

<span style="font-size: 50px; color: red;">☯</span>

Perfino aggiungerci qualche effetto speciale:

<span style="font-size: 50px; color: red; text-shadow: 2px 2px 2px #444;">☯</span>

Posso fare in 30 secondi quello che con un’immagine mi richiederebbe… più tempo.

Svantaggi

Alcuni di questi caratteri – praticamente tutti gli emoji ma anche altri simboli html – cambiano a seconda della piattaforma, del sistema operativo… guarda ad esempio come cambia il simbolo del sole ☀️ in questa pagina.
Perfino il cuore ♥ – che in html lo puoi scrivere anche &hearts; ♥ – cambia senza ritegno se siamo su IOS, android… o facebook, twitter (ma questo non ci interesserà)… o wordpress!

Per chi usa wordpress infatti molti di questi simboli vengono automaticamente convertiti in emoji!
Per evitare questo c’è il plugin Disable Emojis che però disabiliterà la funzionalità in tutto il sito, anche per eventuali smile ed emoticons – che sarebbe comunque una cosa consigliabile dal mio punto di vista :) – che magari avevi messo nei testi del tuo sito o qualcuno aveva messo nei commenti…


  1. Caratterizzare i titoletti

    Per la pagina Chi Siamo o per i benefit di una landing page.
    Un’icona vale più di mille parole. Ecco alcuni esempi:

    🍂 RISPETTIAMO L’AMBIENTE

    🚚 CONSEGNE A DOMICILIO

    💻 DESKTOP FRIENDLY

    ♿ ACCESSIBILE

    📷 ALBUM FOTOGRAFICO

    📆 PROSSIMI EVENTI


  2. Caratterizzare parti del testo

    Alcuni simboli si prestano di più per creare box di approfondimenti o altri parti di un contenuto che interrompono il normale flusso dell’informazione: note, approfondimenti, avvertimenti… Ecco alcuni esempi:

    Attenzione:

    Ricorda di fare molto attenzione a questo e a quello!

    Nota:

    📝 Prendi nota di questi appunti!

    Pericolo di morte!

    🕱☠💀 Questo è estremamente importante! Ne va della tua vita!

    Reminder…

    🎗 Ricordarsi di fare questo!

    Guarda anche…

    👁 Devi dare proprio un occhio a questa cosa!

    approfondimento bibliografico

    🕮 Se proprio proprio vuoi saperne di più…

    Allegato…

    📎 Questi sono i dati di cui ti parlavo…

    libro consigliato

    📖 Non può mancare nelle tua libreria il libro di…

    In sintesi…

    🎯 In 2 parole…

  3. Il trigramma cinese per il cielo come icona del menu

    Sarebbe il trigramma che rappresenta il cielo nella serie di 8 trigrammi della bagua cinese: ☰  ☱  ☲  ☳  ☴  ☵  ☶  ☷

    Ma a noi ci interessa particolarmente il primo perché infatti lo possiamo usare come icona di menu nei design del nostri siti web (ad esempio in visualizzazione da mobile):


  4. Creare liste numerate d’impatto

    Tra i simboli html abbiamo anche 3 serie di numeri da 1 a 10 all’interno di un cerchio. Adatti quindi per creare liste numerate là dove non possiamo crearle… ad esempio nei titoli… (<h2>➊ primo sottotitolo</h2>, <h2>➋ secondo sottotitolo</h2>…)

    ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿
    ➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉
    ➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓
    ⓵ ⓶ ⓷ ⓸ ⓹ ⓺ ⓻ ⓼ ⓽ ⓾

    Abbiamo anche delle serie di numeri che arrivano fino al 20:

    ⒈ ⒉ ⒊ ⒋ ⒌ ⒍ ⒎ ⒏ ⒐ ⒑ ⒒ ⒓ ⒔ ⒕ ⒖ ⒗ ⒘ ⒙ ⒚ ⒛
    ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳
    ⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽ ⑾ ⑿ ⒀ ⒁ ⒂ ⒃ ⒄ ⒅ ⒆ ⒇

    E una che arriva fino a 50!

    ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳ ㉑ ㉒ ㉓ ㉔ ㉕ ㉖ ㉗ ㉘ ㉙ ㉚ ㉛ ㉜ ㉝ ㉞ ㉟ ㊱ ㊲ ㊳ ㊴ ㊵ ㊶ ㊷ ㊸ ㊹ ㊺ ㊻ ㊼ ㊽ ㊾ ㊿

    E delle serie con delle lettere cerchiate:

    ⒜ ⒝ ⒞ ⒟ ⒠ ⒡ ⒢ ⒣ ⒤ ⒥ ⒦ ⒧ ⒨ ⒩ ⒪ ⒫ ⒬ ⒭ ⒮ ⒯ ⒰ ⒱ ⒲ ⒳ ⒴ ⒵
    Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ
    ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ

    E questi caratteri un po’ smarriti…

    ⓪ ⓫ ⓬ ⓭ ⓮ ⓯ ⓰ ⓱ ⓲ ⓳ ⓴

    Infine, se la tua lista non è troppo lunga che mi dici di questi?

    ⚀ ⚁ ⚂ ⚃ ⚄ ⚅

    E di questi?

    ♳ ♴ ♵ ♶ ♷ ♸ ♹

  5. Frecce, frecce, frecce… e call-to-action!

    Ci sono un sacco di frecce tra i simboli html. Possiamo usarli per le gallerie fotografiche, per passare da una slide all’altra… o per puntare l’attenzione ad una certa call-to-action! Ecco alcuni esempi:

    ← ↑ → ↓ ↖ ↗ ↘ ↙ ↝ ↟ ↠ ↣ ↥ ↦ ↧ ↪ ↬ ↯ ↱ ↳ ↴ ↷ ↻ ⇈ ⇉ ⇏ ⇒ ⇗ ⇘ ⇛ ⇝ ⇟ ⇢ ⇥ ⇧ ⇨ ⇪ ⇫ ⇬ ⇭ ⇮ ⇯ ⇰ ⇲ ⇴ ⇶ ⇸ ⇻ ⇾ ➩ ➪ ➫ ➬ ➭ ➮ ➯ ➳ ➴ ➵ ➶ ➷ ➸ ➹ ➺ ➻ ➼ ➽ ➾

    E degli indici puntati che mi dici?

    ☜ ☝ ☞ ☟ ☚ ☛

    Dimenticavo: se non troviamo la freccia (o altro simbolo) nella direzione giusta… la possiamo ruotare con i css:

    .freccia30{transform: rotate(30deg);width:50px;font-size:50px;}

  6. Scrivimi, mandami una mail, riempi il form di contatto

    Ci sono diversi caratteri che possiamo usare per segnalare un’indirizzo email o esprimere l’invito a contattarci tramite email o form di contatto. Eccone alcuni:

    ✍ ✎ ✏ ✐ ✑ ✒ ✉

  7. Mettere una spunta ai link visitati

    Segnaliamo i link visitati dall’utente, invece che con un banalissimo cambio di colore, con una bella spunta! Purtroppo la pseudo-classe :visited è un po’ rognosa e non permette tutte le funzioni che normalmente possiamo applicare con i css. Ecco come sono riuscito a farlo funzionare (testato sui più diffusi browser) ad esempio sui link di un elenco puntato:

    
    ul.checkmark a {position:relative;}
    ul.checkmark a:before {content:'✔';position:absolute;top:0;left:-15px;color:#fff;}
    ul.checkmark a:visited:before {color:green;}
    

    In pratica applico la spunta a tutti i link (dell’elenco puntato) e li posiziono in posizione assoluta sulla sinistra ma li coloro con lo stesso colore dello sfondo. Ai link visitati applico poi il colore verde.
    spunta ai link visitati
    Prima che tu perda tempo… c’ho provato a modificare l’opacità ma sembra che con la pseudo-classe :visited non funzioni!

    Per quanto riguarda i segni di spunta (o che possiamo usare come tali) abbiamo solo l’imbarazzo della scelta. Eccone alcuni:

    ✅ ✓ ✔ ✕ ✖ ✗ ✌ ☐ ☑ ☒

  8. Usare i caratteri del telefono… per il numero di telefono!

    Esistono 2 simboli molto comuni che raffigurano il telefono:
    ☎ Il telefono nero (BLACK TELEPHONE)
     e il telefono bianco (WHITE TELEPHONE)
    Abbiamo però anche il “TELEPHONE LOCATION SIGN”…

    …il “TELEPHONE RECEIVER”…
    📞
    …e altri ancora:
    🕾 🕿 🕻 🕼 🕽
    Potremmo inserirli nella pagina dei contatti, nel footer del nostro sito web… e nella meta description (della home o della pagina dei contatti) l’abbiamo suggerito?


  9. Usare i caratteri nella meta description o nel title tag

    Non è spesso chiaro quali caratteri vengono permessi in title e meta description in Google (soprattutto nel title tag è facile che non vengano visualizzati) e la cosa potrebbe cambiare da un momento all’altro. Di sicuro mettere i caratteri speciali attirerà l’attenzione nelle SERP.

    caratteri speciali in meta description

    Ma ecco un buon sistema per verificarlo:
    andare sul sito http://graphemica.com/
    nel box di ricerca in alto cercare il nostro carattere, per esempio il cuore ♥ (oppure digitare “heart” nel box di ricerca)
    Una volta trovata la pagina, in questo caso http://graphemica.com/%E2%99%A5 …
    Possiamo cercarla su Google con l’operatore “site:”, ad esempio https://www.google.com/search?q=site:graphemica.com/♥
    Vedremo quindi che il cuore non compare nel title, ma compare nella description e nella url!cuore nello snippet di googleAltri simboli invece compaiono anche nel title, ad esempio:

    aum nello snippet google

    Altri sembra che compaiono solo tra i risultati dei propri collegamenti di Google+!
    simboli nei risultati di google plus



Questo è un list post che si aggiorna ogni volta che un nuovo elemento viene aggiunto alla lista. E' stato generato tramite alcune modifiche a Wordpress e con l'utilizzo dei Custom Post Type: ogni elemento della lista viene aggiunto e modificato come un post a se stante. Contattami per saperne di più...

Lascia un commento

Compila qui sotto tutti i campi e clicca "Invia Commento"


Ebook SEO (SEO per Scrittori sull'Orlo di una Crisi di Nervi)

La ricerca (sulle) parole chiave

1.3 La ricerca (sulle) parole chiave
E se ti dicessi che la ricerca sulle parole chiave è il succo del lavoro del SEO? | |...

Come si fa un'Analisi SEO di un Sito Web. Completa! E per principianti!

1.2.2 Site: e altre diagnosi
In questo capitolo una guida completa per principianti su come analizzare lo stato di salute di un sito web attraverso...

L'obiettivo di un sito web

1.1 Obiettivo sito
Iniziamo il nostro percorso pratico (leggi il capitolo precedente "Come si lavora (quando si fa SEO)") con la fase di...

...vai all'indice dell'ebook »

Incredibile! C'è ancora roba qui sotto!