What are Open Graph tags?

Open Graph meta tags (og:title, og:description, og:image) control how your page appears when shared on Facebook, LinkedIn, Slack, and other platforms. They define the preview title, description, and image.

Why is my og:image not showing?

Common causes: the image URL uses HTTP instead of HTTPS, the image dimensions are wrong (minimum 200×200px, recommended 1200×630px), or the image is behind authentication. Use this tool to preview what Facebook and Twitter will show.

How do Twitter Cards differ from Open Graph?

Twitter uses its own twitter:card, twitter:title, and twitter:description meta tags, though it falls back to og:* tags if the twitter-specific ones are missing. Both systems control how links appear when shared on their respective platforms.

Does this tool follow current Google guidelines?

Yes. The tool generates markup and suggestions based on current search engine best practices, including structured data formats recommended by Google and Schema.org.

Will using this tool improve my search rankings?

Proper meta tags, structured data, and technical SEO improve how search engines understand your content, which can positively impact your rankings. Results vary based on many factors.

Pratinjau Open Graph

Pratinjau bagaimana tautan Anda terlihat di media sosial.

Judul

Deskripsi

URL

Nama situs

URL gambar

Pratinjau

example.com

Judul halaman

Deskripsi halaman akan muncul di sini…

example.com

Tag OG yang dihasilkan

Urai tag OG yang ada

Tempel kode HTML yang berisi tag meta OG untuk mengekstrak dan mempratinjaunya.

Tentang Open Graph

Tag meta Open Graph (OG) mengontrol tampilan halaman Anda saat dibagikan di Facebook, LinkedIn, Slack, Discord, dan platform lainnya. Tag OG yang dikonfigurasi dengan benar dengan judul, deskripsi, dan gambar yang baik dapat secara signifikan meningkatkan rasio klik-tayang dari berbagi sosial. Ukuran gambar OG yang direkomendasikan adalah 1200 × 630 piksel.

Apa Itu Open Graph Sebenarnya

Protokol Open Graph diciptakan oleh Facebook pada tahun 2010 sebagai cara untuk mengubah halaman web apa pun menjadi "rich object" dalam grafik sosial, set metadata terstruktur yang aplikasi lain (awalnya Facebook, sekarang juga LinkedIn, Slack, Discord, Microsoft Teams, iMessage, WhatsApp, dan lusinan lainnya) dapat baca untuk merender kartu pratinjau saat seseorang menempelkan URL Anda. Spesifikasi resmi tinggal di ogp.me dan protokol secara efektif menjadi lingua franca dari berbagi tautan di web.

Tanpa tag OG, platform sosial menggesek halaman Anda dan menebak: mereka mengambil tajuk, mengambil gambar pertama yang dapat mereka temukan, dan menyebutnya kartu. Hasilnya jarang merupakan apa yang Anda inginkan. Dengan tag OG Anda mengontrol judul, deskripsi, dan gambar, yang merupakan perbedaan antara tautan yang dipoles dan yang terlihat rusak.

Empat Tag yang Diperlukan (per ogp.me)

Spesifikasi Open Graph resmi mendefinisikan empat properti yang diperlukan. Untuk memenuhi syarat sebagai objek Open Graph, halaman harus mendeklarasikan keempatnya:

Tag	Apa yang dilakukannya
`og:title`	Judul objek Anda seperti yang harus muncul dalam grafik.
`og:type`	Jenis objek Anda, biasanya `website` untuk halaman umum, `article` untuk posting blog, `video.movie` untuk entri film, dll.
`og:image`	URL ke gambar yang harus mewakili objek dalam kartu pratinjau.
`og:url`	URL kanonik objek, alamat permanennya di situs Anda.

Tag opsional yang direkomendasikan termasuk og:description (ringkasan satu atau dua kalimat), og:site_name (nama situs Anda sebagai label), og:locale (bahasa dan wilayah), dan petunjuk dimensi gambar og:image:width / og:image:height / og:image:alt. Menyertakan petunjuk dimensi memungkinkan klien sosial mengalokasikan jumlah ruang yang tepat sebelumnya dan menghindari pergeseran tata letak saat gambar dimuat.

Twitter / X Cards: Ide yang Sama, Tag Sedikit Berbeda

X (sebelumnya Twitter) memiliki namespace metadata sendiri, twitter:card, twitter:title, twitter:description, twitter:image, twitter:site, twitter:creator, tetapi yang penting, X jatuh ke tag OG ketika yang spesifik Twitter hilang. Jadi halaman yang hanya mengirimkan tag OG masih mendapatkan kartu di X. Di mana keduanya berbeda adalah dalam jenis kartu:

twitter:card = summary, thumbnail persegi kecil, judul, deskripsi.
twitter:card = summary_large_image, gambar selebar di bagian atas kartu. Default modern untuk berbagi konten karena mendapatkan lebih banyak perhatian visual di feed.
app dan player, untuk pemasangan aplikasi dan video inline masing-masing.

Catatan: pratinjau Twitter Card Validator mandiri di cards-dev.twitter.com/validator dihapus oleh X pada 2 Agustus 2022. Cara saat ini untuk memverifikasi kartu adalah memulai tweet baru di Tweet Composer, menempel URL, dan biarkan pratinjau dirender, Anda tidak perlu benar-benar memposting tweet. Beberapa alat pihak ketiga (termasuk yang ini) mendekati kartu yang dirender sehingga Anda dapat iterasi sebelum live.

Dimensi Gambar yang Benar-Benar Bekerja

Tidak ada ukuran sempurna tunggal, tetapi gambar 1200×630 (rasio aspek 1,91:1) adalah taruhan tunggal yang paling dapat diandalkan, bekerja di mana-mana tanpa pemotongan besar. Rekomendasi per-platform:

Platform	Ukuran yang direkomendasikan	Catatan
Facebook	1200×630 (1,91:1)	Minimum 200×200; di bawah 600×315 ditampilkan sebagai thumbnail kecil.
LinkedIn	Minimum 1200×627	Rasio 1,91:1, JPG/PNG/GIF, maks 5 MB.
X (summary_large_image)	1200×675 (16:9)	Atau 1200×600 (2:1), keduanya merender selebar.
Slack / Discord	Membaca tag OG langsung	1200×630 bekerja dengan baik; subjek berpusat untuk bertahan dari pemotongan rasio.
Pinterest	Vertikal (misalnya 1000×1500)	Rasio 2:3 bekerja paling baik di feed Pinterest.

Pertahankan teks penting dan wajah dekat tengah gambar, setiap platform memotong secara berbeda dan logo di pojok dapat menghilang di belakang overlay UI platform.

Mengapa Kartu Anda Kadang Tidak Akan Ditampilkan

Jika Anda telah menambahkan tag OG tetapi pratinjau masih rusak atau kosong, tersangka biasa:

HTTPS diperlukan. Facebook dan sebagian besar platform modern menolak URL gambar http://. Sajikan og:image melalui HTTPS.
Gambar tidak dapat diakses publik. Di balik otentikasi, diblokir oleh IP allowlist, atau mengembalikan 403 ke crawler platform. Uji dengan membuka URL gambar di jendela browser pribadi.
Gambar terlalu kecil. Di bawah minimum platform (Facebook 200×200, LinkedIn 1200×627), kartu jatuh ke thumbnail kecil atau tidak ada gambar sama sekali.
Rasio aspek salah. Gambar persegi 1:1 yang dikirim sebagai summary_large_image di X dipotong tengah, sering buruk.
Cache. Platform sosial mencache metadata OG Anda secara agresif. Setelah memperbaiki tag, kunjungi Sharing Debugger Facebook dan klik "Scrape Again" untuk menyegarkan; Post Inspector LinkedIn melakukan hal yang sama; X mengambil perubahan saat berikutnya seseorang menempelkan URL.
Robots.txt memblokir crawler sosial. Pastikan agen pengguna seperti facebookexternalhit, Twitterbot, LinkedInBot, Slackbot dapat mengambil halaman dan gambar Anda.
Server mengembalikan non-2xx ke crawler. Periksa log server Anda untuk agen pengguna bot sosial.
URL gambar relatif. og:image harus URL absolut (https://yoursite.com/og.jpg), tidak pernah /og.jpg.

Masalah Cache

Setelah platform sosial menggesek halaman Anda, metadata di-cache untuk beberapa periode, cerita rakyat komunitas menempatkannya sekitar 7 hari untuk Facebook dan LinkedIn, meskipun tidak ada platform yang mendokumentasikan TTL yang tepat. Memperbarui tag OG Anda tidak menyegarkan cache secara otomatis. Untuk memaksa scrape ulang, gunakan alat resmi: Facebook Sharing Debugger, LinkedIn Post Inspector. X mengambil metadata baru ketika URL berikutnya dibagikan. Slack dan Discord menyegarkan pratinjau mereka berdasarkan tag OG pada waktu fetch, sehingga mereka memperbarui lebih cepat daripada Facebook.

Nilai og:type Umum

Tag og:type memberitahu platform sosial jenis objek apa yang diwakili halaman. Sebagian besar halaman adalah website (default) atau article; nilai-spesifik vertikal memungkinkan platform untuk merender kartu yang lebih kaya. Dari spesifikasi:

website, default untuk halaman umum.
article, posting blog, berita. Berpasangan dengan article:published_time, article:author, article:section, article:tag.
book, berpasangan dengan book:author, book:isbn.
profile, untuk halaman profil pengguna.
video.movie / video.episode / video.tv_show / video.other, untuk konten video.
music.song / music.album / music.playlist / music.radio_station, untuk musik.

Batasan Panjang dalam Praktik

Tidak ada platform yang memberlakukan batas keras pada panjang judul atau deskripsi, tetapi setiap satu memotong setelah suatu titik:

Judul, jaga di bawah ~60 karakter untuk aman di semua platform; ~70 memotong di sebagian besar. Pesan penting dalam 50 pertama.
Deskripsi, di bawah ~155-200 karakter sebelum pemotongan. Lebih sedikit di mobile (sekitar 100). Front-load informasi kunci.
Teks alt gambar, harus hadir (og:image:alt) untuk screen reader dan klien yang sadar aksesibilitas; di bawah 100 karakter.

JSON-LD vs Open Graph (Mereka Adalah Hal yang Berbeda)

Kebingungan umum: data terstruktur JSON-LD (menggunakan kosakata schema.org) dan tag meta Open Graph melakukan pekerjaan yang berbeda. OG / Twitter Cards mengontrol pratinjau berbagi sosial, apa yang muncul saat seseorang menempelkan URL Anda ke Slack atau Facebook. JSON-LD dengan schema.org membantu Google mengurai halaman Anda untuk hasil pencarian kaya, kartu resep, info produk, cuplikan FAQ di Google Search. Keduanya direkomendasikan, dan mereka tidak menggantikan satu sama lain.

Kesalahan Umum

Menggunakan URL og:image relatif. Spesifikasi memerlukan URL absolut. Jalur relatif dijatuhkan secara diam-diam.
Menggunakan logo situs umum untuk setiap halaman. Gambar OG adalah pahlawan kartu Anda, setiap halaman layak mendapatkan gambar unik, idealnya terkait dengan konten halaman.
Lupa og:image:width dan og:image:height. Beberapa klien mengalokasikan ruang sebelumnya dan melewatkan gambar tanpa petunjuk ini.
Kehilangan tipe twitter:card summary_large_image. Tanpa itu, X default ke kartu summary yang lebih kecil dengan thumbnail persegi, sering kurang menarik.
Menempatkan teks kunci di sudut-sudut gambar. Platform yang berbeda memotong secara berbeda. Subjek dan teks penting harus berada di tengah 80%.
Memperbarui tag tetapi tidak menyegarkan cache. Kunjungi Sharing Debugger / Post Inspector resmi setelah setiap perubahan.
Mengirimkan URL gambar HTTP. Sebagian besar platform menolak gambar non-HTTPS; kartu akan muncul tanpa gambar.
Menggunakan hanya og:title dan og:description. Tanpa og:image, kartu dirender sebagai stub teks-saja yang jarang di sebagian besar platform.

Pertanyaan yang Sering Diajukan

Mengapa pratinjau saya terlihat berbeda di platform yang berbeda?

Setiap platform merender metadata OG yang sama dengan caranya sendiri, rasio crop gambar yang berbeda, ukuran judul yang berbeda, deskripsi yang berbeda terpotong pada titik yang berbeda. Alat ini mendekati kartu setiap platform; rendering aktual di produksi mungkin sedikit berbeda. Selalu uji platform paling penting (Facebook Sharing Debugger, LinkedIn Post Inspector, dan Tweet Composer di X) sebelum mengandalkan kartu.

Tag OG saya benar tetapi Facebook masih menunjukkan pratinjau lama. Mengapa?

Facebook mencache metadata OG secara agresif, sekali ia menggesek URL, hasilnya menempel untuk apa yang biasanya dilaporkan sebagai beberapa hari. Untuk memaksa scrape segar, tempel URL ke Facebook Sharing Debugger dan klik "Scrape Again." Trik yang sama bekerja untuk LinkedIn melalui Post Inspector.

Apakah saya memerlukan kedua tag OG dan tag Twitter Card?

Tidak secara ketat, X jatuh ke tag OG ketika tag khusus Twitter hilang. Di mana tag khusus Twitter membantu adalah dalam memilih tipe kartu (twitter:card = summary_large_image) dan dalam mengatribusikan posting (twitter:site, twitter:creator). Untuk kontrol maksimum di X, sertakan kedua set; untuk upaya minimum, kirim tag OG yang bersih dan terima tipe kartu default.

Apakah data saya diunggah ke mana pun?

Tidak. Pratinjau dirender sepenuhnya di browser Anda berdasarkan apa yang Anda ketik ke dalam formulir. Tidak ada fetch server, tidak ada scraping URL asli Anda, tidak ada logging tag draft Anda. URL gambar yang Anda tempel memang dimuat dalam pratinjau dari sumber aslinya (karena gambar diambil oleh browser untuk merender mereka), tetapi nilai tag OG sendiri tidak pernah meninggalkan halaman.

Apa set tag OG paling sederhana yang dapat saya kirim?

Empat tag yang diperlukan plus og:description:

<meta property="og:title"       content="Your Page Title" />
<meta property="og:type"        content="website" />
<meta property="og:url"         content="https://yoursite.com/page" />
<meta property="og:image"       content="https://yoursite.com/og.jpg" />
<meta property="og:description" content="A short summary of the page." />

Tambahkan og:site_name, og:image:width, og:image:height, dan og:image:alt untuk kelengkapan. Tambahkan twitter:card = summary_large_image jika Anda ingin X menggunakan kartu selebar.

Bagaimana Slack / Discord menghasilkan pratinjau?

Slack dan Discord membaca tag OG secara langsung saat URL ditempel ke pesan. Slack menggunakan rantai prioritas oEmbed (oEmbed → OG → tag meta); Discord membaca OG dan beberapa tag eksklusif termasuk tag meta theme-color yang mengontrol garis berwarna di sepanjang tepi kiri embed. Keduanya menyegarkan dengan cepat dibandingkan dengan Facebook, biasanya pada penempelan berikutnya URL yang sama setelah pembaruan tag.