Skip to main content

SEO & Metadata

<link rel="canonical"> tells search engines the preferred URL for duplicate content (e.g., with/without trailing slash, query parameters). Prevents duplicate content penalties.

<link rel="canonical" href="https://example.com/page">

Open Graph & Twitter Cards​

Essential meta tags for social sharing:

<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
  • og:image: Recommended 1200x630px
  • og:type: article, website, video, etc.

Twitter Cards use twitter:card, twitter:title, twitter:description, twitter:image for platform-specific optimization.

A hidden anchor that becomes visible on keyboard focus — critical for keyboard/screen reader users:

<a href="#main-content" class="skip-link">Skip to main content</a>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}