Meta Tags

postat acum 2 ani de Stefanescu Mihai in categorie 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>

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!