skills.rest
newstler
newstlerCOMMUNITY
Explore all skills by this author →
Website𝕏@yurisidorovGitHub

og-image

Generate Open Graph images for Rails apps via a dedicated /og-image route.

20|Updated Dec 6, 2024
Search Tags:#screenshot#design-system#rails#social-media#open-graph#og-image
One-click install
npx skills add https://github.com/newstler/template --skill og-image-newstler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: og-image
Source: https://github.com/newstler/template/tree/main/.claude/skills/og-image
Command: npx skills add https://github.com/newstler/template --skill og-image-newstler

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill creates Open Graph social previews for Rails apps by generating a dedicated image at /og-image that matches the project's design system and is suitable for social sharing.

Core Features & Use Cases

  • Automated OG Image: Generates a 1200x630 image on the /og-image route that aligns with the app's design system.
  • Meta Tag Integration: Configures og:image and twitter:image tags in the layout head for seamless social previews.
  • Per-Page Customization: Allows per-page override via content_for for title, description, and image.

Quick Start

Start the Rails server and navigate to /og-image to render the 1200x630 Open Graph image.

Frequently Asked Questions about og-image

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Open Graph images for a Rails app?▼

To generate Open Graph images for a Rails app, this Skill creates a dedicated 1200x630 image page at the /og-image route, allowing you to render and screenshot a project-specific social preview.

What is the best way to automate OG image creation in Rails?▼

The best way to automate OG image creation in Rails is by rendering a self-contained page at /og-image that matches your design system, which you can then screenshot for social media sharing.

Can I customize the OG image content per page in Rails?▼

Yes, you can customize the OG image content per page by using the content_for helper to override the title, description, and image within your Rails application layout.

How do I integrate og:image meta tags in a Rails layout?▼

You integrate og:image meta tags by configuring the og:image and twitter:image tags directly in the Rails layout head, ensuring seamless social previews when the URL is shared.

Does the OG image generation workflow support i18n text integration?▼

Yes, the OG image generation workflow supports i18n-driven text integration, allowing you to render localized text content directly within the 1200x630 Open Graph image.

How do I take a screenshot of the OG image during local development?▼

To take a screenshot during local development, start the Rails server and navigate to the /og-image route to view and capture the 1200x630 Open Graph image.

Related Skills

Explore More Software Engineering Skills→
DicklesworthstoneDicklesworthstone
185

creating-share-images

Generate OpenGraph and Twitter share images with next/og ImageResponse.

Community
Intermediate
dirnbauerdirnbauer
33

og-image

Generate Open Graph images and configure social meta tags for web frameworks.

Community
Intermediate
victorp1leonvictorp1leon

astro-seo-metadata-sync

Synchronize Astro canonical and social meta tags to a shared base URL.

Community
Advanced
ProfPowellProfPowell
1

dependency-wrapper

Create wrappers to isolate third-party library dependencies.

Community
Advanced