Softonic

Pengecek Tag OG Localhost

Langkah 1 / 3
Berikutnya

Saat mengembangkan di localhost, kartu berbagi yang sebenarnya belum akan tampil, karena Facebook dan platform lain tidak bisa menjangkau alamat di komputer Anda. Namun tag og tetap bisa Anda periksa sekarang. Tempel HTML dari halaman lokal Anda, dan alat ini akan menunjukkan tag mana yang ada dan apa nilainya.

Cara menguji tag og dari localhost

  1. 1

    Buka sumber secara lokal

    Buka halaman di localhost pada browser, lalu gunakan view-source untuk menyalin bagian head.

  2. 2

    Tempel HTML-nya

    Tempel di kotak HTML head halaman, lalu klik Berikutnya dan Hasil.

  3. 3

    Periksa item merah

    Setiap item merah di antara enam pemeriksaan adalah tag yang tidak bisa dibaca alat ini dari markup Anda.

  4. 4

    Perbaiki template lalu uji ulang

    Ubah template di proyek Anda, muat ulang halaman, salin ulang sumbernya, dan tempel lagi.

Mengapa halaman lokal perlu pemeriksaan yang berbeda

Platform sosial mengambil halaman dari server mereka sendiri. Alamat seperti localhost:3000 atau 192.168.1.20 tidak bisa dijangkau dari Facebook, X, atau aplikasi chat, sehingga pratinjau yang Anda lihat di sana tidak pernah benar-benar mencerminkan hasil lokal. Yang bisa diperiksa secara lokal adalah markup itu sendiri: apakah tag-tagnya ada, atributnya benar, dan nilainya terisi?

Apa yang sebaiknya diperiksa secara lokal

  • Apakah setiap tag Open Graph memakai property, misalnya <meta property="og:title" ...>.
  • Apakah og:url berisi alamat lengkap halaman publik, bukan localhost. Alamat lokal di og:url akan menunjuk ke tujuan yang salah setelah halaman dipublikasikan.
  • Apakah og:image berupa alamat https absolut. Jalur relatif seperti /img/card.jpg berfungsi di browser, tetapi tidak di kartu berbagi.
  • Apakah nilainya sudah terisi dan tidak berisi teks placeholder dari template.

Uji di alamat publik

Setelah halaman berada di domain sungguhan, periksa ulang dengan alat yang sama dengan menyalin sumber dari alamat publik. Lalu gunakan Sharing Debugger dengan URL publik untuk melihat kartu yang sudah jadi. Jangan masukkan alamat lokal di sana, karena platform tidak bisa mencapainya.

Kesalahan umum di lingkungan pengembangan

Gejala Kemungkinan penyebab Solusi
og:url menampilkan localhost Nilainya ditulis langsung di template Bangun alamat dari domain publik atau konfigurasi
Gambar menampilkan jalur lokal Alamat relatif Gunakan alamat https lengkap ke file tersebut
Tag hanya terlihat di alat pengembang JavaScript menambahkannya setelah halaman dimuat Cetak tag di HTML yang dihasilkan server
Tag lama masih ada setelah diubah Versi halaman yang tersimpan di cache Bersihkan cache lingkungan pengembangan lalu muat ulang

Setelah publikasi

Hasil hijau di sini berarti markup sudah lengkap, bukan berarti halaman publik sudah berfungsi. Pastikan halaman merespons tanpa login, tidak dialihkan ke alamat lain, dan gambarnya bisa dibuka di browser. Baru setelah itu pengujian lokal benar-benar selesai.

Pertanyaan yang Sering Diajukan

Tidak. Facebook tidak bisa menjangkau alamat di komputer Anda atau jaringan lokal, jadi pratinjau tidak bisa diambil dari sana. Uji markup di sini, lalu ambil alamat publiknya.

Og:url menunjukkan alamat kanonis yang dituju kartu dan setiap pembagian. Jika mengarah ke localhost, pembagian akan terpencar ke alamat yang tidak bisa dibuka siapa pun.

Ya, jika staging punya alamat publik. Periksa markupnya di sana dengan cara yang sama seperti di produksi, karena template bisa berbeda antar lingkungan.

Alat ini membaca HTML yang Anda tempel untuk menampilkan hasilnya. Alat ini tidak mengambil halaman lokal Anda dan tidak menghubungi platform mana pun.

Alat Terkait

Parser UTM

Tempel URL kampanye dan baca lima tag UTM standarnya (source, medium, campaign, term, dan content) dengan setiap nilai ter-decode. Cara cepat memeriksa tautan pelacakan sebelum dikirim.

Penganalisis Header Keamanan

Tempel header respons HTTP Anda dan dapatkan saran berprioritas tentang header keamanan yang penting: Content-Security-Policy, Strict-Transport-Security, X-Frame-Options, Referrer-Policy, dan lainnya.

Pembuat Tautan UTM

Bangun URL pelacakan kampanye dengan parameter UTM source, medium, campaign, term, dan content. Tautan bersih ber-URL-encode, siap untuk iklan dan newsletter.

Pratinjau SERP

Pratinjau sebuah hasil pencarian Google sebelum dipublikasikan. Penghitung karakter langsung memperingatkan judul dan deskripsi meta yang terlalu panjang, dan cuplikan bergaya Google memperlihatkan tampilan hasil Anda.

Generator Breadcrumb Schema

Buat BreadcrumbList JSON-LD yang valid untuk hierarki halaman apa pun. Menghasilkan markup schema.org siap ditempel ke head situs Anda.

Pemeriksa Indeksabilitas

Periksa apakah sebuah URL dapat diindeks: robots.txt, meta robots, X-Robots-Tag, sinyal kanonik, dan status HTTP.

Alat ini tersedia dalam bahasa lain

Panduan dan contoh penggunaan