-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathseo.html
More file actions
14 lines (14 loc) · 11 KB
/
seo.html
File metadata and controls
14 lines (14 loc) · 11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>Seo - Frank Wang's Coding World</title><meta name=renderer content="webkit"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv=Cache-Control content="no-transform"><meta http-equiv=Cache-Control content="no-siteapp"><meta name=theme-color content="#f8f5ec"><meta name=msapplication-navbutton-color content="#f8f5ec"><meta name=apple-mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec"><meta name=author content><meta name=description content="Basic SEO knowledge that front-end engineers should have, SEO Beginner’s Guide"><meta name=keywords content="SEO basics,SEO Beginner’s Guide"><meta name=generator content="Hugo 0.157.0 with theme even"><link rel=canonical href=http://frankwang0909.github.io/seo.html><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=manifest href=/manifest.json><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link href=/sass/main.min.af7fd1da18d66c2b017df5b4cae508ef44cfcac3fb4c7c7a327fe4f4f9e28b08.css rel=stylesheet><link href=/lib/fancybox/jquery.fancybox-3.1.20.min.css rel=stylesheet><meta property="og:url" content="http://frankwang0909.github.io/seo.html"><meta property="og:site_name" content="Frank Wang's Coding World"><meta property="og:title" content="Seo"><meta property="og:description" content="Basic SEO knowledge that front-end engineers should have, SEO Beginner’s Guide"><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2016-08-01T21:49:40+08:00"><meta property="article:modified_time" content="2016-08-01T21:49:40+08:00"><meta property="article:tag" content="Seo"><meta itemprop=name content="Seo"><meta itemprop=description content="Basic SEO knowledge that front-end engineers should have, SEO Beginner’s Guide"><meta itemprop=datePublished content="2016-08-01T21:49:40+08:00"><meta itemprop=dateModified content="2016-08-01T21:49:40+08:00"><meta itemprop=wordCount content="487"><meta itemprop=keywords content="SEO basics,SEO Beginner’s Guide"><meta name=twitter:card content="summary"><meta name=twitter:title content="Seo"><meta name=twitter:description content="Basic SEO knowledge that front-end engineers should have, SEO Beginner’s Guide"><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script><script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]--></head><body><div id=mobile-navbar class=mobile-navbar><div class=mobile-header-logo><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><div class=mobile-navbar-icon><span></span>
<span></span>
<span></span></div></div><nav id=mobile-menu class="mobile-menu slideout-menu"><ul class=mobile-menu-list><a href=/en/><li class=mobile-menu-item>Home</li></a><a href=/en/post/><li class=mobile-menu-item>Archives</li></a><a href=/en/tags/><li class=mobile-menu-item>Tags</li></a><a href=/en/categories/><li class=mobile-menu-item>Categories</li></a><a href=/><li class=mobile-menu-item>中文</li></a></ul></nav><div class=container id=mobile-panel><header id=header class=header><div class=logo-wrapper><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><nav class=site-navbar><ul id=menu class=menu><li class=menu-item><a class=menu-item-link href=/en/>Home</a></li><li class=menu-item><a class=menu-item-link href=/en/post/>Archives</a></li><li class=menu-item><a class=menu-item-link href=/en/tags/>Tags</a></li><li class=menu-item><a class=menu-item-link href=/en/categories/>Categories</a></li><li class=menu-item><a class=menu-item-link href=/>中文</a></li></ul></nav></header><main id=main class=main><div class=content-wrapper><div id=content class=content><article class=post><header class=post-header><h1 class=post-title>Seo</h1><div class=post-meta><span class=post-time>2016-08-01</span><div class=post-category><a href=/en/categories/frontend/>frontend</a></div><span class=more-meta>487 words </span><span class=more-meta>3 mins read</span></div></header><div class=post-toc id=post-toc><h2 class=post-toc-title>Contents</h2><div class="post-toc-content always-active"><nav id=TableOfContents><ul><li><a href=#what-is-seo>What is SEO?</a></li><li><a href=#seo-knowledge-that-front-end-engineers-should-master>SEO knowledge that front-end engineers should master</a><ul><li><a href=#1-optimization-of-structural-layout>1. Optimization of structural layout</a></li><li><a href=#2-semanticization-of-tags>2. Semanticization of tags</a></li></ul></li></ul></nav></div></div><div class=post-content><h2 id=what-is-seo>What is SEO?</h2><p>SEO is an acronym for Search Engine Optimization or Search Engine Optimizer. In layman’s terms, SEO is to adjust and optimize the website internally and off-site to make the website meet the search engine ranking requirements and improve the keyword ranking in the search engine, thereby bringing accurate users to the website, obtaining free traffic, and generating direct sales or brand promotion.</p><p>Newbies can read <a href="https://support.google.com/webmasters/answer/35291?hl=zh-Hans">Google Search Engine Optimization (SEO) One-page Guide.pdf</a>.</p><p>If you want to learn more, you can refer to <a href=http://static.googleusercontent.com/media/www.google.com/en/us/intl/zh-cn/webmasters/docs/search-engine-optimization-starter-guide-zh-cn.pdf>Google Search Engine Optimization Starter Guide</a> (Need to climb over the wall), <a href=http://frankwang0909.github.io/posts/search-engine-optimization-starter-guide-zh-cn.pdf>If you can’t climb over, you can click here</a>.</p><h2 id=seo-knowledge-that-front-end-engineers-should-master>SEO knowledge that front-end engineers should master</h2><p>At present, many companies have full-time positions for SEO, and front-end engineers are not specialized in SEO optimization and promotion. They do not need to become SEO experts, but they should master the following basic SEO knowledge.</p><h3 id=1-optimization-of-structural-layout>1. Optimization of structural layout</h3><ol><li>Flatten the structure.</li></ol><p>The hierarchical structure of the website should not exceed three levels. In this way, search engines or users can reach any internal page in the website by clicking and jumping 3 times.</p><ol start=2><li>Optimize navigation.</li></ol><p>Set the main navigation, secondary navigation, category navigation, breadcrumb navigation, pagination page number, etc. of the page to facilitate users to jump to the page they want to visit.</p><h3 id=2-semanticization-of-tags>2. Semanticization of tags</h3><p>Search engine crawlers will rely on tags to determine the context and weight of each keyword. Therefore, the correct use of semantic tags will help search engines crawl and include web content.</p><ol><li>Anchor link <code><a></code> tag:</li></ol><ol><li><p>Add the attribute <strong>title=“text description of the link”</strong> to add a description of the link, especially the link pointing to this site.</p></li><li><p>Add the attribute <strong>rel=“no follow”</strong>. For links pointing to non-sites, adding this attribute tells the crawler that the page does not need to be tracked.</p></li></ol><ol start=2><li><p>Use <code><h1></code> for the main text title and <code><h2></code> for the subtitle. Do not abuse titles.</p></li><li><p>Use <code><p></code> for the text content, and <code><br></code> for line breaks within the text. Do not abuse <code><br></code> for line breaks in other places, but set them through CSS styles.</p></li><li><p>Picture <code><img> </code>Add attribute <strong>alt=“Text annotation of the picture”</strong>.</p></li><li><p>Use <code><table></code> for tables and <code><caption></code> for table titles.</p></li><li><p>Use <code><ol></code> for ordered lists, <code><ul></code> for unordered lists, and <code>< dl></code> for definition lists.</p></li><li><p>Emphasis tag: <code><strong></code> means emphasis. It can be used to highlight keywords and has greater weight. <code><em></code> also expresses emphasis and has a slightly lower weight than strong. Although the <code><b></code> tag also has a bold effect, it does not have an emphasis effect, so it does not increase the weight of the text within the tag.</p></li><li><p>Reduce the use of <code><iframe></code>. iframes block page loading and delay triggering the window.onload event, giving users the impression that the webpage is very slow.</p></li><li><p>Put the HTML code of important content at the front, and then control the position through CSS properties.</p></li></ol></div><footer class=post-footer><div class=post-tags><a href=/en/tags/seo/>seo</a></div><nav class=post-nav><a class=prev href=/cdn.html><i class="iconfont icon-left"></i>
<span class="prev-text nav-default">Cdn</span>
<span class="prev-text nav-mobile">Prev</span>
</a><a class=next href=/css3_transition.html><span class="next-text nav-default">Css3transition</span>
<span class="next-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i></a></nav></footer></article></div></div></main><footer id=footer class=footer><div class=social-links><a href=mailto:frankwang0909@gmail.com class="iconfont icon-email" title=email></a><a href=https://www.twitter.com/frankwang0909 class="iconfont icon-twitter" title=twitter></a><a href=https://www.github.com/frankwang0909 class="iconfont icon-github" title=github></a><a href=http://frankwang0909.github.io/en/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a></div><div class=copyright><span class=power-by>Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span><span class=division>|</span>
<span class=theme-info>Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span><span class=copyright-year>©
2016 -
2026<span class=heart><i class="iconfont icon-heart"></i></span><span></span></span></div></footer><div class=back-to-top id=back-to-top><i class="iconfont icon-up"></i></div></div><script type=text/javascript src=/lib/jquery/jquery-3.2.1.min.js></script><script type=text/javascript src=/lib/slideout/slideout-1.0.1.min.js></script><script type=text/javascript src=/lib/fancybox/jquery.fancybox-3.1.20.min.js></script><script type=text/javascript src=/js/main.min.4ae89da218555efa0e7093a20b92017d2e1202b66fff9fc2edf4cb8d44b44c6e.js></script><script type=text/javascript>window.MathJax={tex:{}}</script><script async src=https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js integrity="sha256-HGLuEfFcsUJGhvB8cQ8nr0gai9EucOOaIxFw7qxmd+w=" crossorigin=anonymous></script></body></html>