Apa itu meta tag HTML?

Meta tag HTML adalah elemen di bagian yang menyediakan metadata tentang halaman. Dibaca oleh mesin pencari, media sosial, dan browser.

Open Graph (OG) adalah protokol yang dikembangkan Facebook yang memungkinkan halaman web menjadi objek kaya saat dibagikan di media sosial.

Apa itu Twitter Cards?

Twitter Cards memungkinkan melampirkan pengalaman media yang kaya pada tweet. Tipe summary_large_image paling populer.

URL kanonik menentukan versi halaman yang disukai ketika beberapa URL menunjuk ke konten yang sama.

Berapa panjang judul dan deskripsi meta saya?

Judul meta harus kurang dari 60 karakter. Deskripsi meta harus 120-155 karakter.

Generator Meta Tag

Menghasilkan meta tag HTML untuk SEO, Open Graph, dan Twitter Cards.

Judul

18/60

Penulis

Deskripsi

50/155

Kata Kunci

Robots

URL Kanonik

URL Gambar OG

Tipe Kartu Twitter

Pratinjau Sosial

OG Image: https://example.com/og-image.png

https://example.com/page

My Awesome Website

A short description of this page for SEO purposes.

HTML yang Dihasilkan

<!-- Primary Meta Tags -->
<title>My Awesome Website</title>
<meta name="title" content="My Awesome Website" />
<meta name="description" content="A short description of this page for SEO purposes." />
<meta name="keywords" content="web, tools, free" />
<meta name="author" content="Author Name" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/page" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="My Awesome Website" />
<meta property="og:description" content="A short description of this page for SEO purposes." />
<meta property="og:image" content="https://example.com/og-image.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://example.com/page" />
<meta property="twitter:title" content="My Awesome Website" />
<meta property="twitter:description" content="A short description of this page for SEO purposes." />
<meta property="twitter:image" content="https://example.com/og-image.png" />

Tentang alat ini

Meta tag adalah instruksi tak terlihat yang Anda tambahkan ke HTML situs web Anda untuk memberitahu mesin pencari, platform media sosial, dan browser tentang apa halaman Anda. Mereka mengontrol bagaimana situs Anda muncul dalam hasil pencarian Google dan bagaimana tampilannya ketika seseorang membagikan tautan Anda di Facebook, Twitter, atau LinkedIn. Tanpa meta tag yang tepat, mesin pencari mungkin salah menafsirkan konten Anda, dan tautan Anda akan terlihat biasa saat dibagikan di media sosial.

Pembuat Meta Tag ini memungkinkan Anda membuat dengan cepat semua meta tag penting yang dibutuhkan situs web Anda: judul, deskripsi, kata kunci, penulis, direktif robot, dan URL kanonik. Ini juga menghasilkan tag Open Graph untuk mengontrol tampilan halaman Anda di media sosial dan Twitter Cards untuk meningkatkan tweet. Cukup isi informasi halaman Anda, salin kode HTML yang dihasilkan, dan tempel ke bagian <head> halaman Anda. Pratinjau langsung menunjukkan dengan tepat bagaimana halaman Anda akan muncul ketika dibagikan di platform sosial.

Pengembang web, pembuat konten, dan spesialis SEO menggunakan alat ini untuk menyederhanakan alur kerja mereka dan menghindari kesalahan sintaks. Baik Anda meluncurkan blog baru, mengoptimalkan halaman produk e-commerce, atau memastikan konten duplikat tidak merusak peringkat Anda, pembuat ini menghemat waktu dan memastikan konsistensi di seluruh situs Anda.

Pertanyaan yang Sering Diajukan

Implementasi Kode

def generate_meta_tags(
    title: str,
    description: str,
    url: str,
    image: str = "",
    site_name: str = "",
    twitter_handle: str = "",
    locale: str = "en_US",
) -> str:
    lines = []
    lines.append(f'<title>{title}</title>')
    lines.append(f'<meta name="description" content="{description}">')
    # Open Graph
    lines.append(f'<meta property="og:title" content="{title}">')
    lines.append(f'<meta property="og:description" content="{description}">')
    lines.append(f'<meta property="og:url" content="{url}">')
    lines.append(f'<meta property="og:type" content="website">')
    lines.append(f'<meta property="og:locale" content="{locale}">')
    if site_name:
        lines.append(f'<meta property="og:site_name" content="{site_name}">')
    if image:
        lines.append(f'<meta property="og:image" content="{image}">')
        lines.append(f'<meta property="og:image:width" content="1200">')
        lines.append(f'<meta property="og:image:height" content="630">')
    # Twitter Card
    card = "summary_large_image" if image else "summary"
    lines.append(f'<meta name="twitter:card" content="{card}">')
    lines.append(f'<meta name="twitter:title" content="{title}">')
    lines.append(f'<meta name="twitter:description" content="{description}">')
    if twitter_handle:
        lines.append(f'<meta name="twitter:site" content="{twitter_handle}">')
    if image:
        lines.append(f'<meta name="twitter:image" content="{image}">')
    return "\n".join(lines)

print(generate_meta_tags(
    title="My Page",
    description="A great page.",
    url="https://example.com",
    image="https://example.com/og.png",
    site_name="Example",
    twitter_handle="@example",
))

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.