`Ghidul Complet al Meta Tagurilor pentru SEO & Social Media (Open Graph & Twitter)` în HTML

Configurarea completă a antetului <head> pentru SEO de top și distribuire socială: viewport, canonical, robots, og:title, og:image, twitter:card, theme-color și favicon SVG.

Sintaxă tag

<meta property="og:title" content="..."> <meta name="twitter:card" content="summary_large_image">

Secțiunea <head> a unui document HTML conține metadatele care dictează modul în care pagina este interpretată de motoarele de căutare (Google, Bing), previzualizată pe rețelele sociale (Facebook, LinkedIn, X/Twitter, WhatsApp) și randată pe dispozitive mobile.

Antetul <head> complet de producție pentru SEO și Social Sharing

<head>
    <!-- 1. Fundamente de randare și codare -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 2. SEO Primar -->
    <title>Ghid Complet HTML5: Taguri și Exemple | dexblog.ro</title>
    <meta name="description" content="Învață HTML5 de la zero: structură semantică, formulare accesibile, Core Web Vitals și exemple de cod explicate în limba română.">
    <link rel="canonical" href="https://www.dexblog.ro/invata/html/">
    <meta name="robots" content="index, follow">

    <!-- 3. Protocolul Open Graph (Facebook, LinkedIn, Discord, WhatsApp) -->
    <meta property="og:site_name" content="Dexblog">
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://www.dexblog.ro/invata/html/">
    <meta property="og:title" content="Ghid Complet HTML5: Taguri și Exemple">
    <meta property="og:description" content="Învață HTML5 cu exemple practice și cod curat explicat în limba română.">
    <meta property="og:image" content="https://www.dexblog.ro/imagini/og-html5.jpg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:locale" content="ro_RO">

    <!-- 4. Twitter Cards (X) -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Ghid Complet HTML5: Taguri și Exemple">
    <meta name="twitter:description" content="Ghidul complet de HTML5 în limba română.">
    <meta name="twitter:image" content="https://www.dexblog.ro/imagini/og-html5.jpg">

    <!-- 5. Experiență mobilă & PWA -->
    <meta name="theme-color" content="#3858e9">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

Dimensiunile Optime pentru Imaginea Open Graph (og:image)

Pentru ca previzualizarea pe Facebook, LinkedIn și WhatsApp să apară cu o imagine mare și clară (și nu un pătrățel mic tăiat), imaginea trebuie să aibă rezoluția exactă de 1200 × 630 pixeli (proporție de aspect 1.91:1) și o dimensiune a fișierului sub 1 MB.