Social Preview for Your Portfolio Website — Control What People See Before They Click

You send a recruiter your portfolio URL, paste it in a LinkedIn DM, or share it on Twitter. If the link preview looks wrong — a broken image, a generic title, or nothing at all — your first impression takes a hit before they even click.

For designers, developers, photographers, and any creative, the link preview is a piece of personal branding. Getting it right is worth the 20 minutes it takes. Here is the complete guide to setting up and verifying your portfolio website's social preview.

Why Portfolio Social Previews Matter More Than You Think

When someone shares your portfolio URL, the preview card is what shows up in the thread, chat, or email. On LinkedIn, a well-configured link preview with a compelling thumbnail and sharp title can increase clicks by 2-3x compared to a missing or broken preview. On Twitter/X, a large card image literally takes up a quarter of the screen — that is prime visual real estate.

For creatives, the social preview is also a portfolio piece in itself. A designer whose portfolio link preview shows off a beautiful screenshot of their work is practicing what they preach. A developer whose portfolio URL shows a blank grey box is not.

The tags that control your social preview are Open Graph tags in your portfolio page HTML. You have full control over them if you built your portfolio yourself or are using a platform that allows custom meta tags.

The Three Tags Every Portfolio Must Have

These are the minimum Open Graph tags for a good portfolio link preview:

<meta property="og:title" content="Jane Smith — Product Designer" />
<meta property="og:description" content="Product designer specializing in SaaS dashboards and design systems. Available for freelance." />
<meta property="og:image" content="https://yourportfolio.com/preview.jpg" />

og:title — your name and role. Keep it under 60 characters: "Jane Smith — Product Designer" or "Alex Chen | Full-Stack Developer."

og:description — one or two sentences explaining what you do and who you do it for. Under 155 characters. Include a differentiator or availability status.

og:image — a 1200x630 pixel image at an absolute HTTPS URL. This is the most important element. Make it a high-quality screenshot of your best work, a stylized headshot, or a custom designed preview card.

Optional but valuable

Add twitter:card set to summary_large_image for a large Twitter card format. Add og:url pointing to your canonical portfolio URL. Add twitter:site with your Twitter handle if you have one.

Sell Custom Apparel — We Handle Printing & Free Shipping

Portfolio Social Preview by Platform

Different platforms render link previews differently. Here is what to expect on the ones that matter most for portfolio sharing.

LinkedIn

LinkedIn is where recruiters and hiring managers spend time. Your portfolio preview here shows a landscape thumbnail (1200x627 recommended), your og:title in bold, and your og:description below. LinkedIn is strict about image sizes — use exactly 1200x627 or 1200x630 for a full-width card.

Twitter / X

Set twitter:card to summary_large_image. This shows a large preview image that fills the card width, making your portfolio stand out in feeds. Without this tag, Twitter shows a small square thumbnail beside the text — far less impactful for visual work.

Slack and Discord (for DMs to developers and agencies)

Both Slack and Discord read og:image directly. A 1200x630 image displays cleanly in chat threads. These previews appear inline in the conversation, so a striking work sample image gets immediate attention.

WhatsApp and iMessage

Mobile messaging previews are smaller but still important when sharing informally. The preview shows a small thumbnail with your title. A clean og:image with text overlay (your name and role) readable at small sizes works best here.

How to Set Up Social Preview on Popular Portfolio Platforms

Here is where to configure OG tags on the platforms designers and developers most commonly use.

Webflow

Go to Page Settings for any page. Under Open Graph, set the title, description, and upload an image. Webflow generates the og: tags from these fields. Set this for your homepage at minimum, and also for key case study pages.

Framer

In Framer, open Site Settings, then navigate to SEO. Set the Social Share Image (1200x630) and share title. Framer applies this as the og:image and og:title sitewide. See the Framer social preview guide for troubleshooting when it does not work.

GitHub Pages / Custom-built

Add the og: meta tags directly in your HTML head section. For static sites, add them to every page. For Next.js or React apps, use the Metadata API or a head management library. See the React and Next.js meta tags guide for implementation details.

Squarespace

Go to Pages, click on a page, then SEO. Under Social Sharing, upload an image and set the title and description for that page. Squarespace handles the og: tags from these inputs.

How to Test Your Portfolio Link Preview

After setting up your OG tags, verify them before sending your portfolio to anyone important.

Using the Open Graph Checker

1. Open your portfolio homepage in a browser
2. Press Ctrl+U (Windows) or Cmd+U (Mac) to view the HTML source
3. Select all and copy
4. Open the Open Graph Checker and paste the HTML
5. Click Check Tags

The checker shows the actual tags in your HTML and renders both the Facebook/LinkedIn card and the Twitter card. Verify your image loads correctly, the title is not truncated, and the description is compelling.

Also check key case study pages individually — each project page should have its own og:image showing a preview of that project, not just your homepage image.

Check the multi-platform social preview checker if you want to verify across more platforms at once.

Frequently Asked Questions

What image should I use for my portfolio social preview?

Use a 1200x630 pixel image that represents your best work or personal brand. Options include: a high-quality screenshot of your best project, a styled headshot with your name and role overlaid, a custom designed "card" in your portfolio style, or a collage of project thumbnails. Avoid generic photos or low-resolution images — this is essentially your digital business card.

Should I set different OG tags for my homepage vs individual project pages?

Yes. Your homepage og:image and og:title should represent you as a whole. Each individual project or case study page should have its own og:image showing that specific project, with an og:title naming the project. When a recruiter shares a specific project link, the preview should immediately communicate what that project is.

How do I check my portfolio preview on LinkedIn specifically?

The Open Graph Checker renders a Facebook/LinkedIn preview card using your og:title, og:description, and og:image. LinkedIn uses the same og: namespace as Facebook. For a live test on LinkedIn itself, use LinkedIn's Post Inspector at linkedin.com/post-inspector — paste your URL and it shows the real rendered preview plus forces a cache refresh.