Logo

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
1https://snapog.com

Authentication

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

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

Endpoints

Generate an Open Graph image for a specific URL.

HTTP Request

HTTP Request
1GET /api/{apiKey}

Parameters

ParameterTypeRequiredDescription
urlQuery ParameterYesThe URL to generate an OG image for

Example Request

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

Example Usage in HTML

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

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
1import { NextRequest, NextResponse } from "next/server"; 2 3export default function middleware(request: NextRequest) { 4 const response = NextResponse.next(); 5 response.headers.set("x-current-path", request.nextUrl.pathname); 6 7 return response; 8} 9
Step 2: Configure Open Graph metadata
src/app/layout.tsx
1export async function generateMetadata() { 2 const headersList = headers(); 3 const pathname = headersList.get("x-current-path"); 4 const domain = process.env.NEXT_PUBLIC_VERCEL_DOMAIN; 5 const apiKey = process.env.SNAP_OG_API_KEY; 6 7 return { 8 ..., 9 openGraph: { 10 ..., 11 images: [ 12 { 13 url: 'https://snapog.com/api/${apiKey}?url=${domain}${pathname}', 14 width: 1200, 15 height: 630, 16 }, 17 ], 18 }, 19 } 20}

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
1/** 2 * Override OpenGraph image URLs with SnapOG API 3 */ 4function snapog_override_opengraph($og_tags) { 5 // Get current page URL path 6 $current_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH); 7 8 // API configuration 9 $domain = $_SERVER['HTTP_HOST']; 10 $api_key = defined('SNAP_OG_API_KEY') ? SNAP_OG_API_KEY : 'YOUR_API_KEY'; 11 12 // Generate the OG image URL 13 $og_image_url = "https://snapog.com/api/{$api_key}?url={$domain}{$current_path}"; 14 15 // For Yoast SEO 16 if (function_exists('wpseo_init')) { 17 add_filter('wpseo_opengraph_image', function() use ($og_image_url) { 18 return $og_image_url; 19 }); 20 add_filter('wpseo_opengraph_image_size', function() { 21 return ['width' => 1200, 'height' => 630]; 22 }); 23 } 24 25 // For Rank Math 26 if (class_exists('RankMath')) { 27 add_filter('rank_math/opengraph/facebook/image', function() use ($og_image_url) { 28 return $og_image_url; 29 }); 30 add_filter('rank_math/opengraph/twitter/image', function() use ($og_image_url) { 31 return $og_image_url; 32 }); 33 } 34 35 return $og_tags; 36} 37add_action('wp_head', 'snapog_override_opengraph', 9); 38

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

wp-config.php
1define('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
1<?php 2// Get current page URL path 3$current_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH); 4$domain = $_SERVER['HTTP_HOST']; 5$api_key = defined('SNAP_OG_API_KEY') ? SNAP_OG_API_KEY : 'YOUR_API_KEY'; 6 7// Generate the OG image URL 8$og_image_url = "https://snapog.com/api/{$api_key}?url={$domain}{$current_path}"; 9?> 10 11<!-- OpenGraph Tags --> 12<meta property="og:image" content="<?php echo esc_url($og_image_url); ?>"> 13<meta property="og:image:width" content="1200"> 14<meta property="og:image:height" content="630">

Shopify

Integrate SnapOG into your Shopify store by editing your theme.

Edit Your Theme's Layout File
  1. From your Shopify admin, go to Online Store > Themes
  2. Click Actions > Edit code for your active theme
  3. Under the Layout directory, open theme.liquid
  4. Find the <head> section and add the code below
theme.liquid
1{% assign current_path = request.path %} 2{% assign domain = shop.domain %} 3{% assign api_key = 'YOUR_SNAP_OG_API_KEY' %} 4{% assign og_image_url = 'https://snapog.com/api/' | append: api_key | append: '?url=' | append: domain | append: current_path %} 5 6<meta property="og:image" content="{{ og_image_url }}"> 7<meta property="og:image:width" content="1200"> 8<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
1{ 2 "name": "API Settings", 3 "settings": [ 4 { 5 "type": "text", 6 "id": "snap_og_api_key", 7 "label": "SnapOG API Key" 8 } 9 ] 10}

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

theme.liquid
1{% 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 codeMessage
400Missing URL or API keyorInsufficient credits
401Invalid API key
404Invalid URLorDomain not found
500Internal server error