Strapi Plugin: Open Graph Pretty Link

A custom field for Strapi that allows content editors to fetch Open Graph data from a URL and save it as structured JSON. This enables you to easily create beautiful, data-rich preview cards in your frontend application.

Features

• Easy to Use: Simply paste a URL and click "Fetch".
• Rich Data: Fetches OG title, description, image, and more.
• Live Preview: Shows a preview of the card directly in the Content Manager.
• Developer Friendly: Saves clean JSON data to your content type.

Requirements

• Strapi v5.12.5 or higher
• Node.js v18 or higher

1. Installation

In your Strapi project, install the plugin from npm:

npm install @spencercooley/strapi-plugin-og-pretty-link

2. Plugin Configuration

Enable the plugin in your Strapi project by creating or editing the file config/plugins.ts:

1// file: config/plugins.ts
2export default {
3  'og-pretty-link': {
4    enabled: true,
5  },
6};

3. Security Middleware Configuration

For the image previews in the admin panel to work correctly, you must update your application's Content Security Policy (CSP). This is because the OG images can come from any website.

In config/middlewares.ts, modify the strapi::security middleware to allow images from any http: or https: source:

1// file: config/middlewares.ts
2export default [
3  'strapi::logger',
4  'strapi::errors',
5  {
6    name: 'strapi::security',
7    config: {
8      contentSecurityPolicy: {
9        useDefaults: true,
10        directives: {
11          // Allow images from any source for previews
12          'img-src': ["'self'", 'data:', 'blob:', 'https://market-assets.strapi.io', 'http:', 'https:'],
13        },
14      },
15    },
16  },
17  'strapi::cors',
18  'strapi::poweredBy',
19  'strapi::query',
20  'strapi::body',
21  'strapi::session',
22  'strapi::favicon',
23  'strapi::public',
24];

After configuring the plugin and middleware, rebuild your admin panel and restart the server:

npm run build
npm run develop

4. Usage (Schema Definition)

While you can add the field via the Content-Type Builder UI, it is recommended to define it directly in your schemas for version control and consistency.

Option A: Add as a Component in a Dynamic Zone (Recommended)

This is the most flexible approach, allowing you to add link previews anywhere in your content.

Step 1: Create the Component Schema

Create a new file at src/components/shared/og-link.json.

Important: Strapi components are organized into categories based on the folder structure inside src/components. In this case, shared is the category name. This allows you to organize your components logically (e.g., shared, page_sections, marketing).

1// file: src/components/shared/og-link.json
2{
3  "collectionName": "components_shared_og_links",
4  "info": {
5    "displayName": "OG Link",
6    "icon": "link",
7    "description": "A component to fetch and display Open Graph link previews."
8  },
9  "options": {},
10  "attributes": {
11    "data": {
12      "type": "customField",
13      "customField": "plugin::og-pretty-link.og-link"
14    }
15  }
16}

Step 2: Add the Component to a Dynamic Zone

In your Content Type's schema (e.g., src/api/article/content-types/article/schema.json), add the newly created component to your dynamiczone's components array.

Notice how "shared.og-link" directly maps to the folder and file you created (shared/og-link.json).

1// file: src/api/article/content-types/article/schema.json
2{
3  // ... other schema properties
4  "attributes": {
5    // ... other attributes
6    "blocks": {
7      "type": "dynamiczone",
8      "components": [
9        "shared.media",
10        "shared.quote",
11        "shared.rich-text",
12        "shared.og-link" // <-- Add this line
13      ]
14    }
15  }
16}

Option B: Add as a Standalone Field

If you don't need a dynamic zone, you can add the field directly to any content type's schema.json:

1// file: src/api/my-content-type/content-types/my-content-type/schema.json
2{
3  // ... other schema properties
4  "attributes": {
5    // ... other attributes
6    "my_link_preview": {
7      "type": "customField",
8      "customField": "plugin::og-pretty-link.og-link"
9    }
10  }
11}

After defining your schemas, restart your Strapi server. The "OG Link" field will now be available in your content editor.