ASP.NET Core

Aspnet coreASP.NET Core

Generate a unique OG image for every page, or any on-demand graphic, from a single Imejis template. The pattern below uses an ASP.NET Core minimal API endpoint as a thin proxy: your API key stays on the server, and the browser (and social crawlers) only ever see your own URL.

Set two environment variables first: IMEJIS_API_KEY (from your dashboard) and IMEJIS_DESIGN_ID (any design's ID).

.env / app settings

IMEJIS_API_KEY=your_api_key
IMEJIS_DESIGN_ID=your_design_id

1 an endpoint that renders the image1. An endpoint that renders the image

This endpoint takes a title query param, POSTs it to Imejis as a component.property override with the dma-api-key header, and returns the finished image bytes. Because the key is sent server-side, it never reaches the client.

Program.cs

using System.Text;
 
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddHttpClient();
var app = builder.Build();
 
app.MapGet("/og", async (string? title, IHttpClientFactory factory) =>
{
    var designId = Environment.GetEnvironmentVariable("IMEJIS_DESIGN_ID");
    var apiKey = Environment.GetEnvironmentVariable("IMEJIS_API_KEY");
    var json = System.Text.Json.JsonSerializer.Serialize(
        new Dictionary<string, string> { ["headline.text"] = title ?? "Untitled" });
 
    var client = factory.CreateClient();
    var request = new HttpRequestMessage(
        HttpMethod.Post, $"https://render.imejis.io/v1/{designId}");
    request.Headers.Add("dma-api-key", apiKey);
    request.Content = new StringContent(json, Encoding.UTF8, "application/json");
 
    var response = await client.SendAsync(request);
    var bytes = await response.Content.ReadAsByteArrayAsync();
 
    // Renders are deterministic, so cache aggressively at the edge/CDN.
    var result = Results.File(bytes, "image/jpeg");
    return result;
})
.WithMetadata(new Microsoft.AspNetCore.Mvc.ResponseCacheAttribute { Duration = 31536000 });
 
app.Use(async (context, next) =>
{
    await next();
    if (context.Request.Path == "/og")
        context.Response.Headers.CacheControl =
            "public, immutable, no-transform, max-age=31536000";
});
 
app.Run();

2 point your view at it2. Point your view at it

Reference the endpoint from your Razor view or meta tags, passing each page's real data. Social platforms fetch /og?title=… from your own domain, no key exposed.

Pages/Post.cshtml

@{ var ogImage =
$"https://your-site.com/og?title={Uri.EscapeDataString(Model.Title)}"; }
<meta property="og:image" content="@ogImage" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="@ogImage" />

Override any field. Each dynamic component exposes keys like headline.text, title.color, or image.image. Send only the ones you want to change. A design's overridable fields are listed in its Share / API panel.