Google搜索下的SEO方法简介

前端开发工程师 @ bigo

file

本文首发于:github.com/bigo-fronte… 欢迎关注、转载。

前言

SEO能够有效成为新的增长利器,了解SEO也是前端开发的技能点。

SEO(Search Engine Optimization)搜索引擎优化是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

主要方法是:辅助搜索引擎理解网页内容,主动告知搜索引擎站点页面间的联系和引用结构,适当增加或降低不同页面的权重。

具体的方法有:

  • 辅助搜索引擎理解网页内容:TDK;结构化数据;<a>标签增加title;<img>标签增加alt
  • 主动告知搜索引擎站点页面间的联系和引用结构:结构化数据的面包屑导航;站点地图;<a>标签;<img>标签
  • 适当增加或降低不同页面的权重:canonical整合重复网址增加规范网址权重;hreflang提升本地化版本网页权重;noindex降低空数据页面权重

由于不同搜索引擎的策略不同,本文仅针对Google下的seo方法做介绍,结合在likee业务线的实践给出优化示例。

1.TDK

title

创建独特且准确的网页标题

<title>标记可告诉用户和搜索引擎特定网页的主题是什么。<title>标记应放置在 HTML 文档的 <head>元素中。

应该为网站上的每个网页创建不同的标题。

示例:

<title>Likee</title>
复制代码

description

创建要在搜索结果中显示的摘要

网页的说明元标记可让 Google 和其他搜索引擎了解该网页的大致内容。网页的标题可以是几个词或一个短语,而网页的说明元标记则可以是一两个句子或是一小段话。与<title>标记一样,说明元标记也位于 HTML 文档的<head>元素中。

示例:

<meta name="description" content="Likee or Like Video is a global short video creation and sharing platform as well as a famous video making app. Likee features cutting-edge video making &amp; editing tools, video music, video photos and more.">
复制代码

keywords

使用标题标记强调重要文字

可以提供一些错误,相似的拼写方案,以更大概率匹配用户的搜索关键词。

示例:

<meta name="keywords" content="Likee, LIKE, short video, video making app, likke, laikee, l i k e e, likrr, likkee, liikee, likke.com, llkevideo,likiee, likke .com, ilkee, laikii, likke online, likey, lkee">
复制代码

2.结构化数据

描述网页内容

结构化数据是可添加到网站网页中的代码,用于向搜索引擎描述内容,以便搜索引擎更好地了解网页上的信息。搜索引擎可以利用这类信息在搜索结果中以有用的(且吸引用户的)方式显示内容。这也有助于吸引到适合业务的客户。

示例:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Brand",
    "url": "https://likee.video",
    "logo": "https://likee.video/assets/like/images/logo@200.png"
  }
</script>
复制代码

为网站启用富媒体搜索结果

除了使用结构化数据标记来实现富媒体搜索结果外,Google 还会使用结构化数据来提供其他格式的相关结果。

面包屑导航

网页上的面包屑导航路径会指明网页在网站层次结构中的位置,并且可能有助于用户高效地了解和探索网站。用户可从面包屑导航路径中的最低层级开始,一次一个层级地导航到网站层次结构中的最高层级。

示例:

<script type="application/ld+json" id="breadcrumb">
{
  "@context": "http://schema.org/",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@type": "Thing",
        "@id": "https://likee.video",
        "name": ""
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item": {
        "@type": "Thing",
        "@id": "https://likee.video/trending",
        "name": "Trending videos - Likee Video"
      }
    }
  ]
}
</script>
复制代码

3.站点地图

站点地图是一种文件,可以在其中提供与网站中的网页、视频或其他文件有关的信息,还可以说明这些内容之间的关系。Google 等搜索引擎会读取此文件,以便更加智能地抓取网站。站点地图会告诉 Google 网站中的哪些网页和文件比较重要,还会提供与这些文件有关的重要信息:以网页为例,这些信息包括网页上次更新的时间、网页更改的频率,以及网页是否有其他语言版本。

示例:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://www.example.com/foo.html</loc>
   <lastmod>2018-06-04</lastmod>
  </url>
</urlset>
复制代码

4.整合重复网址

如果某一个网页可通过多个网址访问,或者不同网页包含类似内容(例如,某个网页既有移动版,又有桌面版),那么 Google 会将这些网页视为同一个网页的重复版本。

Google 会选择一个网址作为规范版本并抓取该网址,而将所有其他网址视为重复网址并降低对这些网址的抓取频率。

如果未明确告知 Google 哪个网址是规范网址,Google 就会自行做出选择,或将这两个版本视为同等重要,这可能会导致出现一些不当的行为。

在所有重复网页的代码中分别添加一个 <link> 标记,使其指向规范网页。

示例:

<link rel="canonical" href="https://likee.video/trending" id="canonical">
复制代码

5.将网页的本地化版本告知 Google

如果某个网页针对不同语言或区域提供了多个版本,请将这些不同变体告知 Google。这样一来,Google 搜索便可按语言或区域将想访问网页的用户引导至最恰当的版本。

示例:

<link rel="alternate" href="https://likee.video/trending" hreflang="x-default">
<link rel="alternate" href="https://likee.video/trending?lang=en" hreflang="en">
<link rel="alternate" href="https://likee.video/trending?lang=ar" hreflang="ar">
<link rel="alternate" href="https://likee.video/trending?lang=bn" hreflang="bn">
<link rel="alternate" href="https://likee.video/trending?lang=zh_Hant" hreflang="zh_Hant">
<link rel="alternate" href="https://likee.video/trending?lang=zh_Hans" hreflang="zh_Hans">
<link rel="alternate" href="https://likee.video/trending?lang=hi" hreflang="hi">
<link rel="alternate" href="https://likee.video/trending?lang=id" hreflang="id">
<link rel="alternate" href="https://likee.video/trending?lang=pt" hreflang="pt">
<link rel="alternate" href="https://likee.video/trending?lang=ru" hreflang="ru">
<link rel="alternate" href="https://likee.video/trending?lang=es" hreflang="es">
<link rel="alternate" href="https://likee.video/trending?lang=tr" hreflang="tr">
<link rel="alternate" href="https://likee.video/trending?lang=uk" hreflang="uk">
<link rel="alternate" href="https://likee.video/trending?lang=vi" hreflang="vi">
<link rel="alternate" href="https://likee.video/trending?lang=fr" hreflang="fr">
<link rel="alternate" href="https://likee.video/trending?lang=de" hreflang="de">
<link rel="alternate" href="https://likee.video/trending?lang=it" hreflang="it">
复制代码

6.使用"noindex"阻止搜索引擎编入索引

有些页面我们在页面链接或者站点地图中是有提及的,但是该页面的内容是没有数据的,例如:某个主播的个人页,没有发布任何视频,我们不希望该页面被搜索引擎编入索引而降低索引内页面的质量,我们可以使用"noindex"来阻止。

示例:

<meta name="robots" content="noindex">
复制代码

7.确保链接可供抓取

尽量使用合法的可以跟踪的链接,保证链接内容可以访问,避免出现404的情况。

8.尽量使用<a>标签描述跳转链接

链接文字是链接内的可见文字。这类文字会告诉用户和 Google 有关链接到的网页的信息。网页上的链接可能是内部链接,即指向网站上的其他网页,也可能是外部链接,即引向其他网站上的内容。在这两种情况下,定位文字越优质,用户越容易浏览,Google 也越容易了解链接到的网页上的内容。

使用适当的定位文字可让用户和搜索引擎轻松了解链接页所包含的内容。

9.尽量使用<img>标签描述图片

使用<img>标签是一种对搜索引擎友好的实现方式,应避免使用css描述图片。

为图片提供描述性文件名和 Alt 属性说明,也将有利于搜索引擎对图片内容的理解。

更多SEO规则可以阅读:Google 搜索使用入门:开发者指南

欢迎大家留言讨论,祝工作顺利、生活愉快!

我是bigo前端,下期见。

文章分类
前端
文章标签