濟(jì)南網(wǎng)站建設(shè)：沒人問了，也沒人做了？SEO 已經(jīng)被“前端”除名了？？？
Jinan website construction: No one asked, no one did it? Has SEO been removed from the front-end???
好久沒有同學(xué)問過我關(guān)于SEO的問題了。在目前的前端開發(fā)中，好像很多新入行的同學(xué)都已經(jīng)不再關(guān)注，甚可能都不知道SEO是什么。究其原因，本質(zhì)上是因?yàn)榇罅康闹行S日常工作都是以“后臺管理系統(tǒng)”為主，“增刪改查”變成了日常開發(fā)的主旋律，無需在與 C 端用戶、搜索排名 打交道了。但是，如果一直這樣下去，肯定會影響我們知識的廣度，不利于后期的職業(yè)發(fā)展（跳槽漲薪）。因此，咱們今天就來聊聊 “好久好久沒有聊過的SEO” 的問題，來看看 它到底是什么？1. 什么是 SEOSEO（Search Engine Optimization，搜索引擎優(yōu)化）是一種通過優(yōu)化網(wǎng)站內(nèi)容和技術(shù)，以提升其在搜索引擎（如 Google、百度、Bing 等）中的自然排名，從而增加網(wǎng)站流量的技術(shù)和策略。例如，當(dāng)我們在Google進(jìn)行搜索時(shí)，排名越靠前的就是SEO 越，被用戶點(diǎn)擊的概率也就越高PS：某度的競價(jià)排名除外！競價(jià)排名是誰出的錢越多，誰就在前面。根據(jù)以上截圖就可以發(fā)現(xiàn)，針對本人【程序員Sunday】的SEO優(yōu)化中，CSDN做的，B 站其次，掘金居然是差的 。那么如何才可以做好SEO呢？想要搞明白這一點(diǎn)，咱們就先來看看SEO 的工作原理SEO 的工作原理SEO 的核心在于讓搜索引擎的爬蟲（Crawler）能夠抓取和理解網(wǎng)站內(nèi)容，進(jìn)而在索引中給出合理排名。
It's been a long time since my classmates asked me about SEO. In current front-end development, it seems that many new entrants have stopped paying attention and may not even know what SEO is. The fundamental reason is that a large number of small and medium-sized factories rely on "backend management systems" for their daily work, and "adding, deleting, modifying, and querying" has become the main theme of daily development, without the need to deal with C-end users or search rankings. However, if this continues, it will definitely affect the breadth of our knowledge and be detrimental to our later career development (job hopping and salary increase). So today, let's talk about the issue of "SEO that we haven't talked about for a long time" and see what it really is? 1. What is SEOSEO (Search Engine Optimization)? SEOSEO is a technology and strategy that optimizes website content and techniques to improve its natural ranking in search engines such as Google, Baidu, Bing, etc., thereby increasing website traffic. For example, when we search on Google, the higher the ranking, the better the SEO, and the higher the probability of being clicked by users. PS: Except for certain bidding rankings! The person who pays more in bidding ranking is at the forefront. Based on the screenshot above, it can be seen that in the SEO optimization for my programmer Sunday, CSDN did the best, followed by Bilibili, and surprisingly, Nuggets was the worst. So how can we do SEO well? To understand this, let's first take a look at the working principle of SEO. The core of SEO is to enable search engine crawlers to efficiently crawl and understand website content, and then provide reasonable rankings in the index.
它的具體工作流程分為以下三大步：Crawl（爬取）：搜索引擎爬蟲訪問網(wǎng)站，抓取頁面內(nèi)容、鏈接和資源。Index（索引）：抓取到的內(nèi)容被存儲在搜索引擎的數(shù)據(jù)庫中，作為后續(xù)查詢的基礎(chǔ)。Rank（排名）：根據(jù)內(nèi)容的相關(guān)性、質(zhì)量、網(wǎng)站結(jié)構(gòu)等多個(gè)因素，將頁面按關(guān)鍵詞的優(yōu)先級排序。那么明確好了它的原理之后，我們就知道想要做好SEO優(yōu)化，其核心就是：更清晰，快速的展示網(wǎng)站關(guān)鍵內(nèi)容。
Its specific workflow is divided into the following three steps: Crawl: Search engine crawlers access websites, crawl page content, links, and resources. Index: The captured content is stored in the search engine's database as the basis for subsequent queries. Rank: Sort pages by keyword priority based on multiple factors such as content relevance, quality, website structure, etc. After clarifying its principle, we know that in order to do SEO optimization well, the core is to display the key content of the website more clearly and quickly.
那么具體怎么做呢？我們來看一下！
So how to do it specifically? Let's take a look!
SEO 優(yōu)化方案1. 確保關(guān)鍵內(nèi)容可被搜索引擎抓取搜索引擎爬蟲依賴頁面的初始 HTML 結(jié)構(gòu)進(jìn)行抓取。如果頁面的主要內(nèi)容是通過JavaScript動態(tài)加載的，可能會導(dǎo)致內(nèi)容缺失。特別是對于依賴用戶交互加載的內(nèi)容，如點(diǎn)擊或滾動，爬蟲通常無法模擬這些操作。
SEO optimization plan 1. Ensure that key content can be crawled by search engines. Search engine crawlers rely on the initial HTML structure of the page for crawling. If the main content of the page is dynamically loaded through JavaScript, it may result in missing content. Especially for content that relies on user interaction for loading, such as clicking or scrolling, crawlers often cannot simulate these operations.
實(shí)踐方法確保重要的內(nèi)容直接輸出到 HTML 中。避免依賴用戶交互或延遲加載。
Practical methods ensure that important content is directly output into HTML. Avoid relying on user interaction or delayed loading.
示例（Vue 中的服務(wù)端渲染）使用Nuxt.js實(shí)現(xiàn) Vue 的服務(wù)端渲染，讓內(nèi)容直接輸出到 HTML：// pages/index.vue<template>
Example (server-side rendering in Vue) Using Nuxt.js to implement server-side rendering in Vue, allowing content to be directly output to HTML://pages/index. vue<template>
<div>
<div>
<h1>{{ title }}</h1>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
<p>{{ description }}</p>
</div>
</div>
</template>
</template>
<script>
<script>
export default {
export default {
async asyncData() {
async asyncData() {
// 服務(wù)端拉取數(shù)據(jù)
//Server pulls data
const data = await fetch('https://api.example.com/content').then(res => res.json()); return {const data = await fetch(' https://api.example.com/content ').then(res => res.json()); return {title: data.title,
title: data.title,
description: data.description,
description: data.description,
};
};
},
},
};
};
</script>
</script>
2. 選擇正確的渲染方式（CSR、SSR、SSG）JS 應(yīng)用主要有以下三種渲染方式：客戶端渲染（CSR）：所有內(nèi)容通過 JavaScript 動態(tài)生成，爬蟲可能無法完全抓取。服務(wù)端渲染（SSR）：HTML 內(nèi)容在服務(wù)器生成，返回靜態(tài) HTML，爬蟲更友好。
2. Choose the correct rendering method (CSR, SSR, SSG) JS applications mainly have the following three rendering methods: Client Side Rendering (CSR): All content is dynamically generated through JavaScript, and crawlers may not be able to fully capture it. Server side rendering (SSR): HTML content is generated on the server and returns static HTML, making it more web friendly.
靜態(tài)預(yù)渲染（Pre-rendering）：在構(gòu)建時(shí)生成 HTML 文件，適合內(nèi)容更新較少的頁面。實(shí)踐方法使用 SSR 或 Pre-rendering 提高 SEO 表現(xiàn)。針對需要動態(tài)交互的頁面，可以結(jié)合動態(tài)渲染。示例（使用 Pre-rendering）使用Vite配合vite-plugin-ssg靜態(tài)生成 HTML：// vite.config.jsimport{ defineConfig }from'vite';Static Pre rendering: Generate HTML files during construction, suitable for pages with minimal content updates. Practical methods include using SSR or Pre rendering to improve SEO performance. For pages that require dynamic interaction, dynamic rendering can be combined. Example (using Pre rendering): Using Vite in conjunction with Vite plugin sg to statically generate HTML://vite. config. jsimport {definiteConfig} from 'vite';importvuefrom'@vitejs/plugin-vue';
importvuefrom'@vitejs/plugin-vue';
importssgfrom'vite-plugin-ssg';
importssgfrom'vite-plugin-ssg';
exportdefaultdefineConfig({
exportdefaultdefineConfig({
plugins: [vue(), ssg()],
plugins: [vue(), ssg()],
});
});
3. 正確使用<title>和<meta>標(biāo)簽<title>和<meta>是搜索引擎理解頁面內(nèi)容的關(guān)鍵。如果這些標(biāo)簽由 JS 動態(tài)生成，爬蟲可能會抓取不到。
3. Proper use of<title>and<meta>tags is crucial for search engines to understand page content. If these tags are dynamically generated by JS, crawlers may not be able to capture them.
實(shí)踐方法使用工具（如 React Helmet 或 Vue Meta）動態(tài)設(shè)置頁面標(biāo)題和描述。確保重要頁面優(yōu)先定義meta name="description"和meta name="robots"。示例（Vue 中動態(tài)設(shè)置標(biāo)題和描述）// 使用 vue-meta 插件<template>
Practical methods use tools such as React Helmet or Vue Meta to dynamically set page titles and descriptions. Ensure that important pages prioritize defining meta name="description" and meta name="robots". Example (dynamically setting title and description in Vue)//Using the Vue meta plugin<template>
<div>
<div>
<h1>About Us</h1>
<h1>About Us</h1>
</div>
</div>
</template>
</template>
<script>
<script>
export default {
export default {
metaInfo() {
metaInfo() {
return {
return {
title: 'About Us - Company Name',
title: 'About Us - Company Name',
meta: [
meta: [
{
{
name: 'description',
name: 'description',
content: 'Learn more about our company, mission, and values.', },content: 'Learn more about our company, mission, and values.', },],
],
};
};
},
},
};
};
</script>
</script>
4. 優(yōu)化內(nèi)部鏈接結(jié)構(gòu)內(nèi)部鏈接幫助爬蟲理解頁面結(jié)構(gòu)和內(nèi)容關(guān)系。
4. Optimize internal link structure. Internal links help crawlers understand page structure and content relationships.
如果鏈接通過 JS 動態(tài)生成，爬蟲可能會忽略這些鏈接。實(shí)踐方法使用標(biāo)準(zhǔn)的<a>標(biāo)簽定義內(nèi)部鏈接。避免完全依賴事件監(jiān)聽器（如onClick）實(shí)現(xiàn)導(dǎo)航。示例// 避免這種方式：
If links are dynamically generated through JS, crawlers may ignore these links. The practical method uses standard<a>tags to define internal links. Avoid relying entirely on event listeners (such as onClick) to implement navigation. Example//Avoid this approach:
<button @click="navigateTo('/about')">About Us</button>
<button @click="navigateTo('/about')">About Us</button>
// 使用：
//Recommended use:
<router-link to="/about">About Us</router-link>
<router-link to="/about">About Us</router-link>
5. 使用語義化的 HTML語義化標(biāo)簽?zāi)茉鰪?qiáng)爬蟲對頁面內(nèi)容的理解。濫用<div>和<span>會降低頁面的可讀性。實(shí)踐方法用<header>、<main>、<article>等結(jié)構(gòu)化頁面內(nèi)容。合理使用<h1>到<h6>標(biāo)簽，突出頁面層次。示例<header>
5. Using semantic HTML tags can enhance web crawlers' understanding of page content. Abuse of<div>and<span>can reduce the readability of the page. The practical method uses structured page content such as<header>,<main>,<article>, etc. Reasonably use<h1>to<h6>tags to highlight page hierarchy. Example<header>
<h1>歡迎來到我的博客</h1>
<h1>Welcome to my blog</h1>
</header>
</header>
<main>
<main>
<article>
<article>
<h2>文章</h2>
<h2>Latest Articles</h2>
<p>內(nèi)容</p>
<p>Content</p>
</article>
</article>
</main>
</main>
<footer>
<footer>
<p> 2024 程序員Sunday</p>
<p>2024 Programmer Sunday</p>
</footer>
</footer>
6. 避免對內(nèi)容的延遲加載懶加載可以優(yōu)化用戶體驗(yàn)，但如果懶加載的內(nèi)容是關(guān)鍵內(nèi)容，可能會導(dǎo)致爬蟲抓取不到。實(shí)踐方法優(yōu)先渲染首屏內(nèi)容。使用 Intersection Observer 優(yōu)化懶加載行為。示例（懶加載優(yōu)化）constobserver =newIntersectionObserver((entries) =>{ entries.forEach(entry=>{6. Avoid delayed loading of content. Lazy loading can optimize user experience, but if the content being lazily loaded is critical, it may result in crawlers not being able to capture it. The practical method prioritizes rendering the first screen content. Optimize lazy loading behavior using Intersection Observer. Example (Lazy Load Optimization) const observer=newIntersectionObserver ((entries)=>{entries. forEach (entry=>){if(entry.isIntersecting) {
if(entry.isIntersecting) {
constimg = entry.target;
constimg = entry.target;
img.src = img.dataset.src;
img.src = img.dataset.src;
observer.unobserve(img);
observer.unobserve(img);
}
}
});
});
});
});
document.querySelectorAll('img[data-src]').forEach(img=>observer.observe(img));7. 優(yōu)化 JavaScript 文件加載JavaScript 文件加載過慢會影響頁面渲染速度，從而降低 SEO 排名。實(shí)踐方法使用 Webpack 的代碼拆分功能。壓縮和混淆 JavaScript 文件。示例（Webpack 配置代碼拆分）module.exports = {optimization: {document.querySelectorAll('img[data-src]').forEach(img=>observer.observe(img)); 7. Optimizing JavaScript file loading. Slow loading of JavaScript files can affect page rendering speed, thereby reducing SEO ranking. The practical method is to use the code splitting feature of Webpack. Compress and obfuscate JavaScript files. Example (Webpack configuration code splitting) module.exports={optimization:{splitChunks: {
splitChunks: {
chunks:'all',
chunks:'all',
},
},
},
},
};
8. 確保重要資源的可訪問性如果 robots.txt 阻止了 JavaScript 文件或 API，爬蟲無法正確解析頁面內(nèi)容。實(shí)踐方法確保 robots.txt 文件允許訪問關(guān)鍵資源。檢查資源是否被錯(cuò)誤屏蔽。
8. Ensure the accessibility of important resources. If robots.txt blocks JavaScript files or APIs, crawlers cannot correctly parse page content. Practical methods ensure that robots.txt files allow access to critical resources. Check if the resources have been incorrectly blocked.
9. 構(gòu)建結(jié)構(gòu)化數(shù)據(jù)結(jié)構(gòu)化數(shù)據(jù)幫助搜索引擎更好地理解頁面內(nèi)容，并有機(jī)會在搜索結(jié)果中展示富文本卡片。
9. Building structured data helps search engines better understand page content and has the opportunity to display rich text cards in search results.
本文由濟(jì)南網(wǎng)站建設(shè)友情奉獻(xiàn).更多有關(guān)的知識請點(diǎn)擊http://www.zdwtxxgs.cn/真誠的態(tài)度.為您提供為的服務(wù).更多有關(guān)的知識我們將會陸續(xù)向大家奉獻(xiàn).敬請期待.
This article is a friendly contribution from Jinan website construction For more related knowledge, please click http://www.zdwtxxgs.cn/ Sincere attitude To provide you with comprehensive services We will gradually contribute more relevant knowledge to everyone Coming soon.
魯公網(wǎng)安備37010202000892號