Cuprins
Recomandări cheie
- Metaetichetele oferă informații vitale despre o pagină web pentru motoarele de căutare, browsere și servicii web.
- Tipurile esențiale includ metadescriere, grafic deschis, fereastră de vizualizare și etichete HTTP-echiv.
- Metaetichetele personalizate oferă flexibilitate, dar necesită o documentare și o planificare atentă.
Alături de titlul paginii dvs. și de scripturile și foile de stil pe care le utilizează, o secțiune de cap HTML poate include metaetichete. Acestea sunt vitale pentru SEO, accesibilitate și performanța generală a site-ului.
Aflați cum să utilizați metaetichetele și aflați despre informațiile pe care le pot furniza.
Metaetichetele sunt elemente care oferă informații suplimentare despre o pagină web. Browserele nu afișează direct aceste metadate, dar orice instrument le poate folosi în diverse scopuri. Acestea includ motoarele de căutare, browserele și alte servicii web.
Datele pe care le furnizați în meta-etichete ajută la îmbunătățirea clasamentului în motoarele de căutare, contribuie la receptivitatea și accesibilitatea site-ului și îmbunătățește afișarea paginilor dvs. pe rețelele sociale.
Meta tag-urile sunt etichete cu auto-închidere; nu există deoarece nu includ niciun conținut. Acestea conțin toate datele lor în atribute. Puteți adăuga metaetichete la secțiunea de cap 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 de boilerplate HTML conține două meta-etichete în secțiunea head. Ele furnizează informații despre setul de caractere (UTF-8) și, respectiv, fereastra de vizualizare.
Majoritatea metaetichetelor folosesc o combinație a următoarelor atribute pentru a-și conține datele.
- nume și conținut: atributul nume este ca o etichetă, în timp ce atributul conținut stochează datele asociate etichetei respective. Aceasta oferă un sistem flexibil și extensibil pentru a stoca orice metadate aveți nevoie.
- proprietate: Acest atribut este uneori folosit ca alternativă la nume și servește aproape același scop.
- http-equiv: Pentru „echivalent HTTP”, acest atribut definește un antet HTTP pentru valoarea specificată în atributul conținut.
- schema: Acest atribut, folosit cu nume, definește tipul de date din atributul conținut.
Veți găsi că următoarele meta-etichete sunt acceptate de obicei de diverse servicii web și browsere.
Meta Description Tag
Acest fragment de până la 155 de caractere rezumă conținutul unei pagini. Motoarele de căutare îl afișează adesea sub titlul paginii și URL. Este esențial să oferiți o descriere concisă și precisă pentru a încuraja utilizatorii să facă clic pe link și să vă viziteze pagina.
<meta name="description" content="A brief description of your page">
Deschideți metaetichete grafice
Facebook și alte platforme de social media folosesc în mod semnificativ aceste etichete. Ei folosesc informațiile din aceste etichete pentru a îmbunătăți prezentarea link-urilor către pagina dvs. atunci când utilizatorii o distribuie. Metaetichetele Open Graph includ atribute precum og:title, og:description și og:image:
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief description of your page">
<meta property="og:image" content="URL of a related image">
Etichete meta SEO
Aceste etichete oferă informații pentru motoarele de căutare și pot ajuta la îmbunătățirea poziției paginii dvs. De asemenea, sunt incluse pe lista celor mai bune practici SEO esențiale. Acestea includ atribute precum roboți, autor și multe altele. Deși importanța acestor etichete s-a redus în timp, este totuși esențial să le includeți în documentul dvs. HTML.
<meta name="robots" content="index, follow">
<meta name="author" content="Your Name">
Metaetichetă Viewport
Metaeticheta viewport este un element esențial în designul web responsive. Spune browserului să ajusteze aspectul paginii web în funcție de lățimea dispozitivului, asigurându-se că conținutul este afișat corect și este lizibil pe dispozitivele mobile.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Meta-etichete HTTP-Equiv
Aceste meta-etichete sunt esențiale pentru controlul aspectelor specifice ale modului în care browserele și serverele procesează paginile web. Acestea includ atribute precum refresh și X-UA-Compatible. Deși impactul lor direct asupra SEO poate varia, ele joacă un rol crucial în influențarea comportamentului paginii și a compatibilității.
<meta http-equiv="refresh" content="5;url=https://example.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Nu le veți folosi pe toate deodată în proiectele dvs., dar este totuși important să înțelegeți bine diferitele metaetichete disponibile. De asemenea, utilizarea meta-etichetelor oferă beneficii în îmbunătățirea organizării documentelor HTML.
Metaetichetele sunt flexibile deoarece:
- Sunteți liber să utilizați un nume la alegere pentru a stoca orice date doriți.
- Browserele nu își vor afișa conținutul, deși acesta va fi întotdeauna vizibil în sursa paginii.
Iată un exemplu de metaetichetă personalizată:
<meta name="target-audience" content="developers">
În acest exemplu, eticheta personalizată specifică publicul țintă al conținutului, indicând că vizează dezvoltatorii.
Metaetichetele personalizate oferă o modalitate de a extinde setul standard de etichete care sunt recunoscute pe scară largă. Cu toate acestea, este important să documentați cu atenție etichetele personalizate pe care le utilizați și să înțelegeți bine cum le veți folosi. Alte servicii nu le vor folosi sau nu le vor recunoaște în mod implicit, așa că probabil veți scrie propriul cod la un moment dat pentru a le procesa.