ogimage.click

https://github.com/weijunext/ogimage-click
Admin
ogimage.click is a free and open-source tool for generating customizable Open Graph images,...
Tokens:3,084
Snippets:34
Trust Score:7.3
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
### Start the development server with pnpm dev

Source: https://github.com/weijunext/ogimage-click/blob/main/README.md

Start the development server.

```bash
pnpm dev
```

--------------------------------

### Install dependencies with pnpm

Source: https://github.com/weijunext/ogimage-click/blob/main/README.md

Install project dependencies using pnpm (recommended) or npm.

```bash
pnpm install
```

--------------------------------

### Example Open Graph and Twitter meta tags

Source: https://github.com/weijunext/ogimage-click/blob/main/README.md

Example HTML meta tags for Open Graph and Twitter cards. Use these in your project to enable social sharing previews.

```html
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://yourdomain.com/og.png" />
<meta property="og:url" content="https://yourdomain.com" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og.png" />
```

--------------------------------

### Configure environment variables in .env.local

Source: https://github.com/weijunext/ogimage-click/blob/main/README.md

Set up environment variables in .env.local. The Google IDs are left empty for optional integration.

```bash
NEXT_PUBLIC_BASE_URL=http://localhost:3000
NEXT_PUBLIC_API_URL=http://localhost:3000/api
NEXT_PUBLIC_GOOGLE_ID=
NEXT_PUBLIC_GOOGLE_ADSENSE_ID=
```

--------------------------------

### Clone the ogimage.click repository

Source: https://github.com/weijunext/ogimage-click/blob/main/README.md

Clone the repository and navigate into the project directory.

```bash
git clone https://github.com/weijunext/ogimage-click.git
cd ogimage.click
```

--------------------------------

### Basic Open Graph meta tags for OG image

Source: https://github.com/weijunext/ogimage-click/blob/main/app/guides/posts/og-image-tips-2025-social-sharing-guide.mdx

Use these HTML meta tags to define the title, description, image, and URL for social sharing. Place them in the head of your webpage to control how your content appears when shared on platforms like Facebook, Twitter, and LinkedIn.

```html
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your Page Description">
<meta property="og:image" content="Your Image URL">
<meta property="og:url" content="Your Page URL">
```
Tokens:
Raw