Quello che stiamo per trattare è un argomento che di solito spiego a lezione, nel corso di Web Developer, ma che per le funzionalità che offre, è spesso utilizzando su diversi fronti: non solo dal Web Designer o Developer, ma anche dall’esperto SEO. Ormai, chiunque decida di gestire un sito, deve almeno conoscere cos’è e il suo funzionamento.
Cos’è l’.htaccess?
Ma prima di tutto cerchiamo di capire che cos’è questo misterioso file. L’.htaccess È un file di configurazione Apache, disponibile nella maggior parte degli hosting Linux. Viene letto dal server ad ogni richiesta fatta da un utente e al suo interno troviamo diverse direttive che “guidano” la macchina a fare precise scelte nel rispondere all’utente.
Avrete sicuramente notato che il nome del file inizia con un punto. Questo perché è un file di sistema, e come tutti i file di questo tipo va identificato con un punto all’inizio del nome. Questo fa si che automaticamente venga nascosto, ed è quindi normale non riuscire a vederlo nelle cartelle dei nostri siti in locale. L’unico modo per visualizzarlo è utilizzare un IDE (PhpStorm, Visual Studio Code, Atom, ecc.), o attraverso un client FTP, come ad esempio Filezilla.
Di per sé è un semplice file di testo ma con determinate regole di sintassi che non hanno nulla a che vedere con HTML, CSS, o altri linguaggi. Questa sintassi va rispettata perfettamente, pena l’agognata pagina di errore 500 (Internal Server Error).
Non preoccupatevi comunque, perché in questo articolo vi fornirò i codici copia/incolla, quindi non sarà richiesto imparare alcuna sintassi particolare. L’unica cosa che è giusto farvi notare fin da subito, è la possibilità di commentare le righe del file, anteponendo il carattere “#” ad inizio riga. Così facendo quella riga sarà totalmente ignorata dal Server. Questo potrà servirvi per scrivere delle semplici annotazioni su cosa fa il codice che scrivete.
# Esempio di commento
Come creare un file .htaccess
Come detto poco fa, è un file semplicissimo di testo, ma che risulta nascosto. Quindi prima di avventurarvi a crearne uno, verificate che effettivamente il vostro sito ne sia sprovvisto. Su siti WordPress sarà sicuramente già presente, mentre su siti vetrina (HTML/CSS) può essere che non ci sia.
In questo caso vi consiglio di creare un generico file attraverso l’editor di codice che utilizzate per montare il vostro sito. Ricordatevi che il file andrà posizionato sulla directory principale del sito (la root) e dovrà avere il nome ”.htaccess” (Alcuni IDE, come PhpStorm, identificano subito che è un file di configurazione Apache, e mostrano l’icona relativa sul file).
Cosa posso fare con il file .htaccess?
Questo file ci permette diverse cose. Ed è proprio la sua versatilità che l’ha reso così conosciuto in diversi ambiti digitali. Riassumendo brevemente, le features principali sono:
- Definire la pagina 404, cioè quale file sarà caricato in caso di “Page not found”
- Predisporre le regole di redirect (301, 302). È infatti uno dei sistemi più utilizzati per reindirizzare i contenuti
- Migliorare le performance del nostro sito, attivando funzioni come la Compressione GZIP o il Leverage Browser Caching
- Permettere di riscrivere gli URL, rendendoli più SEO-friendly.
- Aggiungere una protezione username/password per l’accesso a particolari file o cartelle del sito.
- Migliora la sicurezza, bloccando particolari IP o Referrer.
E molto altro ancora. Vediamo ora in dettaglio alcune di queste possibilità e come poterle gestire a livello pratico.
Impostare la pagina di errore 404, 403, 500, ecc.
Questa è la funzionalità più semplice da configurare, ma anche tra le più importanti. A differenza di qualche anno fa, ormai è diventato fondamentale dirottare tutti gli errori 404 ad una pagina creata ad-hoc.
Il motivo è semplice: gestire al meglio il disagio creato all’utente che sta cercando un contenuto particolare sul sito. Creando una pagina specifica, otteniamo infatti i seguenti vantaggi:
- L’utente capisce di essere ancora all’interno del nostro sito, perché graficamente ritrova gli elementi grafici che lo contraddistinguono
- Possiamo fornire delle alternative per poter trovare ciò che cerca (pulsante alla home, menu di navigazione o modulo di ricerca)
- Sdrammatizziamo la situazione negativa, cercando di strappare un sorriso all’utente.
Un chiaro esempio di tutto questo lo vediamo con il sito della Lego: Ironizzare e fornire un’alternativa. Il tutto facendo rimanere l’utente sul proprio sito.
Ma a livello tecnico come si fa? Niente di più facile! Vi basterà infatti inserire questa riga di codice in qualsiasi punto del vostro file .htaccess
ErrorDocument 404 /error_page/404.html
Se volete gestire anche altri tipi di errore, come ad esempio il 500 (Errore del server) o 403 (Accesso non consentito), potete ripetere la riga qui sopra indicando il relativo codice errore. Per maggiori informazioni, vi rimando all’articolo di Wikipedia sui codici di stato HTTP.
Regole di Redirect 301 e 302
Un’altra funzione molto utile in .htaccess è quella di poter reindirizzare le pagine. Questa tecnica risulta necessaria quando volete fare il restyling di un sito. Se infatti gli indirizzi dei contenuti sono cambiati, è vostro dovere reindirizzarli ai nuovi contenuti.
Se non lo fate vedrete, appena pubblicato il sito, che le visite subiranno un netto calo. Questo perché Google, non essendo ancora passato ad indicizzare le nuove pagine, fornisce i vecchi indirizzi che rimandano a pagine inesistenti (l’errore 404 di cui parlavamo poco fa).
Questo è il classico errore che commettono i Web Designer quando rifanno il sito di un cliente. E credetemi, esistono casi illustri di questo tipo di errore.
A livello tecnico per impostare il redirect di un contenuti dovete inserire il codice qui sotto:
Redirect 301 /vecchio-contenuto.html http://www.miosito.it/nuovo-contenuto.html
Come vedete dovete indicare la parola chiave “Redirect” seguito da un codice (301 o 302), seguito a sua volta dall’indirizzo del vecchio contenuto (escluso del nome dominio, perché potete reindirizzare ovviamente solo elementi del vostro sito) e infine l’indirizzo del nuovo contenuto (in questo caso si indica l’indirizzo completo di dominio, perché possiamo reindirizzare anche verso contenuti esterni al nostro sito).
Ovviamente dovrete ripetere questo codice su una nuova riga per ogni contenuto da reindirizzare.
Ma che codice usare? 301 o 302?
Anche in questo caso parliamo di codici di stato HTTP, e la scelta serve a specificare ai motori di ricerca il tipo di reindirizzamento stiamo facendo:
- 301: Indichiamo che è un redirect definitivo, e quindi il vecchio contenuto va de-indicizzato e il suo “PageRank” spostato sul nuovo contenuto
- 302: Indichiamo che è un redirect momentaneo, e che nel breve il contenuto ritornerà ad avere il vecchio url.
Abilitare la compressione GZIP
Entriamo ora su aspetti più tecnici, ma non preoccupatevi, a livello pratico sarà un semplice copia/incolla. Lo scopo qui è migliorare le performance di caricamento del nostro sito.
Prima di tutto cos’è la compressione GZIP? È uno strumento presente ormai in quasi tutti i Server che permette di comprimere le pagine web, i fogli di stile, i file JavaScript e tutti i contenuti. Riducendo il peso di questi file, sarà ancora più veloce il loro trasferimento. Si occuperà poi il browser dell’utente a decomprimerli prima di disegnare la pagina.
Questa features, permette in media un risparmio tra il 50% e l’80% del peso dei file, quindi capite che la sua presenza è indispensabile. Potete verificare già ora se un sito utilizza la compressione GZIP, cliccando su questo link.
A livello tecnico, per poter abilitare questa funzionalità, dovete copiare e incollare sul vostro file .htaccess il seguente codice, così com’è:
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
Abilitare la cache del browser
Un’altra tecnica per velocizzare il caricamento di un sito e allo stesso tempo diminuire il carico sul server, è quello di sfruttare la cache dei contenuti. In pratica, il browser, quando carica un sito web verifica se alcuni elementi, come fogli di stile, JS o contenuti multimediali, sono già stati scaricati in precedenza. In quel caso eviterà di richiederli nuovamente al server e li utilizzerà per renderizzare la pagina. Ecco, questo è il funzionamento di massima del Leverage Browser Caching.
Questa tecnica è così efficace che negli ultimi anni è impostata già a livello Client su diversi browser (in primis Chrome). Ma possiamo attivarla come funzionalità standard attraverso il nostro file .htaccess. Per farlo, vi basterà copiare e incollare il codice qui sotto.
<IfModule mod_expires.c> ExpiresActive On # Images ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" # Video ExpiresByType video/webm "access plus 1 year" ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/mpeg "access plus 1 year" # Fonts ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/woff "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" # CSS, JavaScript ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" # Others ExpiresByType application/pdf "access plus 1 month" ExpiresByType image/vnd.microsoft.icon "access plus 1 year" </IfModule>
Come potete vedere dal codice qui sopra, per ogni tipologia di contenuti viene definita una scadenza, in modo tale che se un contenuto in cache supera tale data, allora verrà comunque richiesto nuovamente al server. Questo perché si ipotizza che nel tempo il contenuto di questi elementi possa cambiare.
Aggiungere una protezione user/pass a determinati file
E come ultima funzionalità di oggi c’è la protezione dei file. Con .htaccess possiamo infatti proteggere dalla visualizzazione di particolari cartelle o file. Bloccando la visualizzazione agli utenti che non dispongano delle credenziali.
Prima di passare al codice da mettere in .htaccess, dobbiamo creare un ulteriore file di sistema: .htpasswd. Questo file infatti conterrà la user e password con cui potremo accedere al nostro file/cartella. Il file di norma va messo nella stessa cartella in cui è presente anche il file .htaccess, ma non è un obbligo.
Create quindi un file chiamato “.htpasswd” e al suo interno inserite il contenuto che vi genererà questo link (una volta inserite user e password scelte). Vi ritroverete con un contenuto simile a questo qui sotto:
gianni:{SHA}ieSV55Qc+eQOaYDRSha/AjzNTJE=Fatto questo, possiamo passare al codice da mettere in .htaccess.
Se volete proteggere l’intera cartella, dovrete mettere il seguente codice
AuthType Basic AuthName "Autenticazione richiesta" AuthUserFile /public_html/.htpasswd Require valid-user
Se invece volete proteggere uno specifico file, il codice che vi serve è questo (che in generale è molto simile al precedente).
<Files nome_file.html> AuthType Basic AuthName "Autenticazione richiesta" AuthUserFile /public_html/.htpasswd Require valid-user </Files>
Come potete notare, la differenza tra i 2 codici è la presenza di una specie di tag <Files> in cui è indicato il percorso relativo del file da proteggere.
In tutti è 2 i casi abbiamo comunque l’AuthName che è semplicemente il nome che comparirà nella finestra modale e l’AuthUSerFile in cui è indicato il percorso “assoluto” di dove si trova il file con le credenziali (l’htpasswd precedentemente creato). Il resto lasciatelo così com’è.
Conclusioni
Di sicuro le potenzialità di questo file di configurazione non si limitano solamente a quelle viste poco fa, ma diciamo che sono le più comuni e utili per la maggior parte degli utenti.. Fatene buon uso e ricordatevi che è un file molto potente, che permette di istruire e guidare il server, quindi fate attenzione. Perchè come diceva lo zio di Spiderman “da grandi poteri derivano grandi responsabilità”.
Ancora nessun commento