How to Use BlogPress Output

Learn how to integrate BlogPress-generated content into your website, CMS, or web application. These examples show practical implementations for HTML pages, WordPress, React, and more.

Overview

Quick reference for each BlogPress output field and how to use it

Field	Purpose	Example Usage
title	Page title & H1 heading	<title> and <h1> tags
description	Meta description for SEO	<meta name="description" content="...">
keywords	SEO keywords & tags	<meta name="keywords" content="...">
content	Main article body	Inside <article> or <main>
metadata	Reading time & word count	Display in UI elements
schema	Structured data for Google	<script type="application/ld+json">...</script>
cover	Article cover image	<meta property="og:image" content="...">

Complete HTML Template

A full HTML page template showing how to use all BlogPress fields together. Copy this template and replace {{ }} placeholders with your actual data.

HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Title from BlogPress -->
  <title>{{ title }}</title>
  
  <!-- SEO Meta Tags -->
  <meta name="description" content="{{ description }}">
  <meta name="keywords" content="{{ keywords.join(', ') }}">
  
  <!-- Open Graph / Social Media -->
  <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">
  
  <!-- JSON-LD Structured Data -->
  <script type="application/ld+json">
    {{ schema }}
  </script>
</head>
<body>
  <article>
    <!-- Article Header -->
    <header>
      <h1>{{ title }}</h1>
      <img src="{{ cover.url }}" alt="{{ title }}">
      <p class="meta">
        {{ metadata.min_read }} min read • {{ metadata.word_count }} words
      </p>
    </header>
    
    <!-- Main Content -->
    <div class="content">
      {{ content }}
    </div>
    
    <!-- Article Footer -->
    <footer>
      <div class="tags">
        {{ keywords.map(keyword => `<span>#${keyword}</span>`).join('') }}
      </div>
    </footer>
  </article>
</body>
</html>

React/Next.js Component

How to use BlogPress data in a React or Next.js component with proper SEO meta tags.

React Component

// React/Next.js Component
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} min read • {metadata.word_count} words
          </div>
        </header>
        
        <div dangerouslySetInnerHTML={{ __html: content }} />
        
        <footer>
          {keywords.map(keyword => (
            <span key={keyword} className="tag">#{keyword}</span>
          ))}
        </footer>
      </article>
    </>
  );
}

WordPress/CMS Integration

Example showing how to store and display BlogPress data in WordPress or other CMS platforms.

WordPress PHP/CMS Integration

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

// Display in template
<h1><?php echo $blogpress_data['title']; ?></h1>
<div class="reading-time">
  <?php echo $blogpress_data['metadata']['min_read']; ?> min read
</div>
<div class="content">
  <?php echo $blogpress_data['content']; ?>
</div>

Ready to generate your own SEO-optimized content?

Use these templates with content generated by BlogPress AI

Generate Content