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

JavaScript之禅

共 2626字,需浏览 6分钟

 ·

2021-12-10 17:20

☝点击上方蓝字关注我们,懒人无法享受休息之乐。


本文是meta标签详解系列的第三篇文章,前两篇文章为:

HTML meta 标签详解
将 Twitter Cards 和 Open Graph 社交元数据添加到你的网页



标签定义了关于 HTML 文档的元数据。它可以用于向搜索引擎和网站访问者描述你的页面内容。其中一些 meta 标签对 SEO 有着至关重要的影响。在本文中,我们将讨论需要关注的最重要的元标记。

如果你对 meta 标签还不太了解,推荐阅读HTML 的 meta 标签详解

1. Title 标签

<title>页面标题title>

</code>标签可以说是<strong style="line-height: 1.6 !important;">最主要</strong>、<strong style="line-height: 1.6 !important;">最重要</strong>的 SEO 优化的元素。它将直接显示在搜索引擎的结果页里面,社交媒体分享,浏览器的标签页都将直接使用这个标题。</p><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">搜索结果将显示如下:</p><p style="text-align: center;"><img class="rich_pages wxw-img" data-galleryid="" data-ratio="0.18902439024390244" data-s="300,640" src="https://filescdn.proginn.com/3d852237916373e4bd833891eb5cb9de/e3f285321d38ad0acd242bf147dc5925.webp" data-type="png" data-w="1312" style=""></p><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">标题对于让用户快速了解搜索结果的内容至关重要。这是用户对你网页的第一印象,它通常是决定点击哪个结果的重要影响因素,因此在你的网页上使用高质量的标题很重要。</p><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">最佳实践</p><ul data-tool="markdown.com.cn编辑器" style="padding-left: 25px;margin-top: 1em;margin-bottom: 1em;line-height: 1.6 !important;" class="list-paddingleft-2"><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">为每个页面写一个唯一的标题标签</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">简短但具有描述性</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">避免通用和模糊的标题</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">创造一些值得点击的东西,抓住用户的好奇心</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">去猜测搜索意图,尽量匹配上</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">包含长尾关键字</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">保持在 60 个字符以内, 超过这个长度搜索引擎会将标题截断</section></li></ul><h2 data-tool="markdown.com.cn编辑器" style="font-weight: bold;margin-top: 1em;margin-bottom: 1em;font-size: 1.3em;color: rgb(128, 51, 26);padding-bottom: 0.3em;line-height: 1.6 !important;"><span style="font-size: 16px;">2. Meta Description 标签</span></h2><pre data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;border-radius: 4px;line-height: 1.6 !important;"><code style="overflow-x: auto;padding: 16px;background: rgb(248, 248, 248);display: -webkit-box;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 0.875em;line-height: 1.6 !important;"><span style="color: rgb(0, 0, 128);line-height: 1.6 !important;"><<span style="line-height: 1.6 !important;">meta</span> <span style="color: #008080;line-height: 1.6 !important;">name</span>=<span style="color: #d14;line-height: 1.6 !important;">"description"</span> <span style="color: #008080;line-height: 1.6 !important;">content</span>=<span style="color: #d14;line-height: 1.6 !important;">"页面的描述"</span>></span><br style="line-height: 1.6 !important;"></code></pre><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">该 meta 标签用于描述总结页面的内容。搜索引擎经常将其用于搜索结果的片段中,放在标题下面。它占据了搜索结果片段的很大部分的内容,内容的好坏很大程度上会影响用户是否点击这个结果,你需要设置一个引人注目的描述。谷歌不使用描述作为排名英语。</p><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;"><span style="color: rgb(0, 0, 0);"><strong>最佳实践</strong></span></p><ul data-tool="markdown.com.cn编辑器" style="padding-left: 25px;margin-top: 1em;margin-bottom: 1em;line-height: 1.6 !important;" class="list-paddingleft-2"><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">给每个页面一个独特的描述,并清楚地反映内容</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">描述必须既真实又吸引人,</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">Google 的摘要通常最多可包含 150-160 个字符(包括空格)</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">包括你最重要的关键字,以便它们可以在搜索结果页上上突出显示,但要小心避免关键字堆砌</section></li></ul><h2 data-tool="markdown.com.cn编辑器" style="font-weight: bold;margin-top: 1em;margin-bottom: 1em;font-size: 1.3em;color: rgb(128, 51, 26);padding-bottom: 0.3em;line-height: 1.6 !important;"><span style="font-size: 16px;">3. 标题标签(h1-h6)</span></h2><pre data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;border-radius: 4px;line-height: 1.6 !important;"><code style="overflow-x: auto;padding: 16px;background: rgb(248, 248, 248);display: -webkit-box;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 0.875em;line-height: 1.6 !important;"><span style="color: rgb(0, 0, 128);line-height: 1.6 !important;"><<span style="line-height: 1.6 !important;">h1</span>></span>This is heading 1<span style="color: rgb(0, 0, 128);line-height: 1.6 !important;"></<span style="line-height: 1.6 !important;">h1</span>></span><br style="line-height: 1.6 !important;"><span style="color: rgb(0, 0, 128);line-height: 1.6 !important;"><<span style="line-height: 1.6 !important;">h2</span>></span>This is heading 2<span style="color: rgb(0, 0, 128);line-height: 1.6 !important;"></<span style="line-height: 1.6 !important;">h2</span>></span><br style="line-height: 1.6 !important;"><span style="color: rgb(0, 0, 128);line-height: 1.6 !important;"><<span style="line-height: 1.6 !important;">h3</span>></span>This is heading 3<span style="color: rgb(0, 0, 128);line-height: 1.6 !important;"></<span style="line-height: 1.6 !important;">h3</span>></span><br style="line-height: 1.6 !important;"><span style="color: rgb(0, 0, 128);line-height: 1.6 !important;"><<span style="line-height: 1.6 !important;">h4</span>></span>This is heading 4<span style="color: rgb(0, 0, 128);line-height: 1.6 !important;"></<span style="line-height: 1.6 !important;">h4</span>></span><br style="line-height: 1.6 !important;"><span style="color: rgb(0, 0, 128);line-height: 1.6 !important;"><<span style="line-height: 1.6 !important;">h5</span>></span>This is heading 5<span style="color: rgb(0, 0, 128);line-height: 1.6 !important;"></<span style="line-height: 1.6 !important;">h5</span>></span><br style="line-height: 1.6 !important;"><span style="color: rgb(0, 0, 128);line-height: 1.6 !important;"><<span style="line-height: 1.6 !important;">h6</span>></span>This is heading 6<span style="color: rgb(0, 0, 128);line-height: 1.6 !important;"></<span style="line-height: 1.6 !important;">h6</span>></span><br style="line-height: 1.6 !important;"></code></pre><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">标题标签是 HTML 标签,HTML <code style="overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(228, 105, 24);background-color: rgb(239, 239, 239);font-size: 0.875em;line-height: 1.6 !important;"><h1>–<h6></code> 标题 (Heading) 元素呈现了六个不同的级别的标题,<code style="overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(228, 105, 24);background-color: rgb(239, 239, 239);font-size: 0.875em;line-height: 1.6 !important;"><h1></code> 级别最高,而 <code style="overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(228, 105, 24);background-color: rgb(239, 239, 239);font-size: 0.875em;line-height: 1.6 !important;"><h6></code> 级别最低。它可以用来识别内容的结构层级。</p><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">现在标题标签不再是搜索引擎排名因素,标题标签中添加关键字,不一定可以使你的排名更好,但是对爬虫来说理解组织良好的内容更为容易。同时也方便用户理解页面内容。</p><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;word-break: break-word;overflow-wrap: break-word;letter-spacing: 1px;font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;line-height: 1.6 !important;"><span style="color: rgb(0, 0, 0);"><strong>最佳实践</strong></span></p><ul data-tool="markdown.com.cn编辑器" style="padding-left: 25px;margin-top: 1em;margin-bottom: 1em;line-height: 1.6 !important;" class="list-paddingleft-2"><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">给每个页面一个独特的描述,并清楚地反映内容</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">描述必须既真实又吸引人,</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">Google 的摘要通常最多可包含 150-160 个字符(包括空格)</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">包括你最重要的关键字,以便它们可以在搜索结果页上上突出显示,但要小心避免关键字堆砌</section></li></ul><h2 data-tool="markdown.com.cn编辑器" style="font-weight: bold;margin-top: 1em;margin-bottom: 1em;font-size: 1.3em;color: rgb(128, 51, 26);padding-bottom: 0.3em;line-height: 1.6 !important;"><span style="font-size: 16px;">4. 图片 Alt 属性</span></h2><pre data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;border-radius: 4px;line-height: 1.6 !important;"><code style="overflow-x: auto;padding: 16px;background: rgb(248, 248, 248);display: -webkit-box;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 0.875em;line-height: 1.6 !important;"><br></code></pre><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">图片的 alt 属性被添加到<code style="overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(228, 105, 24);background-color: rgb(239, 239, 239);font-size: 0.875em;line-height: 1.6 !important;"></code>标签以描述其内容。</p><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">Alt 属性在页面优化方面很重要,原因有两个:</p><ul data-tool="markdown.com.cn编辑器" style="padding-left: 25px;margin-top: 1em;margin-bottom: 1em;line-height: 1.6 !important;" class="list-paddingleft-2"><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">如果无法加载任何特定图像(或图像被禁用),则会向访问者显示替代文本。</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">搜索引擎无法读取图像,你应该为图像添加适当的替代文字,以便搜索引擎知道如何解释它们</section></li></ul><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;word-break: break-word;overflow-wrap: break-word;letter-spacing: 1px;font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;line-height: 1.6 !important;"><span style="color: rgb(0, 0, 0);"><strong>最佳实践</strong></span></p><ul data-tool="markdown.com.cn编辑器" style="padding-left: 25px;margin-top: 1em;margin-bottom: 1em;line-height: 1.6 !important;" class="list-paddingleft-2"><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">始终使用正确的描述,切勿在此标签中填充关键字</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">使用信息丰富的文件名,且清楚明了</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">创建图像站点地图</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">在替代文本中使用 50-55 个字符(最多 16 个单词)</section></li></ul><h2 data-tool="markdown.com.cn编辑器" style="font-weight: bold;margin-top: 1em;margin-bottom: 1em;font-size: 1.3em;color: rgb(128, 51, 26);padding-bottom: 0.3em;line-height: 1.6 !important;"><span style="font-size: 16px;">5. Robots Meta 标签</span></h2><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">机器人元标记告诉搜索引擎索引或不索引你的网页。我们在【HTML 的 meta 标签详解】也介绍过。</p><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">该标签对搜索引擎爬虫有四个主要值:</p><ul data-tool="markdown.com.cn编辑器" style="padding-left: 25px;margin-top: 1em;margin-bottom: 1em;line-height: 1.6 !important;" class="list-paddingleft-2"><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">follow - 搜索引擎爬虫将跟随该网页中的所有链接</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">index – 搜索引擎爬虫会索引整个网页</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">nofollow – 搜索引擎爬虫不会跟踪页面和该网页中的任何链接</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">noindex – 搜索引擎爬虫不会将该网页编入索引 为你的机器人元标记使用以下语法:</section></li></ul><pre data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;border-radius: 4px;line-height: 1.6 !important;"><code style="overflow-x: auto;padding: 16px;background: rgb(248, 248, 248);display: -webkit-box;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 0.875em;line-height: 1.6 !important;"><meta name="robots" content="noindex, nofollow"> 表示不索引或不关注本网页。<br><br><meta name="robots" content="index, follow"> 表示索引并关注这个网页。<br></code></pre><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;word-break: break-word;overflow-wrap: break-word;letter-spacing: 1px;font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;line-height: 1.6 !important;"><span style="color: rgb(0, 0, 0);"><strong>最佳实践</strong></span></p><ul data-tool="markdown.com.cn编辑器" style="padding-left: 25px;margin-top: 1em;margin-bottom: 1em;line-height: 1.6 !important;" class="list-paddingleft-2"><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">仅当你想限制搜索引擎抓取页面时才使用 Robots meta 标签</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">不要在 robots.txt 中屏蔽带 Robots meta 标签的页面;</section></li></ul><h2 data-tool="markdown.com.cn编辑器" style="font-weight: bold;margin-top: 1em;margin-bottom: 1em;font-size: 1.3em;color: rgb(128, 51, 26);padding-bottom: 0.3em;line-height: 1.6 !important;"><span style="font-size: 16px;">6. Canonical 标签</span></h2><pre data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;border-radius: 4px;line-height: 1.6 !important;"><code style="overflow-x: auto;padding: 16px;background: rgb(248, 248, 248);display: -webkit-box;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 0.875em;line-height: 1.6 !important;"><link rel="canonical" href="https://www.website.com/page/" /><br></code></pre><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">rel="canonical" link 标签为类似网页或重复网页指定权威网页。它告诉搜索引擎哪个版本的页面是主要页面并希望被搜索引擎索引。</p><h2 data-tool="markdown.com.cn编辑器" style="font-weight: bold;margin-top: 1em;margin-bottom: 1em;font-size: 1.3em;color: rgb(128, 51, 26);padding-bottom: 0.3em;line-height: 1.6 !important;"><span style="font-size: 16px;">7. 社交媒体 Meta 标签</span></h2><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">Open Graph 最初由 Facebook 引入,让你可以控制页面在社交媒体上共享时的外观,让你的页面与社交媒体同步更容易,更具吸引力。Twitter Cards 也提供了类似的增强功能,但仅限于 Twitter。</p><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">以下是主要元标签:</p><ul data-tool="markdown.com.cn编辑器" style="padding-left: 25px;margin-top: 1em;margin-bottom: 1em;line-height: 1.6 !important;" class="list-paddingleft-2"><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;"><code style="font-size: 14px;overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;line-height: 1.6 !important;">og:title</code>  – 页面的标题。</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;"><code style="font-size: 14px;overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;line-height: 1.6 !important;">og:url</code>  – 你页面的 URL。</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;"><code style="font-size: 14px;overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;line-height: 1.6 !important;">og:description</code>  – 你页面的描述。请记住,Facebook 将仅显示大约 300 个字符的描述。</section></li><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;"><code style="font-size: 14px;overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;line-height: 1.6 !important;">og:image</code>  – 你可以在此处放置要在链接到你的页面时显示的图像的 URL。</section></li></ul><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">它不会影响你在搜索引擎上的排名。但是,通过配置页面链接的外观,你可以极大地提高点击率和用户体验指标。</p><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">关于社交媒体 Meta 标签,推荐阅读【将 Twitter Card 和 Open Graph 社交元数据添加到你的网页】</p><h2 data-tool="markdown.com.cn编辑器" style="font-weight: bold;margin-top: 1em;margin-bottom: 1em;font-size: 1.3em;color: rgb(128, 51, 26);padding-bottom: 0.3em;line-height: 1.6 !important;"><span style="font-size: 16px;">8. 响应式设计 viewport Meta 标签</span></h2><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">视口标记允许你配置页面在任何设备上的缩放和显示方式。</p><pre data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;border-radius: 4px;line-height: 1.6 !important;"><code style="overflow-x: auto;padding: 16px;background: rgb(248, 248, 248);display: -webkit-box;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;border-radius: 0px;font-size: 0.875em;line-height: 1.6 !important;"><meta name="viewport" content="width=device-width, initial-scale=1"/><br></code></pre><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">视口元标记与排名没有直接关系,但与用户体验有关。</p><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">同时谷歌在移动搜索结果中对移动端友好的网页的排名更高</p><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;word-break: break-word;overflow-wrap: break-word;letter-spacing: 1px;font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;line-height: 1.6 !important;"><span style="color: rgb(0, 0, 0);"><strong>最佳实践</strong></span></p><ul data-tool="markdown.com.cn编辑器" style="padding-left: 25px;margin-top: 1em;margin-bottom: 1em;line-height: 1.6 !important;" class="list-paddingleft-2"><li style="list-style: circle;line-height: 1.6 !important;"><section style="text-align: left;color: rgb(1, 1, 1);margin-top: 0.3em;margin-bottom: 0.3em;line-height: 1.6 !important;">在所有网页上设置 viewport 标签</section></li></ul><h2 data-tool="markdown.com.cn编辑器" style="font-weight: bold;margin-top: 1em;margin-bottom: 1em;font-size: 1.3em;color: rgb(128, 51, 26);padding-bottom: 0.3em;line-height: 1.6 !important;"><span style="font-size: 16px;">结语</span></h2><p data-tool="markdown.com.cn编辑器" style="margin-top: 1em;margin-bottom: 1em;font-size: inherit;line-height: 1.6 !important;">至此,我们介绍了以上 8 种 SEO 优化相关的元标签并给出了一些最佳实践的建议。这些标签应用起来比较简单,但是他们发挥着巨大的作用。</p><section data-role="paragraph"><p style="vertical-align:inherit;"><br></p><p style="vertical-align: inherit;text-align: center;"><span style="font-size: 12px;color: rgb(178, 178, 178);">- END -</span></p></section><section data-id="106942" data-tools="135编辑器"><section style="text-align:center;margin: 10px auto;"><section style="display: inline-block;"><section style="font-size: 16px;letter-spacing: 1.5px;color: rgb(80, 134, 210);border-top: 2px dashed rgb(150, 182, 227);padding-top: 4px;box-sizing: border-box;"><br></section></section></section></section></section><h3 style="font-weight: bold;margin-top: 1em;margin-bottom: 1em;font-size: 1.3em;color: rgb(128, 51, 26);padding-bottom: 0.3em;word-break: break-word;overflow-wrap: break-word;letter-spacing: 1px;font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;line-height: 1.6 !important;"><span style="font-size: 16px;">往期精彩回顾:</span></h3><p><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2" wah-hotarea="click" hasload="1" style="text-decoration: underline;font-size: 14px;color: rgb(61, 170, 214);"><span style="font-size: 14px;color: rgb(61, 170, 214);">Javascript 数组及其方法详解</span></a><br style="outline: 0px;max-width: 100%;box-sizing: border-box !important;overflow-wrap: break-word !important;"></p><p><a target="_blank" textvalue="将 Twitter Cards 和 Open Graph 社交元数据添加到你的网页" linktype="text" imgurl="" imgdata="null" data-itemshowtype="0" tab="innerlink" style="text-decoration: underline;font-size: 14px;color: rgb(61, 170, 214);" data-linktype="2"><span style="font-size: 14px;color: rgb(61, 170, 214);">将 Twitter Cards 和 Open Graph 社交元数据添加到你的网页</span></a><br></p><p><a target="_blank" textvalue="HTML meta 标签详解" linktype="text" imgurl="" imgdata="null" data-itemshowtype="0" tab="innerlink" style="text-decoration: underline;font-size: 14px;color: rgb(61, 170, 214);" data-linktype="2"><span style="font-size: 14px;color: rgb(61, 170, 214);">HTML meta 标签详解</span></a><br></p><p><a target="_blank" textvalue="Curl 使用指南" linktype="text" imgurl="" imgdata="null" data-itemshowtype="0" tab="innerlink" style="text-decoration: underline;font-size: 14px;color: rgb(61, 170, 214);" data-linktype="2"><span style="font-size: 14px;color: rgb(61, 170, 214);">Curl 使用指南</span></a><br></p><p><a target="_blank" textvalue="JavaScript中到底要不要加分号?" linktype="text" imgurl="" imgdata="null" data-itemshowtype="0" tab="innerlink" style="text-decoration: underline;font-size: 14px;color: rgb(61, 170, 214);" data-linktype="2"><span style="font-size: 14px;color: rgb(61, 170, 214);">JavaScript中到底要不要加分号?</span></a><br></p><p><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2" data-darkmode-color-16197101287766="rgb(171, 102, 100)" data-darkmode-original-color-16197101287766="#fff|rgb(122, 68, 66)" hasload="1" wah-hotarea="click" style="text-decoration: underline;font-size: 14px;color: rgb(61, 170, 214);"><span style="font-size: 14px;color: rgb(61, 170, 214);">RESTful API 设计最佳实践</span></a></p><p><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2" data-darkmode-color-16197101287766="rgb(171, 102, 100)" data-darkmode-original-color-16197101287766="#fff|rgb(122, 68, 66)" hasload="1" wah-hotarea="click" style="text-decoration: underline;"><span style="text-decoration: underline;font-size: 14px;color: rgb(61, 170, 214);">Git 工作流程及分支策略</span></a></p><p style="max-width: 100%;min-height: 1em;box-sizing: border-box !important;word-wrap: break-word !important;"><br></p><p><br></p><main role="main" style="max-width: 100%;box-sizing: border-box !important;word-wrap: break-word !important;"><article style="max-width: 100%;box-sizing: border-box !important;word-wrap: break-word !important;"><section class="mp_profile_iframe_wrp"><mpprofile class="js_uneditable custom_select_card mp_profile_iframe" data-pluginname="mpprofile" data-id="MzU0OTE3MjE1Mw==" data-headimg="http://mmbiz.qpic.cn/mmbiz_png/jQxqlKeecNtfxKRLYXnKV5jiaIW9q8VpUuXVwNuPkkfGHamNCU0tUOfBxVuicbGOpKxqgg2ye1N74eOPAJAXKJoQ/0?wx_fmt=png" data-nickname="JavaScript之禅" data-alias="JavaScriptZen" data-signature="「 起于JS而不止于JS 」关注前端开发,关注技术成长。汇集最新前端资讯:JavaScript、Node.js、HTML5/CSS3等一系列教程和经验分享。" data-from="0"></mpprofile></section></article></main><p><br></p><h3 style="max-width: 100%;text-align: center;box-sizing: border-box !important;word-wrap: break-word !important;"></h3><h3 style="outline: 0px;max-width: 100%;letter-spacing: 0.544px;white-space: normal;font-family: -apple-system, system-ui, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;background-color: rgb(255, 255, 255);text-align: center;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="outline: 0px;max-width: 100%;color: rgb(136, 136, 136);font-size: 14px;box-sizing: border-box !important;overflow-wrap: break-word !important;">左手代码右手砖,抛砖引玉</span></h3><p style="outline: 0px;max-width: 100%;letter-spacing: 0.544px;white-space: normal;font-family: -apple-system, system-ui, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;background-color: rgb(255, 255, 255);text-align: center;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="outline: 0px;max-width: 100%;font-size: 12px;color: rgb(136, 136, 136);box-sizing: border-box !important;overflow-wrap: break-word !important;">点赞,关注,在看</span></p><h3 style="max-width: 100%;text-align: center;box-sizing: border-box !important;word-wrap: break-word !important;"><br></h3><p><br></p> </div></div></div><div class="tag-list-box"><div class="tag-list"><div class="tag-list-container"></div></div></div><span class="view_num">浏览 1</span><div class="float-bar float-bar-relative" id="float-bar-relative"><div class="float-bar-body"><div class="item qinglite-zan"><i class="iconfont icon-dianzan"></i>点赞 </div><div class="gap"></div><a href="#comments" class="item"><i class="iconfont iconfont icon-pinglun1"></i><span class="com_num"></span>评论 </a><div class="item qinglite-collect"><i class="iconfont icon-shoucang"></i>收藏 </div><div class="item qinglite_share"><i class="iconfont icon-fenxiang1"></i>分享 <div class="qrcode-modal"><img src="/api/pub/ewm" alt=""><p>手机扫一扫分享</p></div></div><div class="expand"></div><a onclick="miniProgram_navigateTo_func()" class="item qinglite_share_miniapp miniapp_show"><i class="iconfont icon-fenxiang1"></i>分享 </a><div class="item jubao qinglite-jubao miniapp_hide"><i class="iconfont icon-jubao"></i> 举报 </div></div></div></div><div class="comments_wrapper comments"><div class="title">评论</div><div id="comments" class="comments"><div class="error"></div><div class="textarea-wrapper"><textarea class="comment-content" cols="30" rows="5" placeholder="输入评论"></textarea></div><div class="button"><div class="error"><div class="comment-emojis"><div class="comment-choose-img qinglite_upload"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-tupianyangshi2"></use></svg><span>图片</span></div><div class="comment-choose-img comment-emoji-btn"><svg class="icon show-emoji-list" aria-hidden="true"><use xlink:href="#icon-biaoqing"></use></svg><span class="show-emoji-list">表情</span><div class="comment-emoji-list"></div></div><div style="display: none" class="comment-choose-img"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shipinwenjian1"></use></svg><span>视频</span></div></div></div><button class="qinglite-comment">评价</button></div><div class="medias qinglite_upload_content"></div></div></div><div style="display: none" class="comments"><div class="title">全部评论</div><div class="comments comment-item-content"></div></div><div id="recommend" class="comments hide_app"><div class="title">推荐 <a href="#qs_detail" class="iconfont icon-huidaodingbu"></a></div></div><div class="qs_post_list flow_post_list hide_app"><div class="item img qinglite_item"><a href="/doc/48986475c51ebeb85" title="必知系列!10个重要的SQL" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/e09c1d001e9af13a077af7cdb32778d4/cfdfe14be5d2676c5998325934013519.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/48986475c51ebeb85" title="必知系列!10个重要的SQL" class="title_middle">必知系列!10个重要的SQL</a><a href="https://jishu.proginn.com/u/11296443674009151" title="数据管道" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/463099/cps_wx_0173a365ecc6.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">数据管道</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/doc/33216442d2a77c5e4" title="必知必会的8个Python列表技巧" class="content"><div class="qinglite_item_top_wrapper"><div class="title">必知必会的8个Python列表技巧</div><div class="right-top-icon-tag"></div></div><div class="desc">原作者: Nik Piepenbreier编译&内容补充: 费弗里原文地址: https://towardsdatascience.com/advanced-python-list-techniques-c6195fa699a3列表(List)是你使用Python过程中接触最为频繁的数据结构,也是功...</div></a></div><div class="item img qinglite_item"><a href="/doc/7028644c371a7c242" title="必知必会的8个Python列表技巧" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/f856db7138742a1a5504822b008f9a1e/14effe2cce61bb68e3b3c7716627d123.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/7028644c371a7c242" title="必知必会的8个Python列表技巧" class="title_middle">必知必会的8个Python列表技巧</a><a href="https://jishu.proginn.com/u/19616445a486aa3a8" title="早起Python" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/466037/cps_wx_0173a3661d0d.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">早起Python</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="/doc/36076477515752fb2" title="测试小白入门必知必会的8个测试工具" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/68b806e251c07e4189b222e8496d2778/eefe67773ac4d793afc0fea55dff7c88.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/36076477515752fb2" title="测试小白入门必知必会的8个测试工具" class="title_middle">测试小白入门必知必会的8个测试工具</a><a href="https://jishu.proginn.com/u/7492643ec76a4a843" title="小詹学Python" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/378868/cps_wx_0173a36584f6.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">小詹学Python</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="/doc/15336475ad8a6ea68" title="优化 | 为什么凸优化这么重要?" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/292f2e52733843d40dbe0347a5a4773d/110055e3a8a1ff46c9dad361bbe881b2.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/15336475ad8a6ea68" title="优化 | 为什么凸优化这么重要?" class="title_middle">优化 | 为什么凸优化这么重要?</a><a href="https://jishu.proginn.com/u/562664750a09a04f5" title="目标检测与深度学习" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/546696/cps_wx_0177d7e9fbec.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">目标检测与深度学习</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="/doc/743564758967d20ab" title="5条快速优化博客的SEO技巧" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/6c667c4ec355549d4cb9d8b774b09c6b/3fa0d81c1bcd485a1b3658264fe7dbe5.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/743564758967d20ab" title="5条快速优化博客的SEO技巧" class="title_middle">5条快速优化博客的SEO技巧</a><a href="https://jishu.proginn.com/u/337864437f27e22f9" title="web前端开发" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/463114/cps_wx_0173a365f5eb.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">web前端开发</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="/pedia/f00538166515c0877244e" title="SEO ToolbarFireFox的SEO工具条" class="content"><div class="qinglite_item_top_wrapper"><div class="title">SEO ToolbarFireFox的SEO工具条</div><div class="right-top-icon-tag"></div></div><div class="desc">SEOToolbar是一个FireFox插件用来显示GooglePageRank,Alexa排名以及其他搜索引擎上的网页收录情况。</div></a></div><div class="item qinglite_item"><a href="/doc/f00513606509b3f6679db" title="Seo Panel搜索引擎优化工具" class="content"><div class="qinglite_item_top_wrapper"><div class="title">Seo Panel搜索引擎优化工具</div><div class="right-top-icon-tag"></div></div><div class="desc">Seo Panel 是一个管理您网站的搜索引擎优化的完全控制面板。它包含了许多SEO工具,加强跟踪您</div></a></div><div class="item qinglite_item"><a href="/pedia/f00566226509b3f54d206" title="Seo Panel搜索引擎优化工具" class="content"><div class="qinglite_item_top_wrapper"><div class="title">Seo Panel搜索引擎优化工具</div><div class="right-top-icon-tag"></div></div><div class="desc">SeoPanel是一个管理您网站的搜索引擎优化的完全控制面板。它包含了许多SEO工具,加强跟踪您的网站的性能。您可以自己开发插件。提供的功能如:自动目录提交工具,网站排名,及谷歌、百度等搜索引擎收录情</div></a></div><div class="item img qinglite_item"><a href="/doc/84526477089a13317" title="程序员必知的40个算法" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/4ea83b72f7f6cf03747676dc8c7a767d/0cddf43a718709633ef43ae4040e98c9.webp?x-oss-process=image/resize,w_300)"></div></a><a href="/doc/84526477089a13317" title="程序员必知的40个算法" class="title_middle">程序员必知的40个算法</a><a href="https://jishu.proginn.com/u/84066445eb4f0ef5d" title="Python与算法社区" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/469139/cps_wx_0173a3664d73.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">Python与算法社区</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><i></i><i></i><i></i><i></i><i></i></div><div class="float-bar" id="float-bar"><div class="float-bar-body"><div class="item qinglite-zan"><i class="iconfont icon-dianzan"></i>点赞 </div><div class="gap"></div><a href="#comments" class="item"><i class="iconfont iconfont icon-pinglun1"></i><span class="com_num"></span>评论 </a><div class="item qinglite-collect"><i class="iconfont icon-shoucang"></i>收藏 </div><div class="item qinglite_share"><i class="iconfont icon-fenxiang1"></i>分享 <div class="qrcode-modal"><img src="/api/pub/ewm" alt=""><p>手机扫一扫分享</p></div></div><div class="expand"></div><a onclick="miniProgram_navigateTo_func()" class="item qinglite_share_miniapp miniapp_show"><i class="iconfont icon-fenxiang1"></i>分享 </a><div class="item jubao qinglite-jubao miniapp_hide"><i class="iconfont icon-jubao"></i> 举报 </div><a href="#recommend" class="item iconfont icon-huidaodingbu"></a></div></div></article></div></main><script> let act_type = 1; let act_pro_id="228655"; let act_point = 0; let act_kind = 0; let act_time =30000; let act_page_id=""; </script><footer id="footer"><div class="container"><div class="links"><i class="copyright">2023©技术圈</i><a href="https://jishu.proginn.com">隐私协议</a><a href="https://jishu.proginn.com">用户协议</a><a href="https://jishu.proginn.com/about">关于我们</a></div></div></footer><link href="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/layui/css/layui.css" rel="stylesheet"><script src="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/layui/layui.js?v=v202311290103"></script><script> var $ = layui.jquery; </script><script src="https://cdn.qinglite.cn/js/pub.js?v=v202311290103"></script><script src="https://cdn.qinglite.cn/js/news_info.js?v=v202311290103"></script><link rel="stylesheet" href="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/icon/iconfont.css?v=v202311290103"><script src="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/icon/iconfont.js?v=v202311290103"></script></body></html>