Front-end development of SEO (search engine optimization)

Front-end development of SEO (search engine optimization)

---

foreword

In this article, I saw two very well-summarized articles, but I was afraid that the link would become invalid later, so I copied most of the content and made some modifications or additions to some of the content. The original link is at the end.
　　SEO (search engine optimization), the legendary search engine optimization. It refers to the optimization behavior done to increase the number of pages included in the natural search results of search engines and to improve the ranking of the website. As a front-end development engineer, you don't need to be proficient in SEO, but you must understand it. It does not have an immutable solution for everyone to apply, but there are always some recognized rules that can be used for SEO on the website. What's more important is that we have our own practice and constantly discover effective SEO methods that suit us.
From a macro point of view, SEO has three most important rules, that is, original content, high-quality external links, and persistent and moderate optimization.
　　The front-end is a very important link in building a website. This article focuses on explaining the implementation method of SEO from the perspective of the front-end. The front-end work is mainly responsible for the HTML+CSS+JS of the page. Optimizing these aspects will lay a solid foundation for SEO work. Highlighting important content can allow search engines to judge what is the focus of the current page. Improving website access speed can allow search engine spiders to crawl web content smoothly, quickly and in large quantities, so I will focus on highlighting important content and improving website speed below. The Lord will sum it up.

---

1. Highlight important content

Reasonable title, description and keywords

Although the weight of search on these three items is gradually decreasing now, I still hope to write them well and only write useful things. Don't write novels here, but express the key points.

title : Just emphasize the key points. Important keywords should not appear more than 2 times, and they should be in the front. The title of each page should be different.
description : Highly summarize the content of the web page here, the length should be reasonable, and keywords should not be piled up too much, and the description of each page should be different.
keywords : Just list a few important keywords, and don't pile them up too much.

<!-- 书写顺序按照  标题 -> 描述 -> 关键字 依次 -->
<title>唯品会-正品低价、品质保障、配送及时、轻松购物 ！</title>
<meta
  name="description"
  content="唯品会-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"
/>
<meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜"/>

Write HTML code semantically, in line with W3C standards

For search engines, the most direct thing to face is the HTML code of the webpage. If the code is written semantically, the search engine will easily understand the meaning expressed by the webpage. For example, the text module must have a large title, use h1-h6 reasonably (note: there can only be one h1 on a page), use ul or ol for codes in the form of lists, use strong for important text, and so on. In short, it is to make full use of various HTML tags to complete their own work. Of course, they must be compatible with mainstream browsers such as IE, Firefox, and Chrome.
　　Let's take a look at the famous Zen Garden website (http://www.csszengarden.com/). In the absence of styles, the code is very semantic and looks neat. After loading different styles, you can change the page as you like. Exterior.

In the case of no style:

after loading the style:

Use the layout to put the HTML code of the important content at the top

Search engines crawl HTML content from top to bottom. Using this feature, the main code can be read first, and unimportant codes such as advertisements can be placed at the bottom. For example, if the codes of the left column and the right column remain unchanged, you only need to change the style and use float:left; The code is at the top, let the crawler crawl first. The same applies to multi-column cases as well.

Do not use JS output for important content

Spiders will not read content in JS, so important content must be placed in HTML.

Minimize the use of iframes

Search engines will not crawl the content in the iframe, and important content should not be placed in the frame

Add alt attributes to images

<img src="global.jpg" width="300" height="200" alt="global">

When the network speed is very slow, or when the picture address is invalid, the function of the alt attribute can be reflected, which can let the user know the function of the picture when the picture is not displayed

The title attribute can be added where it needs to be emphasized

<!-- 
	内部链接，要加 title 属性加以说明
	外部链接，可加 rel="nofollow" 属性，告诉蜘蛛无需追踪，传递权重
 -->
<a href="http://www.360.cn" title="360安全中心" class="logo"></a>

Some semantic tags and semantic structure tags

1. Both strong and em indicate emphasis, strong is displayed in bold and em is displayed in italics, and the emphasis of strong is higher than that of em

<em>强调文本</em> <strong>强调文本</strong>

2. Visually highlight text

<!--如：搜索结果中高亮的关键词-->
<mark></mark>

3. h1 ~ h6 tags

• There can only be one h1 page, the home page is mostly used to contain the logo, and other pages are used for the main title
• h2 module title
• Section headings for h3 paragraphs
• h4, h5, h6 are basically not used

4. Section tag usage scenarios
　　To divide the content in the page, a section element usually consists of a title and content
　　Note: It is not recommended to use section tags for content without titles

<header></header>
  <section>
    <h2>标题</h2>
    <p>段落内容</p>
  </section>
  <section>
    <h2>标题</h2>
    <div>
      <img src="global.jpg" width="300" height="200" alt="global">
      <a href="http://www.360.cn" title="360安全中心" class="logo"></a>
    </div>
  </section>
  <footer></footer>

5. aside usage scenario
aside: independent of a part of the content, and can be split separately without affecting the whole, often used to define the sidebar of the page

<aside>
  <h2></h2>
  <ul>
    <li></li>
    <li></li>
  </ul>
</aside>

6. Header usage scenarios
article, section, aside, and nav tags can all have their own header and footer tags

<!-- 页面中的 header -->
<header>
  <h1 role="logo">
    <a href="/">文字Logo</a>
  </h1>
  <nav>
    <a href="/">首页</a>
    <a href="/product">产品介绍</a>
    <a href="/about">关于我们</a>
  </nav>
</header>
<!-- 分块中的 header -->
<section>
  <header>
    <h2>标题</h2>
    <p>信息介绍</p>
  </header>
  <p>分块内容段</p>
</section>
<!-- 文章中的 header -->
<article>
  <header>
    <h2>标题</h2>
    <p>
      发表日期：
      <time datetime="2022-06-01 12:00">2022-06-01</time>
    </p>
  </header>
  <p>文章内容段</p>
</article>

keep text effect

If it is necessary to take into account user experience and SEO effects, where pictures must be used, such as the title of a personalized font, we can use style control so that the text does not appear on the browser, but the title is included in the web page code.
　　For example, in the "Classification of TV Series" here, in order to perfectly restore the design drawing, the front-end engineer can make the text into a background image, and then use the style to set the indentation of the text in the html to a sufficiently large negative number, which deviates from the browser and also You can use the method of setting the line height to hide the text. Note: Do not use the display:none; method to hide the text, because the search engine will filter out the content in display:none; and it will not be retrieved by spiders.
　　

<!-- html代码 -->
<h2 class="tit">电视剧分类</h2>

<!-- css代码 -->
.tit{
    
    font-size:18px;height:25px;line-height:25px;overflow:hidden;text-indent:-9999px;}
或
.tit{
    
    font-size:18px;height:25px;line-height:50px;overflow:hidden;}

Use CSS to intercept characters

If the length of the text is too long, you can intercept it with a style, set the height, and hide the excess part. The advantage of this is that the text can be completely presented to the search engine, and at the same time, it can also guarantee the beauty in performance.

2. Improve website speed

Try to externally link CSS and JS to ensure the cleanliness of the webpage code, which is also conducive to future maintenance.

CSS is placed at the head of the file, JS is placed at the end of the file, tools can be used to compress CSS and JS files

<link rel="stylesheet" href="css/style.css" />
<script src="js/comm.js"></script>

CSS Sprites (Sprite Map)

Reduce HTTP requests. Using CSS Sprites technology, the slices used in the web page can be combined into one image, which not only reduces the number of HTTP requests, but also enables the style image to be loaded at one time, avoiding the embarrassment of "white" web pages.

pseudo static settings

If it is a dynamic web page, you can enable the pseudo-static function to make the spider "mistakenly" think that it is a static web page, because static web pages are more suitable for spiders, and it will be better if there are keywords in the url.

Dynamic address:
　　http://www.360.cn/index.php

Pseudo-static address:
　　http://www.360.cn/index.html

other

• Setting the height and width for the picture can improve the loading speed of the page;
• Increase the expiration time for static resource files, allowing users to access the website faster through local caching;
• Reduce the frequency of major revisions;
• Compress and format code;
• Not using CSS expressions will affect efficiency;
• Use CDN network to speed up user access;
• Enable GZIP compression, the browsing speed will become faster, and the amount of information crawled by search engine spiders will also increase;
• Doing 404 pages not only improves the spider experience, but also improves the user experience;

Summarize

Don't be clever, use the technology you have mastered to try to deceive the search engine, it may have obvious effects in a short period of time, ranking improvement, etc., but after the search engine finds out, it will decisively downgrade your webpage or directly block it, the loss outweighs the gain.
　　I hope this article can give you a correct understanding of SEO. SEO must be moderate, and the website should still be "content is king". Only with good content can a website develop.
Reprinted original address:
1. https://www.bbsmax.com/A/l1dypNE95e/
2. https://www.zhihu.com/question/495173947/answer/2776099595