搜索引擎优化（SEO）

怎样设置Meta标签、Title标签？

以下是对问题的具体描述： 我在站长天下后台“站点信息修改”的“关键字”一栏填了“关键字”后，在我的网站的网页上点击“查看——源文件”后，却看不到我填的…
关注者
5
被浏览
9,895

3 个回答

看完以下文章后了解到的：

Open Graph Protocol [1]



Open Graph Protocol（开放内容协议），简称 OG 协议或 OGP。它是 Facebook 在 2010 年 F8 开发者大会公布的一种网页元信息（Meta Information）标记协议，是一种制定一套Metatags的规格，用来标注你的页面，即这种协议可以让网页成为一个“富媒体对象”。是一种 Meta 标签。作用就是为社交分享而生的 Meta 标签。它是目前社交媒体优化（SMO）的基本操作。

为了让信息内容加速流动和准确呈现，Facebook 早年极力推动这个协议，到目前几乎主流的社交媒体网站都支持 OG 协议。包括 Twitter、Pinterest、LinkedIn 和 Google+ 都可以识别 OG 协议。虽然 Twitter 也有自家的 Twitter Cards 协议，但是 Twitter 只要发现网页上没有使用自家的协议，就会用 OG 协议代替。国内的百度、360 搜索、微博、微信、人人网等也支持该协议。

因为头条搜索是主营移动端搜索，因此在索引站点时额外关注og标签，如果有og标签即会呈现在站点左侧。因此我们要想让主站点在头条搜索或搜狗有logo配图的话，可以加入og:image标签，即可达到无需提交审核即可随意更换、呈现主站配图的效果~

OG 协议有什么作用？

OG 协议是通过 OG Tags （OG 标签）实现的，它属于 Meta 标签的一种，可以用来标识网页类型和元素，让分享到社交网络的内容可以被有效的抓取，还可以控制我们想呈现的内容。

下面就是一段 OG 标签的例子。只要看到以 og: 为前缀的 Meta 标签就可以判断该网页支持 OG 标签了

如何运用

<meta name="og:title" contect="标题">
<meta name="og:type" contect="类型">
类型常用值:article book movie
<meta name="og:image" contect="略缩图地址">
<meta name="og:url" contect="页面地址">
<meta name="og:description" contect="页面简介">
<meta name="og:site_name" contect="你的网站名">
<meta name="og:videosrc" contect="视频地址">
<meta name="og:audiosrc" contect="音频地址">

▲ 这样添加页面OG标签

更多类型可以到以下网址查询。

The Open Graph Protocol 官网
https://ogp.me

分享效果





可以看到，标题为：【我们启用了更多新域名！-教程与解决方案 | Fuyeor Docs 】的文章未添加OG标签将被识别为错误信息【教程与解决方案 | Fuyeor Docs】，而加入了OG标签则去除了较长的站点名称【教程与解决方案 | Fuyeor Docs】，直接是我们启用了更多新域名！，比较简洁。

在这测试一下是不是这样。

未加入OG协议的页面在插入社交网站、分享时经常无法匹配到正确的标题和文章图片，而加入了OG协议的页面将正确地显示标题、题图和摘要信息，进一步丰富了多媒体内容，使得浏览者更容易点击。 我们启用了更多新域名!未加入OG协议的页面在插入社交网站、分享时经常无法匹配到正确的标题和文章图片，而加入了OG协议的页面将正确地显示标题、题图和摘要信息，进一步丰富了多媒体内容，使得浏览者更容易点击。

对 SEO 的影响　

参与到Open Graph Protocol的好处：

　 ● 能够正确被蜘蛛抓取您的内容到百度网页搜索　
　 ● 帮助您的内容更有效的在百度结构化展现　

网页添加OG标签后，百度移动端会参考OG标签给你的页面文章配图，而头条搜索和移动端搜狗会直接将OG:IMAGE的图片配到你的站点上，用户体验较好。

可进行验证：先查看某一网站的OG:IMAGE标签，随后在搜狗移动端和头条搜索中查看，会发现网站配图就是OG:IMAGE里的图片。而没有OG协议的网站搜索引擎则会在文章内选一张图片作为题图。

添加 OG 标签

WordPress

外观>自定义>常规>访客参与度>Opengraph Meta Data>开启

其他网页

在网页<head>标签内添加一组如下代码，其中代码的描述替换为具体的描述。

<meta name="og:title" contect="标题">

<meta name="og:image" contect="略缩图地址">
<meta name="og:url" contect="页面地址">
<meta name="og:description" contect="页面简介">
<meta name="og:site_name" contect="你的网站名">

参考

  1. ^什么是 Open Graph Protocol Meta 标签？  https://docs.fuyeor.com/what-is-opengraph-meta
发布于 2021-09-30 04:15

先把关键词上百度搜一下，看有没指数，看热门度怎么样。找出相关的关键词。

再把关键词用一两句话串起来就是描述。

发布于 2014-07-19 18:55
meta 标签定义了关于 HTML 文档的元数据（metadata）。元数据是关于数据的数据（data about data），主要是描述数据属性（property）的信息。 标签始终位于 元素内，通常用于指定字符集、页面描述、关键字、文档类型、作者以及视口（viewport）。
元数据不会显示在页面上，但可以机器解析。 元数据由浏览器（如何显示内容或重新加载页面）、搜索引擎引擎优化或是其他网络服务使用。

下面我们就来看看常用的meta标签。

一、Meta 标签的 charset 属性

如果设置了 charset 属性, meta 元素就是一个字符集声明，用于告诉文档使用哪种字符编码。

想必每一个都开发者都十分熟悉下面这一个meta元素， 它设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。意味着该 web 页面可以显示任意的语言。

<meta charset="utf-8">

你也可以设置为 GBK （中国大陆国标字符集）[*不推荐]

<meta charset="GBK">

但是！当你设置为 GBK 再使用藏文之类的语言时，那么页面将会会出现乱码。

二、meta 标签的 name 属性

如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。如通过keywords, description等属性设置SEO相关内容

meta标签中name属性语法格式是：

1. keywords

keywords 定义了一组关键词，用于搜索引擎优化。

<meta name="keywords" content="HTML, Liu Xing, JavaScript之禅">

在网络和 SEO 刚刚兴起的时候，这个标签是相当有用的，但是到如今，很多搜索引擎都已经不再用keywords标签作排名因素。我们在使用时k应该避免关键词堆砌

2. description

description 是一个针对页面的简短描述，用于告诉搜索引擎你网站的主要内容， 此内容可能被用作搜索引擎结果的一部分。

<meta name="description" content="JavaScript之禅专注于Web开发, 汇集HTML, CSS,
JavaScript教程">

3. robots

robots 用于告诉网页爬虫如何索引网页

<meta name="robots" content="none">

它有以下几种参数值：

  • all：对索引编制或内容显示无任何限制, 该指令为默认值
  • noindex: 告诉搜索引擎不要索引当前页, 等价于noindex，nofollow
  • index: 告诉搜索引擎索引当前页
  • follow: 即使页面没有被索引，爬虫也应该爬取页面上的所有链接
  • nofollow: 告诉爬虫不要跟踪页面上的任何链接以及资源
  • noimageindex: 告诉爬虫不要索引页面上的任何图片
  • none: 相当于同时使用 noindex 和 nofollow
  • noarchive: 不在搜索结果中显示缓存链接。如果您未指定此指令，搜索引擎可能会生成缓存网页，并且用户可能会通过搜索结果访问该网页。
  • nosnippet: 不在搜索结果中显示该网页的文本摘要或视频预览

4. viewport

viewport 是用户网页的可视区域。 viewport 通常用于设置页面的视口, 这个属性常用于设计移动端网页。

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

它主要有以下属性值：

  • width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度
  • height：和 width 相对应，指定高度
  • initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
  • maximum-scale：允许用户缩放到的最大比例
  • minimum-scale：允许用户缩放到的最小比例
  • user-scalable：用户是否可以手动缩放

5. subject

subject 是关于你的网站主题的简短描述

<meta name="subject" content="你的网站主题">

6. rating

rating 基于网站内容给出一般的年龄分级，通常用于让浏览者知道内容是不是合适的。 如果您希望对页面的受众适当性进行评分，请使该标记

<meta name="rating" content="General">

它主要有以下属性值：

  • general
  • mature
  • restricted
  • adult
  • 14 years
  • safe for kids

7. referrer

referrer 允许由客户端指定资源的 URI 来自于哪一个请求地址，它告诉了服务器，用户在访问当前资源时是从哪过来的。此数据可用于分析、日志记录、优化缓存等。 与HTTP请求中的referer字段相同。（注：Referer的正确拼写是Referrer，但是在写入标准时写错了，只好将错就错）

<meta name="referrer" content="no-referrer">

它主要有以下属性值：

  • no-referrer: 整个 referrer 会被移除。访问来源信息不随着请求一起发送。
  • no-referrer-when-downgrade: （默认值） 在没有指定任何策略的情况下用户代理的默认行为。在同等安全级别的情况下，引用页面的地址会被发送(HTTPS->HTTPS)，但是在降级的情况下不会被发送 (HTTPS->HTTP)
  • origin: 在任何情况下，仅发送文件的源作为引用地址
  • origin-when-cross-origin: 对于同源的请求，会发送完整的URL作为引用地址，但是对于非同源请求仅发送文件的源
  • same-origin: 对于同源的请求会发送引用地址，但是对于非同源请求则不发送引用地址信息
  • strict-origin: 在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)，但是在降级的情况下不会发送 (HTTPS->HTTP)
  • strict-origin-when-cross-origin: 对于同源的请求，会发送完整的URL作为引用地址；在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)；在降级的情况下不发送此首部 (HTTPS->HTTP)
  • unsafe-url: 无论是同源请求还是非同源请求，都发送完整的 URL（移除参数信息之后）作为引用地址

8. author

author 用于标明该页面的作者

<meta name="author" content="Liu Xing">

9. generator

generator 用于标明网页又什么工具生成，如使用Hexo生成的静态网站，其值就为Hexo

<meta name="generator" content="Hexo">

10. copyright

copyright 用于标注版权信息

<meta name="copyright" content="Liu Xing">

三、meta 标签的 http-equiv 属性

如果设置了 http-equiv 属性（http-equivalent的简写），meta 元素则是编译指令，提供的信息与类似命名的HTTP header相同，它可用于模拟 HTTP header 响应，通常可以用来控制缓存，刷新等操作。

meta标签中http-equiv属性语法格式是：

1. content-type

该属性与类似，用于设定网页字符集，便于浏览器解析与渲染页面。不推荐使用。

<meta http-equiv="content-Type" content="text/html;charset=utf-8">

2. refresh

refresh 定义文档自动刷新的时间间隔

<meta http-equiv="refresh" content="30">

上面的例子中，页面会间隔30s刷新一次。

4. cache-control

cache-control 用了来控制缓存策略

<meta http-equiv="cache-control" content="no-cache">

主要有以下属性值：

  • public 表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存。
  • private 表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）
  • no-cache 不使用强缓存，需要与服务器验协商缓存验证。
  • no-store 缓存不应存储有关客户端请求或服务器响应的任何内容，即不使用任何缓存。
  • max-age= 缓存存储的最大周期，超过这个周期被认为过期
  • ...

5. expires

expires 用于设定网页的到期时间，它告诉浏览器在过期时间之前可以直接从浏览器缓存中存取数据。

关于 HTTP 缓存机制, 建议参考阅读笔者写的另一篇文章

结语

至此，我们一共介绍了15中meta标签的用法，分别可以用于SEO，响应式开发，HTTP响应控制等。meta标签对于社交媒体分享，提升SEO以及浏览器/平台的一些兼容性设置都十分重要。

将 Twitter Card 和 Open Graph 社交元数据添加到你的网页

8 个必知的 SEO 优化重要元标签

移动端浏览器常用的 meta 标签汇总

编辑于 2021-12-11 16:45