HTML Meta 笔记
常用 Meta 标签-内容基础标签
页面简介
<meta name="description" content="页面简介"/>
页面关键词
支持多个,使用,
英文逗号间隔区分
<meta name="keywords" content="页面关键词,HTML Meta标签关键词"/>
常用 Meta 标签-页面参数标签
页面编码
<meta charset="utf-8">
禁用页面缩放
适用于响应式设计页面或者手机站点页面
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
Open Graph protocol OG协议(分享卡片)
OG 协议用途:注明内容特性提升SEO、优化社交平台分享卡片的显示提升报告。
使用 OG协议时,需要在 html 标签加上 prefix 参数。
<html prefix="og: https://ogp.me/ns#">
常用 OG协议 Meta 标签
<meta property="og:title" content="像素教程"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="像素教程,问题更简单,操作易上手!"/>
<meta property="og:url" content="https://1px.run/html/meta/"/>
主要在社交平台引用链接时显示缩略图,一般横长方形图,少数是正方形图。建议 1200628px 最低尺寸不低于 200200px,格式支持jpg、png、webp、gif、jpeg等常用格式
<meta property="og:image" content="https://1px.run/favicon.ico"/>
更多 OG协议 Meta 标签
内容的语言,多语言站点强烈建议使用
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="网站标题"/>
<meta property="og:video" content="https://your-video-url.mp4" />
详细的类型参数说明: https://ogp.me/#types
x Twitter Meta 标签
如果不使用 Twitter ,会自动使用 Open Graph
卡片类型
<meta name="twitter:card" content="summary"/>
- 全部类型
- summary
- summary_large_image
- app
- player
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="页面标题"/>
<meta name="twitter:description" content="页面简介"/>
<meta name="twitter:image" content="https://*.jpg"/>
<meta name="twitter:site" content="❓"/>
<meta name="twitter:creator" content="作者"/>
详细的类型参数说明: https://developer.x.com/en/docs/x-for-websites/cards/overview/abouts-cards
Facebook Meta 标签
<meta property="fb:pages" content="61564381869209" />
将 61564381869209
改成你的专页ID(公共主页 ID)
Applinks Meta 标签 (Facebook Meta 标签)
<meta property="al:ios:url" content="example://applinks" />
<meta property="al:ios:app_store_id" content="284815942" />
<meta property="al:ios:app_name" content="App Links" />
<meta property="al:android:url" content="example://applinks" />
<meta property="al:android:package" content="com.google.android.googlequicksearchbox" />
<meta property="al:android:app_name" content="App Links" />
<meta property="al:web:url" content="http://applinks.org/documentation" />
站点详细说明:https://developers.facebook.com/docs/applinks/add-to-content
Facebook Meta 标签
网站管理员分享指南:https://developers.facebook.com/docs/sharing/webmasters?locale=zh_CN#markup
Facebook 测试工具:https://developers.facebook.com/tools/debug/
twitter 测试工具(只有日志,没有预览,如果要预览请直接发推文):https://cards-dev.twitter.com/validator
搜索引擎 Meta 标签
<meta name="robots" content="noindex,follow"/>
noindex 不要索引当前页面 follow 当前页面全部链接
未整理
<meta name="next-head-count" content="6"/>