Dokumentasi Alat Utama Open Graph Meta Generator

Referensi API

Dokumen ini menyediakan detail teknis tentang alat Open Graph Meta Generator dan fungsi dasarnya.

Ikhtisar Alat

Open Graph Meta Generator adalah alat sisi klien yang menghasilkan meta tag HTML untuk protokol Open Graph dan Twitter Card. Alat ini memproses input pengguna dan menghasilkan meta tag HTML dengan format yang tepat.

Parameter Input

Informasi Umum

Parameter	Tipe	Wajib	Deskripsi	Contoh
`pageType`	string	Ya	Tipe konten	`"website"`, `"article"`, `"book"`
`title`	string	Tidak	Judul halaman	`"My Awesome Website"`
`description`	string	Tidak	Deskripsi halaman	`"A great website for developers"`
`url`	string	Tidak	URL halaman	`"https://example.com/page"`
`siteName`	string	Tidak	Nama situs	`"My Company"`

Pengaturan Gambar

Parameter	Tipe	Wajib	Deskripsi	Contoh
`imageUrl`	string	Tidak	URL gambar	`"https://example.com/image.jpg"`
`imageAlt`	string	Tidak	Alt text gambar	`"Company logo"`
`imageWidth`	string	Tidak	Lebar gambar dalam piksel	`"1200"`
`imageHeight`	string	Tidak	Tinggi gambar dalam piksel	`"630"`

Pengaturan Twitter

Parameter	Tipe	Wajib	Deskripsi	Contoh
`twitterCardType`	string	Ya	Tipe Twitter Card	`"summary_large_image"`
`twitterSite`	string	Tidak	Handle Twitter situs	`"@example"`
`twitterCreator`	string	Tidak	Handle Twitter kreator	`"@author"`

Format Output

Alat ini menghasilkan meta tag HTML dalam format berikut:

Tag Open Graph

<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:alt" content="Image description" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Tag Twitter

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Tipe Konten

Tipe Halaman yang Didukung

Tipe	Deskripsi	Kasus penggunaan
`website`	Halaman website umum	Beranda, halaman tentang kami, halaman kontak
`article`	Post blog dan artikel berita	Post blog, artikel berita, tutorial
`book`	Halaman buku dan e-book	Listing buku, halaman e-book
`profile`	Profil pribadi atau bisnis	Profil pengguna, halaman perusahaan
`music`	Track dan album musik	Streaming musik, halaman album
`video`	Konten video	Halaman video, listing film

Tipe Twitter Card

Tipe	Deskripsi	Paling cocok untuk
`summary`	Card dasar dengan thumbnail	Post blog, artikel berita
`summary_large_image`	Card dengan gambar besar	Konten visual, produk
`app`	Promosi aplikasi mobile	Halaman app store
`player`	Konten video/audio	Halaman video, podcast

Pemrosesan Data

HTML Escaping

Semua input pengguna secara otomatis di-escape untuk mencegah serangan XSS:

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

Validasi URL

URL divalidasi untuk memastikan formatnya benar:

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (_) {
    return false;
  }
}

Batas Panjang Konten

Alat ini menerapkan batas panjang yang direkomendasikan:

Judul: maksimum 60 karakter
Deskripsi: maksimum 160 karakter
URL: harus menggunakan format URL yang valid

Kompatibilitas Browser

Browser yang Didukung

Browser	Versi	Dukungan penuh
Chrome	60+	Dukungan penuh
Firefox	55+	Dukungan penuh
Safari	12+	Dukungan penuh
Edge	79+	Dukungan penuh

Fitur yang Dibutuhkan

Dukungan ES6+
Dukungan Clipboard API
Dukungan Local Storage
Dukungan CSS Grid

Pertimbangan Performa

Pemrosesan Sisi Klien

Semua pemrosesan terjadi di browser
Tidak memerlukan request server
Pembuatan dan pratinjau instan
Jejak memori minimal

Caching

Meta tag yang dihasilkan disimpan di browser storage
Riwayat disimpan secara lokal
Tidak ada dependensi eksternal

Penanganan Error

Error Validasi Input

// Example error handling
if (!title.trim()) {
  showError("Title is required");
  return;
}

if (url && !isValidUrl(url)) {
  showError("Please enter a valid URL");
  return;
}

Error Saat Memuat Gambar

// Handle image loading errors
function handleImageError(event) {
  const img = event.target;
  img.style.display = "none";
  showWarning("Image failed to load");
}

Contoh Integrasi

Integrasi WordPress

// Add to functions.php
function add_open_graph_tags() {
    if (is_single()) {
        $title = get_the_title();
        $description = get_the_excerpt();
        $image = get_the_post_thumbnail_url();

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />';
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />';
        echo '<meta property="og:image" content="' . esc_url($image) . '" />';
    }
}
add_action('wp_head', 'add_open_graph_tags');

Integrasi React

// React component example
function OpenGraphMeta({ title, description, image, url }) {
  return (
    <>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
    </>
  );
}

Integrasi Next.js

// Next.js Head component
import Head from "next/head";

function MyPage() {
  return (
    <Head>
      <meta property="og:title" content="My Page Title" />
      <meta property="og:description" content="My page description" />
      <meta property="og:image" content="https://example.com/image.jpg" />
    </Head>
  );
}

Pengujian dan Validasi

Debugger Media Sosial

Facebook: developers.facebook.com/tools/debug
Twitter: cards-dev.twitter.com/validator
LinkedIn: linkedin.com/post-inspector

Pengujian Otomatis

// Example test for meta tag generation
describe("Open Graph Meta Generator", () => {
  test("generates correct meta tags", () => {
    const input = {
      pageType: "website",
      title: "Test Page",
      description: "Test description",
    };

    const output = generateMetaTags(input);

    expect(output).toContain('<meta property="og:type" content="website" />');
    expect(output).toContain('<meta property="og:title" content="Test Page" />');
  });
});

Troubleshooting

Masalah Umum

Gambar tidak tampil: periksa format URL dan aksesibilitasnya
Tag tidak berfungsi: validasi dengan debugger media sosial
Konten terpotong: periksa batas karakter
Masalah cache: gunakan alat debugger untuk me-refresh cache

Mode Debug

Aktifkan mode debug untuk melihat informasi terperinci:

// Enable debug logging
localStorage.setItem("debug", "true");

Peningkatan di Masa Depan

Fitur yang Direncanakan

Dukungan data terstruktur Schema.org
Dukungan multi-bahasa
Kemampuan pembuatan massal
API endpoint untuk pembuatan server-side
Optimasi gambar tingkat lanjut
Integrasi analitik

Berkontribusi

Untuk berkontribusi ke Open Graph Meta Generator:

Fork repositorinya
Buat feature branch
Lakukan perubahan Anda
Tambahkan pengujian
Kirim pull request

Dukungan

Untuk dukungan teknis atau pertanyaan:

Lihat FAQ
Tinjau Examples
Hubungi dukungan melalui website utama

Apakah halaman ini membantu?

On this page

Ikhtisar Alat Parameter Input Format Output Tipe Konten Pemrosesan Data Kompatibilitas Browser Pertimbangan Performa Penanganan Error Contoh Integrasi Pengujian dan Validasi Troubleshooting Peningkatan di Masa Depan Dukungan