Meta Tags

Stefanescu Mihai 2 years ago HTML

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>

 

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

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord
Back to top
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.