这一页的 <head> 全文

直接看源码标签页的图标、标题，以及下面两种「别人怎么展示你的页面」。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>示例 16：head 里的元信息与分享卡片</title>
  <meta name="description" content="这一页把 viewport、title、description、canonical 与 OG 的实际效果摆在明面上。">
  <link rel="canonical" href="https://example.com/tutorials/html/demos/16-head-seo.html">
  <meta property="og:type" content="article">
  <meta property="og:title" content="HTML 教程：从第一个标签到语义化页面">
  <meta property="og:description" content="19 章循序渐进，每章配可直接运行的示例。">
  <meta property="og:image" content="…1200x630 的图…">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="theme-color" content="#e34f26">
  <link rel="icon" href="/favicon.svg">
</head>

viewport 那一行到底在说什么

width=device-width 告诉浏览器「按设备逻辑宽度排版」，initial-scale=1 是初始不缩放。漏写这一行，手机会把页面按 980px 宽排版再整体缩小——文字小得看不清，且媒体查询完全失效（它看到的宽度永远是 980，而不是 375）。

不要再加的：user-scalable=no / maximum-scale=1。它禁止用户双指放大，是可访问性错误，也已被浏览器忽略。

搜索结果里的样子

分享到社交平台时的卡片

example.com

HTML 教程：从第一个标签到语义化页面

19 章循序渐进，每章配可直接运行的示例。

og:image 必须是绝对 URL且尺寸约 1200×630；相对路径在多数平台不会报错，只是卡片没有图。上面这张图为了自包含用了内联 SVG，实际部署请换成可访问的 jpg/png —— 部分平台不支持 SVG 作为 og:image。

剩下的常用项