Deploying and Optimizing Your PortfolioLesson 5.4

How to add SEO metadata to a portfolio site

meta title and description, Open Graph tags, Twitter Card meta, canonical URL, favicon setup, robots.txt, sitemap basics, structured data basics

SEO Makes Your Portfolio Findable

SEO on a portfolio serves two goals: getting found when someone Googles your name, and making your link look professional when shared on LinkedIn or Slack.

Essential Meta Tags

<head>
  <!-- Basic SEO -->
  <title>Jane Doe | Frontend Engineer</title>
  <meta name="description"
    content="Frontend engineer building fast, accessible apps for SaaS teams. View my projects and get in touch." />
  <link rel="canonical" href="https://janedoe.dev" />

  <!-- Open Graph (LinkedIn, Slack, Discord previews) -->
  <meta property="og:title" content="Jane Doe | Frontend Engineer" />
  <meta property="og:description"
    content="Frontend engineer building fast, accessible apps for SaaS teams." />
  <meta property="og:image" content="https://janedoe.dev/assets/og-image.png" />
  <meta property="og:url" content="https://janedoe.dev" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Jane Doe | Frontend Engineer" />
  <meta name="twitter:image" content="https://janedoe.dev/assets/og-image.png" />
</head>

The og:image should be 1200x630px. Create a simple graphic with your name, role, and a clean background. This image appears every time someone shares your portfolio link. Test your Open Graph tags at opengraph.xyz before sharing anywhere.