Summary of SEO
SEO (Search Engine Optimization, Search Engine Optimization) is a kind of use of Search Engine ranking rules, to improve the target site in the natural Search results included in the number and ranking of the Optimization behavior, its purpose is to get more free traffic from the Search Engine, and a better image. Put simply, SEARCH engine optimization is about increasing natural search rankings to drive traffic and provide users with valuable information. SEO is divided into webmaster can control the internal optimization of the website, and the external optimization of the website itself, which has a certain difference with SEM (search engine marketing).
How search engines work
1) Information collection module
Information gathering is a web browsing program described as a “web crawler.” It first opens a web page, and then the link of the web page as the starting address of browsing, the link to be linked to get over, extract the link in the web page, and through a certain algorithm to decide which links to visit next. At the same time, the information collector stores the URL that has been visited to its own web page list and marks it as searched. The auto-indexer checks the page, creates an index record for it, and then adds that record to the entire query table. The information collector then repeats the process from the page to the hyperlink until the end.
2) Pre-processing of database construction
Spiders is the content of the page, then to let users quickly through keyword searches to the web page, must for web page do keyword index, thus improve the query efficiency, simple said is that the web page for each keyword extraction, frequency, and aims at these keywords in a web page, special tag, and many other factors, to give different weights for calibration, It is then stored in the index library.
3) Analyze the search content and sort the results
The first step is to check if anyone has searched for the same keyword recently. If such a cache exists, the fastest way to process it is to provide it to you, so that the query is most efficient and the workload on the back end is the lowest. The second step is to find the input query recently no search, or have other conditions reasons must be updated as a result, so will the user input word for word segmentation, if more than one key words, or a word, response procedures will once again points word, will be split into several different keyword search query. The third step is to distribute the sharpened keywords to the query system. The query system will go to the index base to query. The index base is a huge distributed system. The fourth step, the query results of different keywords (just the top part of the results sorted by weight, absolutely not all the results), based on the reverse order of weight, will be summarized together, and then the common hit part of the feedback back, and do the final weight sorting.
Search engine inclusion
See how much of the content is included in the search site input box: Site: you want to know the address such as site:www.buka.tv
Search engine marketing strategy
SEM (search engine marketing) is mentioned in the profile, what is SEM
SEM is to deliver marketing information to target users as much as possible according to the way users use search engines and the opportunities users have to retrieve information. To put it simply, search engine marketing is the network marketing based on search engine platform. It makes use of people’s dependence and usage habits on search engines to deliver information to target users when people retrieve information. It is a new form of network marketing. The following figure shows the search content with advertisements to improve their ranking through SEM
If the enterprise requires to achieve results in the near future, and is seasonal short-term marketing, it is recommended to use bidding promotion;
If long-term development, SEO is a more reasonable choice, improve their website competitiveness is the fundamental network marketing
SEO Query Tool
Chinaz webmaster tool: seo.chinaz.com love site long tool: www.aizhan.com/
Search engine official platform tools
zhanzhang.XX.com/
Front-end SEO specifications
1) website structure layout optimization: as simple as possible, advocate flat structure
1.1) Control the number of links on the homepage
Website home page is the highest weight of the place, if the home page links too little, no “bridge”, “spider” can not continue to climb down to the inside page, directly affect the number of sites included. But the home page links can not be too much, once too much, no substantive links, it is easy to affect the user experience, will also reduce the weight of the site home page, the effect is not good
1.2) Flat directory level
Try to make the “spider” as long as 3 jumps, can reach any inside page of the website.
1.3) Navigation optimization
The <img> tag must be added with “Alt” and “title” attributes to tell the search engine the location of the navigation, so that even if the image does not display normally, the user can also see the prompt text.
1.4) The structure and layout of the website
Page header: logo and main navigation, and user information. Body of the page: left side text, including breadcrumb navigation and text; On the right side of the popular articles and related articles, benefits: retain visitors, let visitors stay more, for the “spider”, these articles belong to the relevant links, enhance the relevance of the page, but also to enhance the weight of the page. Bottom of page: copyright information and links.
2) Web code optimization
2.1) Reasonable design of title, Description and keywords
<title> Title: just emphasize the key point, try to put the important keywords in the front, keywords do not repeat, try to do every page <title> title do not set the same content. <meta Keywords > tag: keywords, list a few important keywords on the page, remember too much. <meta Description > tags: the description of the page, need to be a high summary of the content of the page, remember not to be too long, too many keywords, each page should be different.
2.2) Write HTML code semantically and make proper use of semantic tags
2.3) About label attributes
Image hyperlinks with ‘title’, ‘Alt’ and other attributes, access to external links, links to other sites, you need to add el=”nofollow” attribute, tell the “spider” not to climb.
2.4) The title of the text is relevant
“Spider” thinks it is the most important. A page can have at most one H1 tag. It can be placed above the most important title of the page, such as the logo on the home page. Use the <h2> tag for subheadings, and the h header tag should not be used carelessly elsewhere
2.5) Emphasize labels
<strong>, <em> tags: used when emphasis is needed. < p style = “margin-bottom: 0pt; margin-bottom: 0pt; margin-bottom: 0pt; margin-bottom: 0pt; <b>, < I > tags: they are only used for display purposes and have no effect in SEO.
Learn NuxT.js quickly
NUXT.js
Building a server-side rendering application from scratch is quite complicated. Fortunately, we have an excellent community project, NuxT.js, which makes everything very easy. Nuxt is a higher level framework based on Vue ecology, providing an extremely convenient development experience for developing Vue applications with server-side rendering. Even cooler, you can use it as a static station generator.
Simple understanding: instead of the browser’s work, general understanding is in the created request data and page rendering, the second point is as a static file server, the rendered page back to the user.
Advantage:
- Pure static file, access speed is fast
- Compared with SSR, there are no server load issues
- Static web pages should not be hacked tools, high security
Server-side rendering and client-side rendering
- The browser (client) sends an HTTP request data interface to the server (Java servlet) through AJAX
- The server encapsulates the obtained interface data into JSON and responds to the browser
- The browser takes the JSON and renders the HTML page, generating DOM elements, and then presents the page to the user
How NuxT.js works
1. The browser (client) sends an HTTP request to the Node.js server. 2. Nuxt.js, an application deployed in Node.js, receives a browser request and requests the backend server. 3. The back-end interface server will respond to JSON data, and nuxt. js will render the data into HTML after obtaining the data. 4. Then NuxT. js will respond to the HTML page to the browser. 5
Look at the server rendering and nuxT.js server rendering and make a comparison
A brief introduction to let you quickly understand nuxT.js next: small two! Serving!
1. The first is to install NUXT this simple, we can follow the official website of the operation steps.
Refer to the link www.nuxtjs.cn/guide/insta…
2. Directory structure
|. Nuxt | assets / / resources directory Organization for the compilation of the static resources Everyone know | image. PNG | components / / organization Vue. Js components, NUXT will not extend to enhance the directory components, This means that the component cannot use asyncData methods | layout / / layout directory If there is no additional configuration, Directory renaming - not suggest name | middleware / / to hold application middleware | | node_modules / / understand ~ pages / / page directory used to organize the application routing and the view, NUXT will read all the directory. The vue file and automatically generate routing routing file in. NUXT/router. (js) | index. The vue | plugins / / plugins directory Used to organize those needs to the vue. Js applications, Instantiated before need to run the Javascript plugin | static / / to hold the application of static files, these files will not be NUXT. Js calls Webpack build build processing. When the server starts, the files in this directory are mapped to the root path of the application. For example/static/root. TXT mapped to/root. TXT | store / / Nuxt js framework integrates the function of [] Vuex state tree related configuration, in ` store ` directory to create a ` index. The js ` can activate the configuration file. Create a new index, js it even if completed | nuxt. Config. Js / / file used to organize nuxt. Js application personalized configuration, To override the default configuration don't gai 'Ming zi | package. The json / / is used to describe the application of dependencies and foreign exposure scripting interfaceCopy the code3. Next, I will directly tell you what to pay attention to in NUXT development. And then you can go straight to it. Soha!
Importing and routing static resources
// Import static resources and redirect routes <template> <! <img SRC ="~/assets/image.png" /> <! --NUXT we don't need to write the routing table 👇 '/' refers to page/index.vue other syntax and daily features --> <nuxt-link : to = "{name: 'userPage, query: {id:' 111 '}}" > personal center < / nuxt - link > < / template >Copy the codeasyncData
Nuxt.js extends vue.js to add asyncData method so that we can asynchronously fetch data before rendering the component. The asyncData method is called every time the component (page component only) is loaded. It can be called before server or route updates. The first argument, context, is set to the context object for the current page.
Async asyncData({params}){// params is the value passed in // The asyncData function performs our asynchronous operation when we get the content returned by the interface {{info.xxx}} const data = await $axios.$get('/ API /user') return {data}}Copy the code@nuxtjs/axios
We call the interface in asyncData. The @nuxTjs/Axios module is officially provided in NuxT.js. This module also contains axios and @nuxtjs/proxy (to solve asyncData and proxy forwarding) modules.
// install @nuxtjs/axios: NPM install @nuxtjs/axios // 2. Exports ={modules:['@nuxtjs/axios']}Copy the codeThe middleware
Middleware allows you to define a custom function to run before a page or set of pages are rendered. It can be used to determine permissions. You can access the corresponding page only if you have permissions
Middleware should be placed in the Middleware/directory. The name of the file will be the middleware name (Middleware /auth.js will be the Auth middleware)
//创建权限中间件
//在 middleware/ 下创建 auth.js 文件，其中auth就是中间件的名称。
//一个中间件接收content作为第一个参数
export default({ store, redirect }) => {
if(/* 没有token */){
return redirect('/')
}
}
Copy the code