An Open Graph (OG) image is the visual shown when a portfolio page is shared, but it is only one part of the preview. Add a page-specific image together with og:title, og:type, og:url, and a canonical URL in the document head. Start with a 1200×630-pixel canvas (about 1.91:1), keep important content 60–80 pixels from the edges, publish it at an absolute HTTPS URL, and inspect the result with the destination platform’s preview tool.
What an Open Graph image does
The Open Graph protocol lets a web page become a rich object in a social graph. Its four required basic properties are og:title, og:type, og:image, and og:url. The og:image value identifies the image representing that page; it does not replace the title, type, or canonical URL.
For a portfolio, the strongest image represents the specific page being shared: a project preview, an editorial still, a product interface, or a carefully composed case-study graphic. A generic site logo gives social crawlers little context. Google says image selection is automated. You can influence its preferred image with og:image or suitable schema.org image properties, but no site owner controls every search or social preview.
What size should an Open Graph image be?
A practical starting point is 1200×630 pixels, approximately a 1.91:1 ratio. Wix and og-image.org present this as a broad recommendation, not a universal protocol requirement. Individual services can crop, resize, cache, or fall back to another image, so render and inspect the actual preview.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Safe composition
- Keep key text, faces, logos, and interface details roughly 60–80 pixels inside each edge on a 1200×630 canvas.
- Use large, high-contrast type. A design that looks legible in an editor can become unreadable after a small social thumbnail and recompression.
- Prefer a relevant project image over a generic logo or a graphic made mostly of text. Google specifically advises relevance and warns against generic or extreme-aspect-ratio choices.
- Design for cropping: keep the subject and title near the center rather than placing essential information in corners.
Dimensions and limits are platform-specific
The Open Graph protocol defines image properties, not a universal pixel dimension or file-size limit. Wix guidance recommends a maximum of 8 MB, notes that images below 600×315 may appear as small previews, and says WhatsApp previews display only when the image is under 300 KB. Those are Wix recommendations, not rules imposed by every service. Check the current requirements for a critical destination.
How to make the image
Manual template workflow
- Create a 1200×630 document in your design tool.
- Choose a restrained background, then add the project title, a short descriptor, and one strong visual.
- Keep essential elements within the safe area and test the design at thumbnail size.
- Export PNG for crisp text, flat colors, or interface graphics. Export JPG when a photo-heavy image benefits from a smaller file.
- Give each project its own descriptive filename and place the file on the same public domain or a reliably accessible image host.
A browser-based generator can follow the same process: select a template, edit title, description, colors, and background, export the image, and add the resulting metadata. The og-image.org documentation describes a client-side workflow for its own service; treat those details as specific to that tool.
Dynamic per-page generation
If your portfolio is built with a framework or a build step, generate an image from each project’s data. A template can insert the project name, category, color, and a thumbnail at build time. The cited generator documentation points to Satori/Vercel OG and guides for Next.js, React, Vue, and other frameworks.
| Approach | Setup effort | Repeatability | Per-page customization | Best fit |
|---|---|---|---|---|
| Manual template | Low for a small site | Copy and edit each image | High, but manual | A portfolio with a limited number of projects |
| Dynamic generation | Higher initial implementation | Automatic for new or changed pages | Data-driven and consistent | A framework-based portfolio with many project pages |
Do not choose dynamic generation merely because it is fashionable. A well-designed manual template is easier to maintain when the portfolio is small; automation pays off when pages change frequently or share a common data model.
How to add an OG image to your portfolio
Put the metadata in the served page’s <head>, not only in client-side content that a crawler may not execute. Use an absolute, publicly fetchable HTTPS image URL.
<head>
<title>Brand identity — Jane Doe</title>
<link rel="canonical" href="https://portfolio.example/projects/brand-identity">
<meta property="og:title" content="Brand identity — Jane Doe">
<meta property="og:type" content="website">
<meta property="og:url" content="https://portfolio.example/projects/brand-identity">
<meta property="og:image" content="https://portfolio.example/og/brand-identity-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="Blue packaging and wordmark for the Brand Identity project">
</head>When no more specific object type applies, website is the practical choice for a portfolio page; the protocol treats an unmarked-up page as a website. The structured image properties are optional but useful: width, height, MIME type, secure URL, and alternative text can help consumers process the image.
Rank #3
Check the rendered HTML
- Open the public URL in a browser and view the page source or the server-rendered HTML.
- Confirm there is one current
og:imagevalue and that it is absolute HTTPS. - Open the image URL in a private browser window. It must load without a login, expiring token, hotlink restriction, or IP allow-list.
- Verify that
og:urlmatches the canonical page URL, including protocol, hostname, path, and significant trailing-slash conventions. - Share the URL through the destination service’s current preview or inspection tool and examine the actual crop.
PNG, JPG, or WebP?
PNG is a strong default for sharp type, flat colors, and UI screenshots. JPG is usually more compact for photographic work. The generator guide cautions that WebP scraper support varies, so use it only when your target destinations are known to decode it reliably. File-size compression should not destroy small lettering or introduce ringing around logos; inspect the encoded file, not just the source artwork.
Why is my OG image not showing?
Blank or missing preview
- Relative URL: Replace
/images/og.jpgwith a complete HTTPS URL. - Blocked fetch: Remove authentication, hotlink protection, robots or firewall rules that prevent the crawler from retrieving the image. Confirm with a private request from outside your network.
- Wrong document: Check the served page source; a client-side title or image setting may not be present in the initial HTML.
- Unsupported or oversized file: Try a conventional JPG or PNG and reduce the file while preserving readability.
Old image after a redesign
Social services can cache both metadata and image bytes. First confirm the new tags are live, then use the service’s inspection tool to request a fresh scrape. If the old asset remains associated with the URL, publish the replacement under a versioned filename such as project-v2.jpg and update og:image. Facebook Sharing Debugger, LinkedIn Post Inspector, and validators for X or Pinterest are examples cited by the implementation guidance; their names and availability can change.
Unexpected crop or fallback
Re-center the subject, move text inward, and avoid extreme aspect ratios. A service may select another image or apply its own crop despite valid metadata. Google’s guidance is to provide an image relevant to the page rather than assume that one tag guarantees the result everywhere.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Preview and maintenance checklist
- Every indexable portfolio URL has a page-specific title, type, image, and canonical URL.
- The image is approximately 1200×630 with safe edge padding.
- The image URL is absolute HTTPS and publicly fetchable.
- Width, height, MIME type, and descriptive alt text are present where useful.
- PNG or JPG is selected according to the artwork, and the compressed result remains legible.
- A real share preview has been inspected after publishing and after significant image changes.
- Project updates use a changed image URL when cache invalidation is uncertain.
Or skip the browser setup
If you need a rendered screenshot for a portfolio page rather than a hand-designed social card, ScreenshotNeo can return a clean image or PDF from one request. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.
For a one-off capture, use the API documented at ScreenshotNeo’s API documentation:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://portfolio.example/projects/brand-identity -o shot.webpEquivalent Python:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://portfolio.example/projects/brand-identity"}, timeout=90)
open("shot.webp", "wb").write(r.content)Equivalent Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://portfolio.example/projects/brand-identity' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also supports full-page captures with lazy images loaded, CSS-selector element capture, dark mode, device presets and custom viewports, retina scale, PDF settings, custom CSS and JavaScript, click and wait actions, request blocking, headers, cookies, user agents, authorization, timezone and geolocation, transparent backgrounds, resizing, chosen-TTL caching, signed image links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage reporting, and an OpenAPI specification. An MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account.
Frequently Asked Questions
Do I need a different OG image for every portfolio project?
A page-specific image is preferable because it represents the object being shared. A shared default can serve as a fallback, but it gives less context than a project image.
Is 1200×630 an Open Graph requirement?
No. The protocol does not prescribe universal dimensions. 1200×630 is a practical recommendation from Wix and og-image.org, and each destination may process it differently.
Should OG metadata replace structured data?
No. OG tags describe social-share objects; schema.org image properties can also influence Google’s automated image selection. Use the markup appropriate to each consumer.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
