SEO in Ampo — Metadata, JSON-LD, and OG Images

The Foundation of Search Visibility

SEO in modern web development goes far beyond keyword optimization. Ampo takes a comprehensive approach to search engine optimization, implementing technical SEO best practices, semantic markup, and performance optimizations that work together to improve your content’s discoverability and ranking potential.

The theme’s SEO architecture is built around three core principles:

1. Technical excellence through clean markup and fast loading
2. Semantic richness via structured data and meaningful HTML
3. Content optimization with proper meta tags and social sharing

Core SEO Components

The SEO Component Architecture

Ampo centralizes SEO functionality in a dedicated component that handles all meta tag generation:

---
// src/components/SEO.astro
const {
  title,
  description,
  image,
  canonical,
  noindex = false,
  jsonLd = [],
  prevUrl,
  nextUrl,
  breadcrumbs,
} = Astro.props;

const site = Astro.site?.toString() ?? 'https://ampo.hilaltechnologic.com';
const url = canonical ?? new URL(Astro.url.pathname, site).toString();
const ogImage = image && (image.startsWith('http') ? image : new URL(image, site).toString());
---

<title>{title}</title>
{description && <meta name="description" content={description} />}
<link rel="canonical" href={url} />
{noindex && <meta name="robots" content="noindex, nofollow" />}

This component ensures consistent meta tag implementation across all pages while allowing for page-specific customization.

Open Graph and Twitter Card Optimization

Social media sharing is crucial for content distribution. Ampo automatically generates optimized Open Graph and Twitter Card tags:

<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
{description && <meta property="og:description" content={description} />}
<meta property="og:url" content={url} />
<meta property="og:site_name" content="Ampo" />
{ogImage && <meta property="og:image" content={ogImage} />}

<meta name="twitter:card" content={ogImage ? 'summary_large_image' : 'summary'} />
<meta name="twitter:title" content={title} />
{description && <meta name="twitter:description" content={description} />}
{ogImage && <meta name="twitter:image" content={ogImage} />}

The system intelligently chooses between summary and large image cards based on image availability, optimizing for visual appeal in social feeds.

Dynamic OG Image Generation

One of Ampo’s standout features is automatic Open Graph image generation for every blog post:

// src/pages/og/[slug].svg.ts
export async function GET({ props }) {
  const post = props.post;
  const title = post.data.title ?? 'Ampo';
  const subtitle = (post.data.description ?? '').slice(0, 140);

  const svg = `<?xml version="1.0" encoding="UTF-8"?>
  <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630">
    <!-- SVG content with dynamic title and description -->
  </svg>`;

  return new Response(svg, {
    headers: {
      'Content-Type': 'image/svg+xml; charset=utf-8',
      'Cache-Control': 'public, max-age=31536000, immutable',
    },
  });
}

This generates unique, branded social media cards for each post, improving click-through rates from social platforms.

Structured Data Implementation

JSON-LD Schema Markup

Ampo implements comprehensive JSON-LD structured data to help search engines understand your content:

Organization Schema

{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Hilal Technologic",
  "url": "https://ampo.hilaltechnologic.com",
  "logo": "https://ampo.hilaltechnologic.com/favicon.svg"
}

WebSite Schema

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Ampo",
  "url": "https://ampo.hilaltechnologic.com"
}

BlogPosting Schema

For individual blog posts, Ampo generates rich BlogPosting markup:

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Post Title",
  "datePublished": "2025-01-01",
  "dateModified": "2025-01-02",
  "description": "Post description",
  "image": "https://example.com/image.jpg",
  "author": [
    {
      "@type": "Person",
      "name": "Author Name"
    }
  ],
  "mainEntityOfPage": "https://example.com/post-url"
}

BreadcrumbList Schema

Navigation breadcrumbs include structured data for enhanced search results:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://example.com/blog/"
    }
  ]
}

Technical SEO Features

XML Sitemap Generation

Ampo automatically generates XML sitemaps using Astro’s sitemap integration:

// astro.config.mjs
export default defineConfig({
  site: 'https://ampo.hilaltechnologic.com',
  integrations: [sitemap()],
});

The generated sitemap includes:

• All static pages
• Dynamic blog post pages
• Archive pages (tags, categories, series)
• Proper last modification dates
• Priority hints for important pages

RSS Feed Implementation

RSS feeds remain important for content syndication and reader engagement:

// src/pages/rss.xml.ts
import rss from '@astrojs/rss';
import { getAllPosts } from '../lib/content';

export async function GET(context) {
  const posts = await getAllPosts();
  return rss({
    title: 'Ampo — Modern Astro Blog',
    description: 'RSS Feed untuk tema Ampo by Hilal Technologic',
    site: context.site?.toString() ?? 'https://ampo.hilaltechnologic.com',
    items: posts.map((post) => ({
      link: `/blog/${post.slug}/`,
      title: post.data.title,
      description: post.data.description ?? '',
      pubDate: post.data.date,
    })),
  });
}

Robots.txt Configuration

The theme includes a properly configured robots.txt file:

User-agent: *
Allow: /

Sitemap: https://ampo.hilaltechnologic.com/sitemap-index.xml

This ensures search engines can crawl your site effectively while pointing them to your sitemap for complete discovery.

Performance and Core Web Vitals

Asset Optimization

SEO increasingly depends on page speed and Core Web Vitals. Ampo implements several performance optimizations:

Font Loading Strategy

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Preconnecting to font providers reduces connection overhead and improves Largest Contentful Paint (LCP).

Resource Hints

<link rel="alternate" type="application/rss+xml" title="Ampo RSS" href="/rss.xml" />

Proper resource hints help browsers optimize loading strategies.

Image Optimization

Ampo includes responsive image handling:

• Automatic responsive sizing with srcset
• Modern format delivery (WebP, AVIF)
• Lazy loading for off-screen images
• Proper alt text requirements

SEO Content Guidelines

Meta Description Best Practices

Effective meta descriptions should:

• Be 120-160 characters long
• Include target keywords naturally
• Provide value proposition clearly
• Encourage click-through with action words

Example:

---
title: "Complete Guide to Astro SEO"
description: "Learn how to optimize your Astro site for search engines with meta tags, structured data, and performance tips. Boost your rankings today."
---

Heading Structure Optimization

Ampo automatically generates anchor links for headings, enabling:

• Direct linking to sections
• Table of contents navigation
• Improved accessibility
• Better content structure signals

Internal Linking Strategy

The theme facilitates strong internal linking through:

• Related posts suggestions
• Series navigation
• Tag and category archives
• Author profile connections

Monitoring and Measurement

Analytics Integration

While Ampo doesn’t include analytics by default, it’s designed for easy integration with:

• Google Analytics 4
• Plausible Analytics
• Umami Analytics
• Microsoft Clarity

Search Console Setup

The theme’s clean markup and comprehensive meta tags work seamlessly with Google Search Console, enabling monitoring of:

• Search performance
• Core Web Vitals
• Index coverage
• Mobile usability

Advanced SEO Strategies

Content Clustering

Ampo’s series and category system naturally supports content clustering:

• Group related topics in series
• Create comprehensive category pages
• Build topic authority through consistent publishing

Schema Evolution

The modular schema system allows for easy expansion:

• Product reviews with Product schema
• FAQ sections with FAQPage schema
• How-to content with HowTo schema
• Video content with VideoObject schema

Future-Proofing Your SEO

Ampo’s architecture is designed to adapt to evolving SEO requirements:

• Semantic HTML structure
• Flexible meta tag system
• Extensible structured data
• Performance-first approach

This comprehensive SEO foundation ensures that your content has the best possible chance of ranking well and attracting organic traffic, while the flexible architecture allows for customization and enhancement as your needs evolve.