Recomandări cheie
- Meta-etichetele furnizează informații esențiale despre o pagină web, fiind utile pentru motoarele de căutare, navigatoare și diverse servicii web.
- Printre tipurile fundamentale se numără meta-descrierea, Open Graph, fereastra de vizualizare și etichetele HTTP-echiv.
- Meta-etichetele personalizate oferă adaptabilitate, dar necesită documentare detaliată și o planificare riguroasă.
Împreună cu titlul paginii și scripturile/foile de stil folosite, secțiunea <head> a unui document HTML poate conține meta-etichete. Acestea joacă un rol crucial în SEO, accesibilitate și performanța generală a site-ului.
Descoperiți cum să folosiți meta-etichetele și aflați mai multe despre tipurile de informații pe care le pot oferi.
Meta-etichetele sunt elemente care adaugă informații suplimentare despre o pagină web. Deși navigatoarele nu afișează direct aceste metadate, diverse instrumente le pot folosi în diferite scopuri, cum ar fi motoarele de căutare, navigatoarele și alte servicii web.
Informațiile furnizate prin meta-etichete contribuie la îmbunătățirea poziționării în motoarele de căutare, la receptivitatea și accesibilitatea site-ului și la modul în care paginile dvs. apar pe platformele de socializare.
Meta-etichetele sunt etichete cu auto-închidere; nu există </meta> deoarece nu au conținut propriu. Toate datele sunt specificate prin atribute. Puteți introduce meta-etichete în secțiunea <head> a fișierului HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Acest exemplu simplu de HTML conține două meta-etichete în secțiunea head. Acestea oferă detalii despre setul de caractere folosit (UTF-8) și despre fereastra de vizualizare.
Majoritatea meta-etichetelor folosesc o combinație de atribute pentru a stoca datele.
- name și content: atributul „name” acționează ca o etichetă, în timp ce atributul „content” păstrează informațiile asociate acelei etichete. Acest sistem flexibil și extensibil permite stocarea oricăror metadate necesare.
- property: Acest atribut este uneori folosit ca alternativă la „name” și are un scop similar.
- http-equiv: semnifică „echivalent HTTP” și specifică un antet HTTP pentru valoarea indicată în atributul „content”.
- schema: Folosit cu „name”, acest atribut definește tipul de date din atributul „content”.
Următoarele meta-etichete sunt frecvent acceptate de diverse browsere și servicii web.
Meta-eticheta pentru descriere
Acest fragment de până la 155 de caractere rezumă conținutul unei pagini. Motoarele de căutare îl afișează de obicei sub titlul paginii și URL. Este important să oferiți o descriere concisă și relevantă pentru a atrage utilizatorii să facă clic pe link și să acceseze pagina.
<meta name="description" content="O descriere succintă a paginii dvs.">
Meta-etichete Open Graph
Aceste etichete sunt folosite pe scară largă de Facebook și alte platforme de socializare. Acestea folosesc informațiile din aceste etichete pentru a îmbunătăți prezentarea link-urilor către pagina dvs. atunci când utilizatorii le distribuie. Meta-etichetele Open Graph includ atribute precum og:title, og:description și og:image:
<meta property="og:title" content="Titlul paginii dvs."> <meta property="og:description" content="O scurtă descriere a paginii dvs."> <meta property="og:image" content="URL-ul unei imagini relevante">
Meta-etichete SEO
Aceste etichete furnizează informații pentru motoarele de căutare și contribuie la îmbunătățirea clasamentului paginii dvs. Sunt considerate elemente de bază în practicile SEO. Ele includ atribute precum „robots”, „author” și multe altele. Chiar dacă importanța lor a scăzut de-a lungul timpului, este totuși recomandat să le includeți în documentul HTML.
<meta name="robots" content="index, follow"> <meta name="author" content="Numele dvs.">
Meta-eticheta Viewport
Meta-eticheta viewport este fundamentală în designul web adaptabil (responsive). Aceasta comunică browserului să ajusteze afișajul paginii web în funcție de lățimea dispozitivului, asigurând un aspect corect și o lizibilitate optimă pe dispozitivele mobile.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Meta-etichete HTTP-Equiv
Aceste meta-etichete sunt vitale pentru controlul anumitor aspecte ale modului în care browserele și serverele procesează paginile web. Ele includ atribute precum „refresh” și „X-UA-Compatible”. Chiar dacă impactul direct asupra SEO poate varia, acestea joacă un rol important în determinarea comportamentului și a compatibilității paginii.
<meta http-equiv="refresh" content="5;url=https://example.com"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
Nu veți folosi toate aceste etichete în fiecare proiect, dar este important să înțelegeți bine tipurile disponibile. Utilizarea meta-etichetelor aduce beneficii și în îmbunătățirea structurii documentelor HTML.
Meta-etichetele oferă flexibilitate deoarece:
- Aveți libertatea de a utiliza orice „name” doriți pentru a stoca informații.
- Navigatoarele nu vor afișa conținutul, dar acesta va fi vizibil în codul sursă al paginii.
Iată un exemplu de meta-etichetă personalizată:
<meta name="target-audience" content="dezvoltatori">
În acest exemplu, eticheta personalizată indică publicul țintă al conținutului, specificând că se adresează dezvoltatorilor.
Meta-etichetele personalizate oferă o modalitate de a extinde setul standard de etichete recunoscute în mod obișnuit. Cu toate acestea, este esențial să documentați cu atenție etichetele personalizate pe care le folosiți și să înțelegeți cum le veți utiliza. Alte servicii nu le vor folosi sau recunoaște în mod implicit, deci cel mai probabil va trebui să scrieți cod propriu pentru a le procesa.