Meta Tags

HTML | Stefanescu Mihai | 2020-10-11

HTML permite specificarea de metadata – informatii aditionale importante pentru un document. Elementul META poate fi folosit pentru a include perechi nume/valoare ce descriu proprietatile documentului HTML (autor, keyword-uri, etc).

Acest tag este unul gol, deci nu are tag de inchidere, iar toate informatiile necesare sunt pastrate in atribute.

Poti avea unul sau mai multe meta-tag-uri in document, in functie de informatiile pe care doresti sa le pastrezi, dar in general aceste meta tag-uri nu afecteaza in nici-un fel aspectul documentului.Adaugarea de Meta Tag-uri in documentPoti adauga meta date in pagina scriind tag-ul <meta> in interiorul headerului ( adica intre tag-urile <head> si </head>).Un meta tag poate avea si aceste atribute (pe langa cele principale):

Valoare	Descriere
name	Numele proprietatii (ex: keywords, description, author, revised, generator, etc).
content	Specifica valoarea proprietatii.
scheme	Specifica schema de interpretare a valorii date proprietatii (declarata in atributul content).
http-equiv	Folosit pentru raspunsurile headerelor http. De exemplu http-equiv poate fi folosit pentru a da refresh paginii sau pentru a seta un cookie (ex valori: content-type, expires, refresh si set-cookie).

Keyword-uri

Putem folosi tag-ul <meta> pentru a specifica keyword-uri importante pentru documentul respectiv ce mai tarziu vor fi folosite de motoarele de cautare pentru indexarea site-ului.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu Meta Tags</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Salutari!</p>
</body>
</html>

Description

Putem folosi tag-ul <meta> si pentru a da o mica descrie a documentului.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu Meta Tags</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Un mic tutorial despre Meta Tag-urile HTML" />
</head>
<body>
<p>Salutari!</p>
</body>
</html>

Revision Date

Putem folosi tag-ul <meta> si pentru a da informatii despre ultimul update al documentului.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu Meta Tags</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Un mic tutorial despre Meta Tag-urile HTML" />
<meta name="revised" content="Invata-Programare, 3/12/2014" />
</head>
<body>
<p>Salutari!</p>
</body>
</html>

Refresh

Putem folosi tag-ul meta pentru a seta o anumita durata de refresh a unei pagini.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu Meta Tags</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Un mic tutorial despre Meta Tag-urile HTML" />
<meta name="revised" content="Invata-Programare, 3/12/2014" />
<meta name="refresh" content="5" />
</head>
<body>
<p>Salutari!</p>
</body>
</html>

Redirect

Putem folosi tag-ul <meta> si pentru a redirectiona utilizatorii pe alta pagina:

<!DOCTYPE html>
<html>
<head>
<title>Exemplu Meta Tags</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Un mic tutorial despre Meta Tag-urile HTML" />
<meta name="revised" content="Invata-Programare, 3/12/2014" />
<meta name="refresh" content="5" url='http://www.invata-programare.ro/'/>
</head>
<body>
<p>Salutari!</p>
</body>
</html>

Codul de mai sus face redirest dupa 5 secunde.

Setare Cookie

Cookie-urile sunt date stocate in calculatorul utilizatorului si sunt folosite pentru a schimba informatii intre web browser si web server.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu Meta Tags</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Un mic tutorial despre Meta Tag-urile HTML" />
<meta name="revised" content="Invata-Programare, 3/12/2014" />
<meta http-equiv="cookie" content="userid=73; expires=Wednesday, 03-Aug-15 12:34:59 GMT;" />
</head>
<body>
<p>Salutari!</p>
</body>
</html>

Nume Autor

Tot din tag-ul <meta> putem seta numele autorului documentului.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu Meta Tags</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Un mic tutorial despre Meta Tag-urile HTML" />
<meta name="author" content="Stefanescu Mihai" />
</head>
<body>
<p>Salutari!</p>
</body>
</html>

Set de Caractere

Putem folosi tag-ul <meta> pentru a seta setul de caractere. In mod default browserele folosesc ISO-8859-1 (Latin1) .

<!DOCTYPE html>
<html>
<head>
<title>Exemplu Meta Tags</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Un mic tutorial despre Meta Tag-urile HTML" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Salutari!</p>
</body>
</html>

Articolul precedent

Articolul urmator

Imi place ce faci aici

Daca iti place ce fac aici imi poti cumpara o cafea

Stefanescu Mihai
Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.

Get in touch

Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum.

Posteaza un comentariu

Comentarii

Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!

🔖 Bookmarks ⊞

✨ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌪️ Discord ⊞