Part 2 of 4

Can I Make Google Happy?

View full series →

Completed

Tech·Beginner

Open Graph + Twitter Cards: Making Links Look Great on Social

Apr 3, 2026·6 min read·1,349 words

#nextjs #seo #open-graph #twitter-cards #og-image #social-media #next-js-app-router-seo #frontend-developer-seo

𝕏 in

Key Takeaways

→Open Graph tags control how your link looks when shared on LinkedIn, Twitter, WhatsApp, Slack, and Discord
→Your OG image must be exactly 1200×630 pixels — platforms silently skip images at wrong sizes
→Next.js resolves relative image paths using metadataBase, so /og-image.png works without a full URL
→twitter.card: "summary_large_image" is the setting that enables the big full-width preview on X
→Use GSC URL Inspection → "Test Live URL" to confirm your OG image loads with no 404s before sharing

This post is Part 2 of the Can I Make Google Happy? series.

Introduction

You fixed your metadata. Your title and description look great in Google search results. But when someone shares your portfolio link on LinkedIn or Twitter — what does it look like?

If you haven't set up Open Graph (OG) tags and Twitter Cards, your link preview probably shows a blank box, a random image, or your raw URL. That means fewer clicks, less credibility, and a signal to Google that your site doesn't get much social engagement.

In this blog, I'll show you how I implemented OG tags and Twitter Cards in my Next.js portfolio — and how to use Google Search Console's URL Inspection Tool to verify your page looks exactly right before sharing.

What Is Open Graph?

Open Graph (OG) is a protocol created by Facebook that controls how your page looks when shared on social platforms — LinkedIn, Twitter, WhatsApp, Slack, Discord, iMessage, and more.

When someone pastes a URL into any of these platforms, their crawler visits your page, reads the OG tags in the <head>, and builds a preview card from them.

Google also reads OG tags — specifically og:image is used in some Google search features like image carousels and rich snippets.

How I Set It Up in Next.js

In src/app/layout.tsx, I added the openGraph and twitter fields to my metadata export:

export const metadata: Metadata = {
  // ...other fields from Blog 01...

  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://yourname.dev",
    title: "Your Name | Frontend Developer",
    description:
      "Frontend Developer crafting scalable React & Next.js applications with AI-powered workflows.",
    siteName: "Your Name Portfolio",
    images: [
      {
        url: "/og-image.png",
        width: 1200,
        height: 630,
        alt: "Your Name — Frontend Developer",
      },
    ],
  },

  twitter: {
    card: "summary_large_image",
    title: "Your Name | Frontend Developer",
    description: "Frontend Developer crafting scalable React & Next.js applications.",
    creator: "@yourhandle",
    images: ["/og-image.png"],
  },
};

## Breaking Down Open Graph Fields

`type: "website"`

Tells crawlers this is a standard webpage (not an article, profile, or product). For a portfolio homepage, always use "website".

`locale: "en_US"`

Sets the language and region. This helps LinkedIn and Facebook show your content to the right audience.

`url`

The canonical URL of the page. Should match your alternates.canonical from Blog 01.

`title` and `description`

These can be slightly different from your SEO title and description. The OG title is optimized for sharing — punchy and clear at a glance. My OG description is shorter and more human than the keyword-rich SEO version:

code

"Frontend Developer crafting scalable React & Next.js applications with AI-powered workflows."

### siteName

Shows up under the link preview on Facebook and LinkedIn as the source name.

`images` — The Most Important Field

images: [
  {
    url: "/og-image.png",   // relative — resolved using metadataBase
    width: 1200,
    height: 630,
    alt: "Your Name — Frontend Developer",
  },
],

Required dimensions: 1200×630 pixels (1.91:1 ratio). url is relative because I set metadataBase — Next.js resolves it to https://yourname.dev/og-image.png. The alt field is required for accessibility and is read by crawlers. Put your file in public/ as og-image.png.

How to Create Your OG Image

Your OG image is your first impression when shared. Keep it simple (name, role, subtle tech background), high contrast (readable on both dark and light feeds), and branded (use your portfolio's color scheme).

→Figma — most control, free tier is enough. Create a 1200×630 frame.
→Canva — easiest, search "Open Graph image template"
→og-image.vercel.app — type your name, download instantly

Save the result as public/og-image.png in your Next.js project root.

Next.js opengraph-image.tsx — The Dynamic Way

Next.js also supports a special file src/app/opengraph-image.tsx that generates your OG image dynamically using React and the ImageResponse API:

tsx

import { ImageResponse } from "next/og";

export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default function OGImage() {
  return new ImageResponse(
    <div
      style={{
        background: "#0a0a0a",
        width: "100%",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        color: "#ffffff",
        fontFamily: "sans-serif",
      }}
    >
      <h1 style={{ fontSize: 64, margin: 0 }}>Your Name</h1>
      <p style={{ fontSize: 32, color: "#3b82f6" }}>Frontend Developer</p>
    </div>
  );
}

Next.js automatically serves this at /opengraph-image and uses it as your OG image. No Figma needed.

Breaking Down Twitter Card Fields

twitter: {
  card: "summary_large_image",
  title: "Your Name | Frontend Developer",
  description: "Frontend Developer crafting scalable React & Next.js applications.",
  creator: "@yourhandle",
  images: ["/og-image.png"],
},

### card: "summary_large_image"

This is the setting that enables the big full-width image preview on Twitter/X. The alternative "summary" shows only a small thumbnail. Always use "summary_large_image" for portfolios — it's dramatically more clickable.

`creator`

Your Twitter/X handle. Twitter links this to your profile, which adds credibility and can show a "Follow" button alongside the card.

`images`

Reuse your og-image.png from Open Graph. Twitter crops it slightly differently but the 1200×630 ratio works perfectly.

Google Search Console: URL Inspection Tool

After deploying, use GSC to confirm your OG image is loading correctly.

Step 1: Open Google Search Console and click URL Inspection in the left sidebar.

Step 2: Paste your URL → https://yourname.dev → click "Test Live URL". GSC fetches your page in real time.

→Screenshot — how Google renders your page visually
→HTML — the raw HTML including your OG meta tags
→More Info — any loading errors for resources, including your OG image

If your OG image shows a 404 in the More Info tab, your og-image.png is not in the public/ folder or the path is wrong.

Testing Your OG Tags Before Publishing

→Facebook Debugger — developers.facebook.com/tools/debug — checks OG tags and shows the image preview
→Twitter Card Validator — cards-dev.twitter.com/validator — shows exactly how your Twitter card will appear
→LinkedIn Post Inspector — linkedin.com/post-inspector — LinkedIn share preview
→OpenGraph.xyz — opengraph.xyz — checks all platforms at once in one place

Summary Checklist

→openGraph.type set to "website"
→openGraph.images with a 1200×630 image and alt text
→og-image.png saved in public/ folder
→twitter.card set to "summary_large_image"
→twitter.creator with your handle
→Tested with Facebook Debugger and Twitter Card Validator
→Verified in GSC URL Inspection with no image loading errors

Resources

→Next.js Metadata — openGraph — full reference for every OG field
→Next.js opengraph-image — the dynamic image generation approach
→Facebook Sharing Debugger — validate OG tags instantly
→Twitter Card Validator — preview your Twitter card before publishing
→OpenGraph.xyz — multi-platform OG preview tool

FAQ

Do OG tags affect my Google ranking directly?

Not directly — OG tags are not a ranking factor. But og:image can appear in Google image results and rich snippets, and better social previews mean more clicks and shares, which signals engagement to Google indirectly.

Can I use different images for OG and Twitter?

Yes. The openGraph.images and twitter.images fields are independent. But in practice, using the same 1200×630 image for both works perfectly — the ratio is optimized for both platforms.

Why does my OG image show stale content after I update it?

Social platforms aggressively cache OG data. After updating your image, use the Facebook Debugger's "Scrape Again" button and the Twitter Card Validator to force a cache refresh. LinkedIn may take up to 7 days to update cached previews.

// you just read about nextjs→ you might like

#nextjs

Sitemaps + robots.txt: How to Tell Google Every Page of Your Portfolio

Part 4

8 min read · 2026-04-07

↳ also: nextjs, seo, next-js-app-router-seo, frontend-developer-seo

#nextjs

JSON-LD Schema: The Secret Language That Talks Directly to Google

Part 3

7 min read · 2026-04-05

↳ also: nextjs, seo, next-js-app-router-seo, frontend-developer-seo

#nextjs

How I Set Up SEO in My Next.js Portfolio from Zero

Part 1

7 min read · 2026-04-01

↳ also: nextjs, seo, next-js-app-router-seo, frontend-developer-seo

Open Graph + Twitter Cards: Making Links Look Great on Social

Key Takeaways

Introduction

What Is Open Graph?

How I Set It Up in Next.js

type: "website"

locale: "en_US"

url

title and description

images — The Most Important Field

How to Create Your OG Image

Next.js opengraph-image.tsx — The Dynamic Way

Breaking Down Twitter Card Fields

creator

images

Google Search Console: URL Inspection Tool

Testing Your OG Tags Before Publishing

Summary Checklist

Resources

FAQ

Do OG tags affect my Google ranking directly?

Can I use different images for OG and Twitter?

Why does my OG image show stale content after I update it?

`type: "website"`

`locale: "en_US"`

`url`

`title` and `description`

`images` — The Most Important Field

`creator`

`images`