Skip to main content

Best Practices

Optimize your Ssiat integration with these recommendations.

Performance​

Cache Your Images​

Don't generate the same image multiple times:

// Good: Generate once, cache the URL
const ogImageUrl = await generateOgImage(postData);
await saveToDatabase(postId, ogImageUrl);

// Bad: Generate on every request
app.get('/post/:id', async (req, res) => {
  const ogImage = await generateOgImage(postData); // Avoid this!
});

Use WebP Format​

WebP offers the best quality-to-size ratio:

{
  "options": {
    "format": "webp",
    "quality": 85
  }
}

Pre-generate at Build Time​

For static sites, generate images during build:

// In your build script
for (const post of posts) {
  const ogImage = await ssiat.generate({
    template: 'blog',
    data: { title: post.title }
  });
  post.ogImage = ogImage.url;
}

Security​

Protect Your API Key​

// Good: Use environment variables
const apiKey = process.env.SSIAT_API_KEY;

// Bad: Hardcode in source
const apiKey = 'sk_live_xxx'; // Never do this!

Server-Side Only​

Never expose API calls in client-side code:

// Good: Server-side API route
app.post('/api/generate-og', async (req, res) => {
  const result = await ssiat.generate(req.body);
  res.json(result);
});

// Bad: Client-side fetch with API key
fetch('https://ssiat.dev/api/v1/og/generate', {
  headers: { 'Authorization': 'Bearer sk_live_xxx' } // Exposed!
});

Error Handling​

Always handle errors gracefully:

async function getOgImage(data) {
  try {
    const response = await ssiat.generate(data);
    if (!response.success) {
      console.error('Ssiat error:', response.error);
      return FALLBACK_OG_IMAGE;
    }
    return response.data.url;
  } catch (error) {
    console.error('Network error:', error);
    return FALLBACK_OG_IMAGE;
  }
}

SEO Optimization​

Complete Meta Tags​

<!-- Primary OG Tags -->
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://ssiat.dev/og/xxx.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="article" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://ssiat.dev/og/xxx.png" />

Test Your Images​

Use these tools to preview:

Rate Limit Management​

Stay within your plan limits:

import Bottleneck from 'bottleneck';

const limiter = new Bottleneck({
  maxConcurrent: 5,
  minTime: 100 // 10 requests per second max
});

const generateOgImage = limiter.wrap(ssiat.generate);

Monitoring​

Track your API usage:

  1. Check usage in your Dashboard
  2. Set up alerts for quota warnings
  3. Monitor error rates
  4. Review response times