API Documentation

Getting Started

SnapOG provides a simple API to generate Open Graph images for your web pages. To get started, you'll need an API key which you can obtain from your dashboard after signing up.

Base URL

All API requests should be made to:

Base URL

https://snapog.com

Authentication

All API requests require an API key which should be included in the URL path.

Authentication

/api/{apiKey}?url=your-url

Endpoints

Generate an Open Graph image for a specific URL.

HTTP Request

GET /api/{apiKey}

Parameters

Parameter	Type	Required	Description
`url`	Query Parameter	Yes	The URL to generate an OG image for

Example Request

curl -X GET "https://snapog.com/api/{apiKey}?url=example.com/page" -H "Accept: image/png"

Example Usage in HTML

index.html

<!-- Put in your <head> tag -->
<meta
  property="og:image"
  content="https://snapog.com/api/{apiKey}?url=yourwebsite.com"
/>

Response

The API returns a PNG image if successful. In case of an error, it returns a JSON response with an error message.

Integration Examples

Next.js

For detailed instructions on setting up Open Graph images in Next.js, refer to the official documentation: Next.js Metadata

Step 1: Set up middleware to track current path

src/middleware.ts

import { NextRequest, NextResponse } from "next/server";
              
export default function middleware(request: NextRequest) {
  const response = NextResponse.next();
  response.headers.set("x-current-path", request.nextUrl.pathname);

  return response;
}
                

Step 2: Configure Open Graph metadata

src/app/layout.tsx

export async function generateMetadata() {
  const headersList = headers();
  const pathname = headersList.get("x-current-path");
  const domain = process.env.NEXT_PUBLIC_VERCEL_DOMAIN;
  const apiKey = process.env.SNAP_OG_API_KEY;

  return {
    ...,
    openGraph: {
      ...,
      images: [
        {
          url: 'https://snapog.com/api/${apiKey}?url=${domain}${pathname}',
          width: 1200,
          height: 630,
        },
      ],
    },
  }
}

WordPress

There are two ways to integrate SnapOG with WordPress: using an SEO plugin or manually adding the code to your theme.

Method 1: Using an SEO Plugin

Add this code to your theme's functions.php file to integrate with Yoast SEO or Rank Math

functions.php

/**
 * Override OpenGraph image URLs with SnapOG API
 */
function snapog_override_opengraph($og_tags) {
    // Get current page URL path
    $current_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
    
    // API configuration
    $domain = $_SERVER['HTTP_HOST'];
    $api_key = defined('SNAP_OG_API_KEY') ? SNAP_OG_API_KEY : 'YOUR_API_KEY';
    
    // Generate the OG image URL
    $og_image_url = "https://snapog.com/api/{$api_key}?url={$domain}{$current_path}";
    
    // For Yoast SEO
    if (function_exists('wpseo_init')) {
        add_filter('wpseo_opengraph_image', function() use ($og_image_url) {
            return $og_image_url;
        });
        add_filter('wpseo_opengraph_image_size', function() {
            return ['width' => 1200, 'height' => 630];
        });
    }
    
    // For Rank Math
    if (class_exists('RankMath')) {
        add_filter('rank_math/opengraph/facebook/image', function() use ($og_image_url) {
            return $og_image_url;
        });
        add_filter('rank_math/opengraph/twitter/image', function() use ($og_image_url) {
            return $og_image_url;
        });
    }
    
    return $og_tags;
}
add_action('wp_head', 'snapog_override_opengraph', 9);

Security Tip: Add your API key to wp-config.php

wp-config.php

define('SNAP_OG_API_KEY', 'your-api-key-here');

Method 2: Manual Integration

Add this code to your theme's header.php file within the <head> section

header.php

<?php
// Get current page URL path
$current_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$domain = $_SERVER['HTTP_HOST'];
$api_key = defined('SNAP_OG_API_KEY') ? SNAP_OG_API_KEY : 'YOUR_API_KEY';

// Generate the OG image URL
$og_image_url = "https://snapog.com/api/{$api_key}?url={$domain}{$current_path}";
?>

<!-- OpenGraph Tags -->
<meta property="og:image" content="<?php echo esc_url($og_image_url); ?>">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Shopify

Integrate SnapOG into your Shopify store by editing your theme.

Edit Your Theme's Layout File

From your Shopify admin, go to Online Store > Themes
Click Actions > Edit code for your active theme
Under the Layout directory, open theme.liquid
Find the <head> section and add the code below

theme.liquid

{% assign current_path = request.path %}
{% assign domain = shop.domain %}
{% assign api_key = 'YOUR_SNAP_OG_API_KEY' %}
{% assign og_image_url = 'https://snapog.com/api/' | append: api_key | append: '?url=' | append: domain | append: current_path %}

<meta property="og:image" content="{{ og_image_url }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Store Your API Key Securely

For better security, use Shopify theme settings to store your API key

1. Create settings schema in your config file:

config/settings_schema.json

{
  "name": "API Settings",
  "settings": [
    {
      "type": "text",
      "id": "snap_og_api_key",
      "label": "SnapOG API Key"
    }
  ]
}

2. Update your Liquid code to use the theme setting:

theme.liquid

{% assign api_key = settings.snap_og_api_key %}

Legacy Endpoint

For backward compatibility, the old endpoint /api/get is still supported but we recommend using the new endpoint for new integrations.

Best Practices

Always URL encode the url parameter to ensure proper handling
Consider caching the generated images on your end for better performance
Test your OpenGraph images with the Facebook Sharing Debugger and Twitter Card Validator
Ensure your platform is configured to use the proper meta tags

Error Codes

Error code	Message
`400`	Missing URL or API keyorInsufficient credits
`401`	Invalid API key
`404`	Invalid URLorDomain not found
`500`	Internal server error

Say Goodbye to og:image Headaches

Don't let the challenges of Open Graph image creation slow you down. With SnapOG, you can focus on growing your business while we take care of your branding needs.