HTML 09B: Open Graph dan Social Media Card

Saat sebuah link dibagikan, aplikasi sosial dapat menampilkan judul, ringkasan, dan gambar. Informasi tersebut biasanya berasal dari protokol Open Graph.

1. Metadata Open Graph

Gunakan URL absolut, terutama untuk og:url dan og:image. Server media sosial tidak mengetahui struktur folder lokal project Anda.

2. Metadata Twitter/X

Jika metadata Twitter tidak tersedia, sebagian platform dapat memakai Open Graph sebagai fallback.

3. Gambar yang Baik

Gunakan gambar yang relevan, dapat diakses publik, dan cukup besar untuk kartu. Jangan memasukkan informasi penting hanya sebagai teks di dalam gambar karena dapat terpotong.

4. Menguji Hasil

Setelah halaman tersedia secara online, gunakan alat inspeksi milik platform tujuan. Perubahan tidak selalu langsung terlihat karena platform menyimpan cache pratinjau.

Kesalahan Umum

• Menggunakan path relatif seperti /cover.jpg pada metadata yang dibaca layanan luar.
• Gambar membutuhkan login sehingga tidak dapat diambil crawler.
• Judul kartu berbeda jauh dari isi halaman.
• Mengharapkan pembaruan langsung tanpa membersihkan cache platform.

Latihan

Tambahkan Open Graph lengkap pada halaman artikel latihan. Pastikan title, description, URL, image, dan alt semuanya menggambarkan halaman yang sama.

Rangkuman

Open Graph mengontrol bagaimana link diperkenalkan saat dibagikan. Metadata yang akurat membantu orang memahami tujuan link sebelum membukanya.