Cara Menggunakan Output BlogPress

Pelajari cara mengintegrasikan konten yang dihasilkan BlogPress ke website, CMS, atau aplikasi web Anda. Contoh-contoh ini menunjukkan implementasi praktis untuk halaman HTML, WordPress, React, dan lainnya.

Ringkasan

Referensi cepat untuk setiap field output BlogPress dan cara menggunakannya

Field	Tujuan	Contoh Penggunaan
title	Judul halaman & heading H1	Tag <title> dan <h1>
description	Meta deskripsi untuk SEO	<meta name="description" content="...">
keywords	Kata kunci SEO & tag	<meta name="keywords" content="...">
content	Isi artikel utama	Di dalam <article> atau <main>
metadata	Waktu baca & jumlah kata	Tampilkan di elemen UI
schema	Data terstruktur untuk Google	<script type="application/ld+json">...</script>
cover	Gambar sampul artikel	<meta property="og:image" content="...">

Template HTML Lengkap

Template halaman HTML lengkap yang menunjukkan cara menggunakan semua field BlogPress bersama-sama. Salin template ini dan ganti placeholder {{ }} dengan data Anda.

Template HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Judul dari BlogPress -->
  <title>{{ title }}</title>
  
  <!-- Meta Tag SEO -->
  <meta name="description" content="{{ description }}">
  <meta name="keywords" content="{{ keywords.join(', ') }}">
  
  <!-- Open Graph / Media Sosial -->
  <meta property="og:title" content="{{ title }}">
  <meta property="og:description" content="{{ description }}">
  <meta property="og:image" content="{{ cover.url }}">
  <meta property="og:type" content="article">
  
  <!-- Data Terstruktur JSON-LD -->
  <script type="application/ld+json">
    {{ schema }}
  </script>
</head>
<body>
  <article>
    <!-- Header Artikel -->
    <header>
      <h1>{{ title }}</h1>
      <img src="{{ cover.url }}" alt="{{ title }}">
      <p class="meta">
        {{ metadata.min_read }} menit baca • {{ metadata.word_count }} kata
      </p>
    </header>
    
    <!-- Konten Utama -->
    <div class="content">
      {{ content }}
    </div>
    
    <!-- Footer Artikel -->
    <footer>
      <div class="tags">
        {{ keywords.map(keyword => `<span>#${keyword}</span>`).join('') }}
      </div>
    </footer>
  </article>
</body>
</html>

Komponen React/Next.js

Cara menggunakan data BlogPress di komponen React atau Next.js dengan meta tag SEO yang tepat.

Komponen React

// Komponen React/Next.js
import { Helmet } from 'react-helmet';

function BlogArticle({ blogpressData }) {
  const { title, description, content, keywords, metadata, schema, cover } = blogpressData;
  
  return (
    <>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={description} />
        <meta name="keywords" content={keywords.join(', ')} />
        <meta property="og:image" content={cover.url} />
        <script type="application/ld+json">
          {JSON.stringify(schema)}
        </script>
      </Helmet>
      
      <article className="blog-post">
        <header>
          <h1>{title}</h1>
          <img src={cover.url} alt={title} />
          <div className="meta">
            {metadata.min_read} menit baca • {metadata.word_count} kata
          </div>
        </header>
        
        <div dangerouslySetInnerHTML={{ __html: content }} />
        
        <footer>
          {keywords.map(keyword => (
            <span key={keyword} className="tag">#{keyword}</span>
          ))}
        </footer>
      </article>
    </>
  );
}

Integrasi WordPress/CMS

Contoh menunjukkan cara menyimpan dan menampilkan data BlogPress dalam WordPress atau platform CMS lainnya.

Integrasi WordPress PHP/CMS

// Contoh WordPress
add_action('wp_head', function() {
  $blogpress_data = get_post_meta(get_the_ID(), 'blogpress_data', true);
  
  // Tambahkan schema
  echo '<script type="application/ld+json">';
  echo $blogpress_data['schema'];
  echo '</script>';
  
  // Tambahkan waktu baca
  echo '<meta name="reading-time" content="' . 
       $blogpress_data['metadata']['min_read'] . '">';
});

// Tampilkan di template
<h1><?php echo $blogpress_data['title']; ?></h1>
<div class="reading-time">
  <?php echo $blogpress_data['metadata']['min_read']; ?> menit baca
</div>
<div class="content">
  <?php echo $blogpress_data['content']; ?>
</div>

Siap membuat konten yang dioptimalkan SEO?

Gunakan template ini dengan konten yang dihasilkan oleh AI BlogPress

Buat Konten