让你的网页在搜索引擎和社交媒体上脱颖而出
Open Graph（OG）协议由 Facebook 提出，用于控制网页在社交媒体上分享时的显示样式。
<head>
<!-- 页面标题 -->
<meta property="og:title" content="文章标题 - 我的网站">
<!-- 页面类型 -->
<meta property="og:type" content="article">
<!-- 页面 URL -->
<meta property="og:url" content="https://example.com/article.html">
<!-- 分享图片（推荐尺寸 1200x630）-->
<meta property="og:image" content="https://example.com/images/share.jpg">
<!-- 网站名称 -->
<meta property="og:site_name" content="我的网站">
<!-- 页面描述 -->
<meta property="og:description" content="这是一篇关于...的文章">
<!-- 语言区域 -->
<meta property="og:locale" content="zh_CN">
</head><!-- Twitter 卡片类型：summary, summary_large_image, app, player -->
<meta name="twitter:card" content="summary_large_image">
<!-- Twitter 账号 -->
<meta name="twitter:site" content="@mywebsite">
<meta name="twitter:creator" content="@author">
<!-- Twitter 标题和描述 -->
<meta name="twitter:title" content="文章标题">
<meta name="twitter:description" content="文章描述">
<meta name="twitter:image" content="https://example.com/images/share.jpg">Favicon（收藏夹图标）显示在浏览器标签页、书签栏和移动设备主屏幕图标。
<head>
<!-- 标准 favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- PNG 格式（推荐）-->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<!-- Safari Pinned Tab -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<!-- 主题颜色（Android Chrome 地址栏）-->
<meta name="theme-color" content="#ffffff">
<!-- MS Application Tile -->
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/browserconfig.xml">
</head>通过资源提示优化页面加载性能。
| 属性 | 用途 | 使用场景 |
|---|---|---|
preload |
预加载当前页面需要的资源 | 关键 CSS、字体、首屏图片 |
prefetch |
预取未来可能需要的资源 | 下一页的资源 |
preconnect |
预先建立连接 | 第三方域名（CDN、API） |
dns-prefetch |
预先 DNS 解析 | 将要访问的域名 |
<!-- 预加载关键字体 -->
<link rel="preload" href="/fonts/main-font.woff2" as="font" type="font/woff2" crossorigin>
<!-- 预加载关键 CSS -->
<link rel="preload" href="/css/critical.css" as="style">
<!-- 预加载首屏图片 -->
<link rel="preload" href="/images/hero.jpg" as="image">
<!-- 预取下一页 -->
<link rel="prefetch" href="/next-page.html">
<!-- 预先建立与第三方服务的连接 -->
<link rel="preconnect" href="https://cdn.example.com">
<!-- 预先 DNS 解析 -->
<link rel="dns-prefetch" href="https://api.example.com">CSP 是一种安全机制，用于防止 XSS（跨站脚本攻击）和数据注入攻击。
<!-- 基本 CSP 配置 -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self' 'unsafe-inline' https://trusted-cdn.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
img-src 'self' data: https:;
font-src 'self' https://fonts.gstatic.com;
connect-src 'self' https://api.example.com;">| 指令 | 说明 |
|---|---|
default-src |
默认资源加载策略 |
script-src |
JavaScript 加载策略 |
style-src |
CSS 加载策略 |
img-src |
图片加载策略 |
font-src |
字体加载策略 |
connect-src |
AJAX、WebSocket 连接策略 |
frame-src |
iframe 加载策略 |
| 值 | 说明 |
|---|---|
'self' |
只允许同源资源 |
'none' |
不允许任何资源 |
'unsafe-inline' |
允许内联脚本/样式（不推荐） |
'unsafe-eval' |
允许 eval()（不推荐） |
https: |
只允许 HTTPS 资源 |
data: |
允许 data URI |
<!-- Report-Only 模式（只报告不阻止）-->
<meta http-equiv="Content-Security-Policy-Report-Only"
content="default-src 'self'; report-uri /csp-report">为你的网站配置完整的 head 区域：