Skip to content

Cum să folosești meta tag-uri HTML — ghid SEO și social

DodaTech Updated 2025-01-15 2 min read

In this tutorial, you'll learn about Cum să folosești meta tag. We cover key concepts, practical examples, and best practices.

Meta tag-urile HTML oferă informații esențiale despre pagina ta — motorarelor de căutare, browserelor și rețelelor sociale — fără a fi vizibile direct utilizatorului.

The Problem

Fără meta tag-uri corect configurate, pagina ta nu se afișează corect pe mobil, nu apare bine în căutări și arată prost când e partajată pe Facebook, Twitter sau LinkedIn.

The Wrong Way

<head>
  <title>Pagina mea</title>
</head>

Probleme: Fără viewport, pagina nu e responsive. Fără meta description, Google afișează text aleator. Fără OG tags, link-ul partajat nu are imagine sau descriere.

The Right Way

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ghid HTML Meta Tag-uri | DodaTech</title>
  <meta name="description" content="Ghid complet despre meta tag-urile HTML: viewport, description, OG tags, charset și cum optimizezi SEO-ul paginii tale.">

  <!-- Open Graph -->
  <meta property="og:title" content="Ghid HTML Meta Tag-uri">
  <meta property="og:description" content="Optimizează-ți pagina cu meta tag-uri corecte.">
  <meta property="og:image" content="https://dodatech.com/og-image.jpg">
  <meta property="og:url" content="https://dodatech.com/ghid/html-meta">
  <meta property="og:type" content="article">

  <!-- Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Ghid HTML Meta Tag-uri">
</head>

Step-by-Step Fix

1. Setează charset-ul corect

<meta charset="UTF-8">

Fără asta, caracterele românești (ă, î, ș, ț) se pot afișa greșit.

2. Activează viewport-ul pentru mobil

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Scrie o meta description optimizată

<meta name="description" content="Învață HTML rapid cu ghiduri practice DodaTech. Exemple, cod și explicații pas cu pas.">

4. Adaugă Open Graph tags

<meta property="og:title" content="Titlu pentru rețele sociale">
<meta property="og:image" content="URL imagine 1200x630px">

Prevention Tips

  • Meta description trebuie să aibă 140–160 caractere
  • OG image trebuie să fie minim 1200x630px
  • Nu bloca indexarea cu noindex decât intenționat
  • Adaugă lang="ro" pe tag-ul <html> pentru limba română

Common Mistakes

  1. Fără viewport meta — pagina nu e responsive pe mobil și pierzi trafic
  2. Meta description lipsă sau duplicată — Google alege text aleator din pagină
  3. Fără OG tags — partajările pe rețele sociale nu au imagine sau descriere
  4. Charset greșit — diacriticele românești se afișează ca ă în loc de ă
  5. Keywords meta depășit — meta name="keywords" nu mai e folosit de Google de ani buni

FAQ

### Ce face meta viewport?

Controlează modul în care pagina se scalează pe dispozitive mobile. Fără el, pagina apare mică și trebuie mărită cu degetele.

De ce am nevoie de OG tags?

Open Graph tags controlează cum arată link-ul tău când e partajat pe Facebook, LinkedIn, Slack și alte platforme.

Cât de lungă trebuie să fie meta description?

Între 140 și 160 de caractere. Peste 160, Google o trunchiază în rezultatele căutării.

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu HTML pentru productivitate și securitate sporită.

← Previous Cum să creezi liste în HTML — ghid complet Next → Cum să folosești elemente HTML semantice — ghid practic

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Quick Fix