Configurați

Completați detaliile paginii. Lăsați câmpurile Open Graph și Twitter goale pentru a moșteni valorile din câmpurile de bază.

SEO de bază

URL-ul paginii

Titlul paginii

0/60

Meta descriere

0/160

Limbă (html lang)

Robots

Autor

Culoare temă

Open Graph

Tip OG

Nume site

Titlu OG

Descriere OG

URL imagine OG

Twitter Card

Tip card

Identificator Twitter/X

URL imagine Twitter

HTML generat

Copiați aceste tag-uri în elementul head al paginii dumneavoastră.

head-meta.html

<!-- Basic SEO -->
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#0F172A">

<!-- Open Graph -->
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">

10 linii

Robotul tău robots.txt este gata — dar e doar unul din 99+ semnale SEO.

Rulează un audit gratuit →

Ce sunt meta tag-urile și de ce contează?

Meta tag-urile sunt elemente HTML în interiorul <head>-ului unei pagini care descriu documentul mașinilor: motoare de căutare, platforme sociale, browsere și sisteme de operare. Corpul paginii este ceea ce văd oamenii; head-ul este ceea ce citesc boții, crawlerele și integrările de platformă. Meta tag-urile decid cum este indexată pagina ta, cum apare în link-urile distribuite, ce culoare ia interfața browserului mobil și dacă dispozitivul interpretează numerele de telefon și adresele de email ca linkuri pe care se poate da tap.

Majoritatea meta tag-urilor se încadrează în unul din patru roluri. Tag-urile tehnice precum charset și viewport informează browserul cum să parseze și să așeze documentul; fără ele, randarea se strică în moduri previzibile. Tag-urile SEO precum title, description, canonical, robots și hreflang informează motoarele de căutare ce este pagina și cum să o gestioneze în indexul lor. Tag-urile sociale precum familia og: din Open Graph și familia twitter: din Twitter Card controlează cum se afișează pagina când URL-ul ei este lipit într-un chat, postare sau link distribuit. Tag-urile de branding și UX precum theme-color, apple-touch-icon și format-detection controlează modul în care pagina se integrează cu sistemul de operare gazdă.

Istoria este stratificată. Specificația originală HTML 4 a definit <meta> pentru perechi generice de tip nume-valoare. Open Graph a fost publicat de Facebook în 2010 pentru a oferi platformelor de distribuire o modalitate standard de a extrage o previzualizare curată. Twitter Card a urmat în 2012 cu propriul său namespace, deoarece Open Graph singur nu acoperea variațiile de produs ale Twitter. Apple, Microsoft și comunitatea PWA și-au adăugat propriile familii de tag-uri pentru icoane, interfață mobilă și îmbunătățire progresivă. Rezultatul este o secțiune head care poate ajunge la patruzeci de linii pe o pagină bine etichetată, fiecare tag servind un consumator specific.

Impactul în lumea reală se acumulează. Un canonical lipsă împarte echitatea de link-uri între URL-uri duplicate. Un og:image lipsă sau greșit transformă link-urile distribuite în blocuri fără stil care sunt derulate rapid. Un viewport lipsă face ca pagina să se redea la lățimea desktop-ului pe un telefon, declanșând penalizarea de compatibilitate mobilă a Google și deteriorând Core Web Vitals. Niciuna dintre acestea nu este catastrofală în sine, dar împreună lasă trafic și engagement semnificativ pe masă.

Cum se folosește acest generator

Formularul este grupat pe familii de tag-uri, astfel încât poți completa doar secțiunile de care ai nevoie fără să derulezi prin câmpuri irelevante.

Pasul 1 — Completează nucleul SEO. Introdu titlul paginii, meta descrierea, URL-ul canonical și limba. Aceste patru câmpuri acoperă tag-urile care afectează pozițiile în căutare și rata de click, astfel că și o configurare minimă de meta ar trebui să le includă.

Pasul 2 — Adaugă previzualizări sociale. Setează titlul Open Graph, descrierea și URL-ul imaginii. Generatorul le copiază implicit atât în tag-urile og:, cât și în cele twitter:, deoarece 90% din pagini vor același conținut pe ambele. Suprascrie câmpurile Twitter numai când ai o variantă specifică Twitter.

Pasul 3 — Copiază output-ul și lipește-l în <head>. Generatorul emite HTML5 valid, ordonat cu charset și viewport primele, apoi tag-uri SEO, apoi tag-uri sociale, apoi branding. Lipește blocul înaintea oricăror foi de stil externe sau scripturi pentru a împiedica resursele care blochează randarea să întârzie informațiile meta.

Taxonomia completă a meta tag-urilor

O pagină modernă beneficiază de mult mai multe tag-uri decât titlul și descrierea pe care le arată majoritatea tutorialelor. Mai jos este ordinea de prioritate pentru un head curat și complet.

Tehnice (trebuie să apară primele)

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

charset trebuie să apară în primii 1024 de octeți ai documentului. Dacă apare mai târziu, browserul poate fi deja început parsarea într-o codificare implicită și trebuie să repornească, costând timp și riscând erori de afișare cu caractere non-ASCII. viewport controlează modul în care browserele mobile calculează layout-ul inițial. Fără el, dispozitivele mobile redau pagina la lățimea desktop-ului și măresc pentru a se potrivi, deteriorând țintele de atingere și declanșând penalizarea de compatibilitate mobilă pe care Google o aplică din actualizarea mobilă din 2015.

Nucleul SEO

<title>Cuvânt Cheie Principal — Brand</title>
<meta name="description" content="Un rezumat de 150-160 de caractere care include cuvântul cheie și un apel la acțiune.">
<link rel="canonical" href="https://example.com/cale-pagina">
<meta name="robots" content="index, follow">
<link rel="alternate" hreflang="en" href="https://example.com/en/pagina">
<link rel="alternate" hreflang="es" href="https://example.com/es/pagina">

Tag-ul title este cel mai ponderat semnal SEO on-page și titlul snippet-ului SERP. Descrierea nu afectează direct clasamentul, dar stimulează rata de click. Canonical dezambiguizează URL-urile duplicate create de parametrii de tracking, ordinile de sortare sau paginare. Tag-ul meta robots suprascrie robots.txt pentru pagina specifică atunci când vrei să permiți crawling-ul, dar să blochezi indexarea. Hreflang informează Google ce variantă de limbă și regiune să servească utilizatorilor în diferite căutări și este necesar pentru ca SEO-ul internațional să funcționeze corect.

Cascada titlului

Trei câmpuri de titlu diferite controlează trei suprafețe diferite. Tag-ul <title> completează snippet-ul SERP și tab-ul browserului. <meta property="og:title"> completează cardurile de previzualizare Facebook, LinkedIn și Slack. <meta name="twitter:title"> completează Twitter Card. În mod implicit, setează-le pe toate trei la același șir de caractere. Suprascrie og:title când vrei o versiune mai lungă, optimizată pentru distribuire (Facebook permite aproximativ 88 de caractere înainte de trunchiere, mult mai mult decât 60 ale Google). Suprascrie twitter:title când vrei text specific platformei pentru audiențele native Twitter.

Open Graph (distribuire)

<meta property="og:type" content="website">
<meta property="og:title" content="Titlul paginii pentru distribuiri sociale">
<meta property="og:description" content="Descriere pentru distribuiri sociale.">
<meta property="og:url" content="https://example.com/pagina">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Exemplu">
<meta property="og:locale" content="ro_RO">

Dimensiunile imaginii contează. Facebook, LinkedIn și majoritatea celorlalți consumatori Open Graph se așteaptă la o imagine de 1200 pe 630 la un raport de aspect 1.91:1. Trimiterea unei imagini mai mici determină platforma să retrogradeze la un layout cu miniatură mică în loc de un card hero. Trimiterea unei imagini cu raportul de aspect greșit cauzează decupare care taie adesea text sau fețe. Indicii de lățime și înălțime permit crawlerelor să rezerve spațiu și să încarce asincron, evitând o schimbare de layout în previzualizare.

Twitter Card (distribuire)

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Titlul paginii pentru Twitter">
<meta name="twitter:description" content="Descriere pentru Twitter.">
<meta name="twitter:image" content="https://example.com/twitter.png">
<meta name="twitter:site" content="@handleultau">

Alege summary_large_image pentru un layout hero (majoritatea paginilor de marketing și articolelor) și summary pentru un card compact (conținut ușor). Twitter preferă o imagine de 1200 pe 675, puțin mai lată decât cei 1200 pe 630 ai Open Graph. Dacă reutilizezi imaginea Open Graph, rezultatul funcționează în continuare, dar o imagine specifică Twitter umple cardul fără letterboxing.

Branding și UX (adesea uitate)

<meta name="theme-color" content="#0F172A">
<meta name="color-scheme" content="light dark">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

theme-color colorează chrome-ul browserului pe Android și bara de stare în PWA-uri. color-scheme informează browserul să redea scrollbar-urile și controalele formularelor în modul întunecat sau luminos corespunzător. format-detection cu telephone=no împiedică iOS Safari să auto-linkuiască șiruri de cifre în formă de număr de telefon ca linkuri tel:, ceea ce este critic pentru numerele de factură, ID-urile de comandă și orice număr de șapte până la unsprezece cifre care nu este de fapt un telefon. Link-urile de icoane acoperă favicons-urile tab-ului desktop, icoanele ecranului de pornire iOS și icoanele adaptive Android.

Greșeli comune care afectează SEO și distribuirea

Canonical greșit care indică spre o altă pagină. Un tag canonical care indică spre un URL diferit îi spune Google că URL-ul curent este un duplicat și consolidează semnalele spre țintă. Paginile care ar trebui să se claseze dispar din căutare deoarece canonical-ul lor indică în altă parte din greșeală. Întotdeauna auto-referențiază dacă pagina nu este cu adevărat un duplicat.

og:image lipsă sau prea mică. Un og:image lipsă permite platformei să aleagă ceva arbitrar din corp, adesea un logo sau o iconiță. O imagine prea mică (sub 600 de pixeli lățime) degradează previzualizarea la un layout cu miniatură mică. Ambele distrug engagement-ul pe link-urile distribuite și sunt ușor de remediat.

Descrieri identice pe mai multe pagini. Descrierile șablon care variază doar prin titlul paginii semnalează conținut cu efort redus. Google le suprascrie de rutină cu text din corp, ceea ce înseamnă că descrierea pe care ai petrecut timp s-o scrii nu apare niciodată. Fiecare pagină are nevoie de o descriere unică legată de intenția acelei pagini.

Charset declarat târziu. Un tag charset de sub primii 1024 de octeți declanșează o repornire a codificării în unele browsere. Rezultatul este o scurtă clipire de caractere greșit codate înainte ca pagina să se redeseneze. Pune întotdeauna <meta charset="utf-8"> ca prim copil al head-ului.

Meta robots și antetul X-Robots-Tag nesincronizate. Când antetul HTTP setează noindex și meta tag-ul setează index, directiva mai restrictivă câștigă și pagina nu este indexată. Auditează ambele straturi într-o singură trecere când o pagină nu apare misterios în căutare.

Theme-color setat la alb pe un site cu branding întunecat. Comportamentul implicit al browserului colorează bara de adrese în alb pe majoritatea dispozitivelor Android. Un site cu un header albastru-închis și o bară de adrese albă arată stricat pe mobil. Setarea theme-color la culoarea brandului este o modificare de o singură linie care îmbunătățește semnificativ calitatea percepută.

Twitter Card fără site sau creator. Omiterea twitter:site și twitter:creator elimină linia de atribuire din card și împiedică Twitter să asocieze distribuirile cu contul tău. Ambele câmpuri acceptă un handle Twitter incluzând @ și ar trebui setate pe fiecare pagină.

Cazuri limită pe care nimeni nu le menționează

Meta tag-urile interacționează cu anteturile de răspuns HTTP, iar anteturile câștigă de obicei. X-Robots-Tag: noindex în răspuns suprascrie orice <meta name="robots" content="index"> din pagină. Anteturile Content-Security-Policy pot bloca încărcarea og:image în crawlerul de previzualizare, mai ales când imaginea se află pe un domeniu diferit. Referrer-Policy setat la no-referrer elimină referrer-ul pe care crawlerele Open Graph îl folosesc uneori pentru a verifica cererea, determinând unele platforme să refuze redarea previzualizării. Când meta tag-urile par corecte în sursă, dar pagina nu se comportă conform așteptărilor, auditează mai departe anteturile de răspuns.

Generator Meta Tags Gratuit