OpenGraph dan Meta Twitter Card
Tambahkan tag meta og: dan twitter: untuk pratinjau tautan media sosial yang kaya.
OpenGraph dan Meta Twitter Card adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Alasan Menggunakan Tag OG
Meta Open Graph memberikan pratinjau kaya kepada platform media sosial (Facebook, LinkedIn, Slack) saat tautan dibagikan.
Tag OG yang Diperlukan
og:title, og:description, og:image, dan og:url adalah yang paling penting.
<svelte:head>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imageUrl} />
<meta property="og:url" content={url} />
</svelte:head>Ukuran Gambar
1200x630 adalah ukuran gambar OG yang direkomendasikan agar tampil optimal di berbagai platform.
Kartu Twitter
Twitter menghormati tag OG, tetapi juga memiliki meta twitter: sendiri untuk memberikan kendali lebih besar.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />Jenis Kartu
Twitter mendukung kartu summary, summary_large_image, app, dan player.
Validasi
Gunakan Sharing Debugger milik Facebook dan Card Validator milik Twitter untuk melihat pratinjau tag Anda.
URL Absolut
URL gambar OG harus absolut; jalur relatif akan gagal.
Kustomisasi Per Halaman
Tetapkan tag OG untuk setiap artikel, produk, atau profil agar pratinjaunya kaya konteks.
Menghindari Nilai Bawaan Duplikat
Berikan nilai bawaan seluruh situs di tata letak akar, lalu timpa per halaman.
Penyimpanan Cache
Platform media sosial menyimpan data OG dalam cache. Gunakan alat debug mereka untuk menyegarkannya.
Dampak di Dunia Nyata
Pratinjau yang kaya secara drastis meningkatkan rasio klik pada tautan yang dibagikan di media sosial.
Pemeriksaan Singkat
Mengapa URL gambar OG harus absolut?
Rangkuman
Tambahkan meta OG dan Twitter di <svelte:head> dengan URL gambar absolut untuk menghasilkan pratinjau media sosial yang kaya.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “OpenGraph dan Meta Twitter Card” gratis?
Ya — teks lengkap “OpenGraph dan Meta Twitter Card” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “OpenGraph dan Meta Twitter Card”?
Tambahkan tag meta og: dan twitter: untuk pratinjau tautan media sosial yang kaya. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “OpenGraph dan Meta Twitter Card” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- svelte:head untuk Tag Meta Dinamis
- OpenGraph dan Meta Twitter Card
- Data Terstruktur JSON-LD di SvelteKit
- URL Kanonis dan Pembuatan Peta Situs