The invisible 10 lines that make your page shareable

The <title> does triple duty: browser tab, bookmark name, and the clickable line in search results. The pattern that works for a personal page: Name - what you do. The meta description is the ~155 character pitch printed beneath it - not a ranking factor so much as the ad copy that decides whether a human clicks you or the result below you.

These render nothing, so no playground here - the honest test is searching your own name once your page has been live a few weeks. Two rules: every page gets a unique title, and the description is written for humans (search engines happily skip keyword soup and generate their own instead).

• <link rel="canonical" href="https://you.github.io/"> - declares the one true URL when the same page is reachable several ways (with and without a trailing slash, with tracking parameters). Search engines then pool all the credit onto one address instead of splitting it.
• <meta name="robots" content="noindex"> - asks search engines not to list the page. For drafts and private client pages, not for your portfolio. Honesty note: it is a request, not a lock - real secrets need real access control, never just a meta tag.

That is the whole beginner SEO story, and it is deliberately boring: no tricks, no meta keywords (dead since 2009), just accurate labels on well-structured content. The heading discipline from Session 1 is doing more for your ranking than any tag in this section.

Six og tags plus one Twitter/X line cover every platform that matters. Head-only, invisible on the page itself, so this is a copy-paste block rather than a live panel - the "preview" happens on LinkedIn:

• og:image is the card. Make a 1200 x 630 PNG or JPG (the universal safe size): your name big, one line of what you do, brand color background. Any slide tool exports one in five minutes. The URL must be absolute - crawlers do not resolve relative paths from your head.
• og:title can differ from your title tag. The title tag serves search; og:title serves the feed. "Phoebe Fu - data and AI leader" works for both, but you are allowed a punchier feed version.
• twitter:card summary_large_image is the one non-og line worth adding: it asks X (and several tools that reuse the tag) for the big-image layout instead of a thumbnail.

The mechanic to understand: when you paste a link, the platform's crawler fetches your page right then, reads the og tags, and caches the result - often for days. Two consequences:

• Test before you post. Paste your URL into opengraph.xyz to preview the card across platforms, or use LinkedIn's own Post Inspector (search "LinkedIn Post Inspector", it needs a login). Both show exactly what the crawler sees.
• Fixed a typo but the old card keeps appearing? That is the cache. The Post Inspector re-scrapes on demand; failing that, sharing the URL with a harmless query string like ?v=2 forces a fresh fetch.

The whole workflow, start to finish:

• The SVG is the star - one vector file, sharp at every size, and you can write it by hand with your Deep dive 6.2 skills. Modern browsers pick it first.
• apple-touch-icon is the 180 x 180 PNG iOS uses when someone saves your page to their home screen. The sizes attribute tells the browser which dimensions a link offers so it can choose without downloading.
• favicon.ico is the 1999 veteran. Browsers still request /favicon.ico by convention even with no link tag (check any server log), so parking one there silences 404s.

And the beginner-favorite trick - an emoji as your favicon, via a handwritten SVG, no image editor involved:

Head links do not render in a page body, so no live panel - drop the file next to your index.html, add the link line, hard-refresh, and watch your tab. That five-second icon change is the most visible payoff in this whole dive.

Three more head lines you will meet in every view-source, now demystified:

• <meta name="viewport" content="width=device-width, initial-scale=1.0"> - the line that makes pages readable on phones instead of rendering a shrunken desktop. It has been in your skeleton since Session 1; now you know its job.
• <meta name="theme-color" content="#E34F26"> - tints the browser chrome around your page on mobile. Pure polish, one line.
• <meta charset="UTF-8"> - the Session 1 veteran, mentioned once more for placement: keep it first in the head, before any text a broken encoding could scramble.

Give every image its width and height attributes. The browser uses their ratio to reserve the right box before the image arrives, so the text below does not jump when it lands. That jump has a name - layout shift - and it is the thing that makes you tap the wrong button on slow news sites. CSS still controls the displayed size; the attributes just promise the shape.

<img src="https://picsum.photos/seed/phoebe/400/260"
     width="400" height="260"
     alt="A calm placeholder landscape">
<p>This paragraph never jumps: the box
above was reserved from the ratio
before the image finished loading.</p>

By default the browser fetches every image on the page immediately, including the ones three screens down. loading="lazy" defers an image (or iframe) until the reader scrolls near it. One rule saves you from the classic mistake: never lazy-load what is visible on arrival - lazy-loading your hero image makes the most important pixels arrive last.

<p>Above the fold: loads eagerly.</p>
<img src="https://picsum.photos/seed/one/380/220"
     width="380" height="220" alt="First, eager">
<p>Below the fold: these can wait.</p>
<img src="https://picsum.photos/seed/two/380/220"
     width="380" height="220" loading="lazy"
     alt="Second, lazy">
<img src="https://picsum.photos/seed/three/380/220"
     width="380" height="220" loading="lazy"
     alt="Third, lazy">

Sibling hint, recognition level: fetchpriority="high" on the one image that IS your page (the hero) tells the browser to fight for it first. New-ish but harmless where unsupported - unknown attributes are simply ignored, HTML's oldest safety feature.

A phone on 4G should not download the 1600-pixel version of your headshot. srcset lists the same image at several widths (the 400w style numbers are each file's real pixel width), and sizes tells the browser how wide the slot will be, so it can pick the lightest file that still looks sharp. You provide the menu; the browser orders.

<img src="https://picsum.photos/seed/hero/400/250"
     srcset="https://picsum.photos/seed/hero/400/250 400w,
             https://picsum.photos/seed/hero/800/500 800w,
             https://picsum.photos/seed/hero/1200/750 1200w"
     sizes="(max-width: 600px) 90vw, 600px"
     width="400" height="250"
     alt="One image, three candidate files">

srcset serves the same picture at different weights. <picture> goes further: genuinely different images for different situations - a wide landscape crop on desktop, a tight square crop on phones. The browser walks the <source> children top to bottom, takes the first whose media condition matches, and falls back to the inner <img> (which also carries the alt text - always).

<picture>
  <source media="(min-width: 500px)"
          srcset="https://picsum.photos/seed/wide/600/220">
  <img src="https://picsum.photos/seed/tall/260/260"
       width="260" height="260"
       alt="Square crop for narrow screens">
</picture>
<p>Same subject, different crop per screen -
that is art direction.</p>

Bonus use, no media queries: a <source type="image/avif"> then type="image/webp" then a JPG fallback img serves modern formats to modern browsers and never breaks old ones.