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)

<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"/>

回到顶部

Copyright © 2017-2024 1px.run 像素教程 Distributed by an MIT license.

Site updated at 2024-12-20 08:28