This article was originally published at: github.com/bigo-fronte… Welcome to follow and reprint.

preface

SEO can effectively become a new growth tool, and understanding SEO is also a skill point for front-end development.

SEO (Search Engine Optimization) is a method of using the rules of Search engines to improve the natural ranking of a website in related Search engines.

The main method is: assist the search engine to understand the content of the web page, actively inform the search engine site page between the contact and reference structure, appropriate increase or reduce the weight of different pages.

Specific methods include:

  • Assist search engines in understanding web content: TDK; Structured data; <a> tag adds title; Add Alt to the <img> tag
  • Actively inform search engines about links and reference structures between site pages: breadcrumb navigation of structured data; Site map; < a > tag; The < img > tag
  • Increase or decrease the weight of different pages appropriately: Canonical incorporates repeated urls to increase canonical urls’ weight; Hreflang Increases the weight of localized web pages. Noindex reduces the weight of empty data pages

Because different search engines have different strategies, this paper only introduces seo methods under Google, and gives optimization examples combined with the practice in the Likee business line.

1.TDK

title

Create unique and accurate page titles

The <title> tag tells users and search engines what the topic of a particular web page is. The <title> tag should be placed in the <head> element of the HTML document.

You should create a different title for each page on your site.

Example:

<title>Likee</title>
Copy the code

description

Create a summary to display in search results

The description meta tag of a web page lets Google and other search engines know the general content of the page. The title of the page can be a few words or a phrase, and the descriptive meta tag of the page can be a sentence or two or a short paragraph. Like the <title> tag, the description meta tag is located in the <head> element of the HTML document.

Example:

<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.">
Copy the code

keywords

Use header tags to highlight important text

Can provide some errors, similar spelling schemes, with a greater probability of matching the user’s search terms.

Example:

<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">
Copy the code

2. Structured data

Description of web page content

Structured data is code that can be added to a web page to describe content to a search engine so that the search engine can better understand the information on the page. Search engines can use this information to display content in search results in a useful (and engaging) way. It also helps attract the right customers for the business.

Example:

<script type="application/ld+json">
  {
    "@context": "https://schema.org"."@type": "Brand"."url": "https://likee.video"."logo": "https://likee.video/assets/like/images/[email protected]"
  }
</script>
Copy the code

Enable rich media search results for your site

In addition to using structured data tags for rich media search results, Google also uses structured data to provide relevant results in other formats.

Breadcrumb navigation

Breadcrumb navigation paths on web pages indicate where the page is in the hierarchy of the site and may help users efficiently understand and explore the site. Users can start at the lowest level in the breadcrumb navigation path and navigate one level at a time to the highest level in the site hierarchy.

Example:

<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>
Copy the code

3. Site map

A sitemap is a file that provides information about pages, videos, or other files in a web site, and explains the relationships between them. Search engines such as Google read this file in order to crawl websites more intelligently. Sitemaps tell Google which pages and files on the site are important, and also provide important information about those files: in the case of web pages, when the page was last updated, how often the page has changed, and whether the page is available in other languages.

Example:


      
<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>
Copy the code

4. Integrate duplicate urls

If a web page is accessible through multiple urls, or if different web pages contain similar content (for example, a web page has both mobile and desktop versions), Google will treat those pages as duplicate versions of the same web page.

Google selects a web site as the canonical version and crawls that site, while treating all other web sites as duplicates and crawls them less frequently.

If Google is not clearly told which site is the canonical site, it can make its own choice or treat both versions as equally important, which can lead to inappropriate behavior.

Add a <link> tag to the code of all duplicate pages to point to the canonical page.

Example:

<link rel="canonical" href="https://likee.video/trending" id="canonical">
Copy the code

5. Inform Google of the localized version of the web page

If there are multiple versions of a web page for different languages or regions, please inform Google of these variations. In this way, Google search can direct users to the most appropriate version of a web page by language or region.

Example:

<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">
Copy the code

6. Use “noindex” to prevent search engines from indexing

Some pages are mentioned in the page link or site map, but there is no data on the content of the page. For example, the personal page of an anchor does not publish any video. We do not want the page to be indexed by search engines and reduce the quality of the page in the index.

Example:

<meta name="robots" content="noindex">
Copy the code

7. Make sure links are grabable

Try to use legitimate traceable links to ensure that the link content can be accessed to avoid 404 problems.

8. Use <a> tags whenever possible to describe jump links

Link text is the visible text within a link. This type of text tells the user and Google about the web page it links to. Links on web pages may be internal links, which point to other pages on the site, or external links, which lead to content on other sites. In both cases, the better the positioning text, the easier it is for users to navigate, and the easier it is for Google to understand the content on the page to which it links.

Using appropriate positioning text makes it easy for users and search engines to understand what a linked page contains.

9. Use the < IMG > tag whenever possible to describe the image

Using the < IMG > tag is a search engine friendly implementation and should avoid using CSS to describe images.

Providing a descriptive file name and Alt attribute description for an image will also help search engines understand the content of the image.

More SEO rules can be read: Getting Started with Google Search: A Developer’s Guide

Welcome everyone to leave a message to discuss, wish smooth work, happy life!

I’m bigO front. See you next time.