<!DOCTYPE html>
<html>
<head>
  <!-- 1. 文档语言 -->
  <meta charset="UTF-8">
  <!-- 2. 移动端视口，必须，手机适配 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 3. SEO 基础元信息 -->
  <title>网页标题 | 网站名称</title>
  <meta name="description" content="网页简介描述，控制搜索引擎搜索结果展示的摘要，控制在120字左右最佳">
  <meta name="keywords" content="HTML,前端,元数据,网页开发">
  <meta name="author" content="作者名字">

  <!-- 4. 爬虫控制：是否允许搜索引擎抓取、跟踪链接 -->
  <meta name="robots" content="index,follow">

  <!-- 5. 兼容旧浏览器 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- 6. 网站图标 favicon -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

  <!-- 7. 外部CSS样式表 -->
  <link rel="stylesheet" href="/css/style.css">

  <!-- 8. base 基础路径，页面所有相对路径都会以此为基准，按需开启 -->
  <!-- <base href="https://example.com/"> -->

  <!-- 9. OG标签：社交分享（微信、QQ、Facebook等分享卡片） -->
  <meta property="og:title" content="网页标题">
  <meta property="og:description" content="分享时展示的简介">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/">
  <meta property="og:image" content="https://example.com/share.jpg">

  <!-- 10. Twitter卡片（可选） -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="网页标题">
  <meta name="twitter:description" content="分享简介">
  <meta name="twitter:image" content="https://example.com/share.jpg">

  <!-- 11. 网页主题色（移动端浏览器顶部栏颜色） -->
  <meta name="theme-color" content="#2563eb">
</head>
<body>
  <!-- 页面可见内容写在这里 -->
</body>
</html>