Generator Tag Open Graph

Isi judul, deskripsi, URL kanonik, gambar pratinjau, dan og:type, lalu generator ini menuliskan tag <meta> Open Graph yang sesuai, siap ditempel ke <head> halaman Anda. Kolom yang Anda biarkan kosong cukup dihilangkan, dan tanda kutip serta ampersand pada teks Anda di-escape agar markup tetap valid. Generator menulis lima properti og: inti saja, bukan tag Twitter Card atau tag artikel.

Cara membuat tag OG Anda

  1. 1

    Pilih og:type

    website untuk halaman utama, article untuk postingan, product untuk halaman toko, video.other untuk sematan. Kolom ini teks bebas, jadi nilai og:type valid apa pun bisa dipakai.

  2. 2

    Isi kolom inti

    Judul, deskripsi, URL kanonik, dan URL gambar absolut. Kolom apa pun yang Anda biarkan kosong dihilangkan dari hasil.

  3. 3

    Buat tag-nya

    Tanda kutip dan ampersand di-escape untuk Anda, dan Anda mendapat satu baris meta per kolom yang Anda isi.

  4. 4

    Salin blok ke bagian head

    Tempel ke dalam `<head>` templat halaman Anda, di atas tag sosial apa pun yang sudah ada.

Tag yang dihasilkan generator ini

<meta property="og:type" content="article">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A one-line description.">
<meta property="og:url" content="https://example.com/post/123">
<meta property="og:image" content="https://example.com/og-image.jpg">

Itulah seluruh keluarannya. og:type selalu ditulis, sementara og:title, og:description, og:url, dan og:image hanya ditambahkan saat Anda mengisinya. Kelima properti ini adalah yang pertama dibaca oleh Facebook, LinkedIn, Slack, Discord, WhatsApp, dan X, jadi mencakup kasus yang paling umum.

Generator ini tidak menulis tag kartu twitter:, og:image:width / og:image:height, og:site_name, og:locale, atau tag article:. Jika Anda membutuhkannya, tambahkan secara manual di samping blok yang dihasilkan.

Nilai og:type yang penting

Tipe Kapan digunakan
website Halaman utama, halaman landing, konten statis
article Postingan blog, berita, halaman editorial
product Halaman detail produk e-commerce
video.other Konten video dan sematan
profile Halaman profil penulis atau pengguna
music.song Halaman trek individual

Tag yang layak ditambahkan manual

Tag Fungsinya Contoh nilai
og:site_name Nama situs secara keseluruhan Example
og:locale Bahasa dan wilayah halaman en_US
og:image:width Membantu scraper menata kartu lebih cepat 1200
og:image:height Membantu scraper menata kartu lebih cepat 630
twitter:card Tata letak kartu di X summary_large_image

X kembali ke tag og: saat tidak ada tag twitter:, jadi halaman yang hanya membawa kelima properti yang dihasilkan tetap tampil dengan benar di sana. Tambahkan tag twitter: hanya saat Anda ingin judul, deskripsi, atau gambar yang berbeda khusus di X.

Kesalahan umum yang dibantu dihindari generator ini

  • name alih-alih property. Properti Open Graph berada di property="og:...". Generator selalu menulis atribut yang benar.
  • Tanda kutip dan ampersand yang tidak di-escape. Karakter " atau & mentah pada judul Anda merusak tag. Generator meng-escape-nya untuk Anda.
  • URL gambar relatif. Scraper sosial hanya menerima URL absolut. Tempel alamat https:// lengkap gambar, karena generator tidak menambahkan domain Anda.
  • Ukuran gambar yang salah. 1200 × 630 px adalah ukuran aman universal. Di bawah 200 × 200 px gambar biasanya ditolak.

Pertanyaan yang Sering Diajukan

Di bagian <head> HTML Anda, tinggi di atas, idealnya dekat <title>. Scraper membaca bagian head dan sering berhenti lebih awal, jadi menaruh tag OG di dekat atas mencegahnya terlewat pada halaman yang sangat besar.

Tidak. Tool ini hanya menulis lima properti og: inti. X kembali ke Open Graph saat tag twitter: tidak ada, jadi pratinjau Anda tetap berfungsi. Tambahkan tag twitter: secara manual hanya saat Anda ingin judul, deskripsi, atau gambar yang berbeda di X.

1200 × 630 px, JPG atau PNG, adalah ukuran aman universal. Berfungsi di Facebook, LinkedIn, kartu besar X, Slack, Discord, dan iMessage. Apa pun yang lebih kecil dari 200 × 200 px berisiko ditolak sepenuhnya.

Beri setiap versi bahasa halamannya sendiri dengan tag og: sendiri, dan tambahkan og:locale (misalnya en_US) plus og:locale:alternate untuk versi lain secara manual. Generator ini tidak menulis tag locale untuk Anda.

Alat Terkait

Alat ini tersedia dalam bahasa lain