济南网站建设：没人问了，也没人做了？SEO 已经被“前端”除名了？？？

　　Jinan website construction: No one asked, no one did it? Has SEO been removed from the front-end???

　　好久没有同学问过我关于SEO的问题了。在目前的前端开发中，好像很多新入行的同学都已经不再关注，甚可能都不知道SEO是什么。究其原因，本质上是因为大量的中小厂日常工作都是以“后台管理系统”为主，“增删改查”变成了日常开发的主旋律，无需在与 C 端用户、搜索排名 打交道了。但是，如果一直这样下去，肯定会影响我们知识的广度，不利于后期的职业发展（跳槽涨薪）。因此，咱们今天就来聊聊 “好久好久没有聊过的SEO” 的问题，来看看 它到底是什么？1. 什么是 SEOSEO（Search Engine Optimization，搜索引擎优化）是一种通过优化网站内容和技术，以提升其在搜索引擎（如 Google、百度、Bing 等）中的自然排名，从而增加网站流量的技术和策略。例如，当我们在Google进行搜索时，排名越靠前的就是SEO 越，被用户点击的概率也就越高PS：某度的竞价排名除外！竞价排名是谁出的钱越多，谁就在前面。根据以上截图就可以发现，针对本人【程序员Sunday】的SEO优化中，CSDN做的，B 站其次，掘金居然是差的 。那么如何才可以做好SEO呢？想要搞明白这一点，咱们就先来看看SEO 的工作原理SEO 的工作原理SEO 的核心在于让搜索引擎的爬虫（Crawler）能够抓取和理解网站内容，进而在索引中给出合理排名。

　　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（爬取）：搜索引擎爬虫访问网站，抓取页面内容、链接和资源。Index（索引）：抓取到的内容被存储在搜索引擎的数据库中，作为后续查询的基础。Rank（排名）：根据内容的相关性、质量、网站结构等多个因素，将页面按关键词的优先级排序。那么明确好了它的原理之后，我们就知道想要做好SEO优化，其核心就是：更清晰，快速的展示网站关键内容。

　　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 优化方案1. 确保关键内容可被搜索引擎抓取搜索引擎爬虫依赖页面的初始 HTML 结构进行抓取。如果页面的主要内容是通过JavaScript动态加载的，可能会导致内容缺失。特别是对于依赖用户交互加载的内容，如点击或滚动，爬虫通常无法模拟这些操作。

　　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.

　　实践方法确保重要的内容直接输出到 HTML 中。避免依赖用户交互或延迟加载。

　　Practical methods ensure that important content is directly output into HTML. Avoid relying on user interaction or delayed loading.

　　示例（Vue 中的服务端渲染）使用Nuxt.js实现 Vue 的服务端渲染，让内容直接输出到 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() {

　　// 服务端拉取数据

　　//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 应用主要有以下三种渲染方式：客户端渲染（CSR）：所有内容通过 JavaScript 动态生成，爬虫可能无法完全抓取。服务端渲染（SSR）：HTML 内容在服务器生成，返回静态 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.

　　静态预渲染（Pre-rendering）：在构建时生成 HTML 文件，适合内容更新较少的页面。实践方法使用 SSR 或 Pre-rendering 提高 SEO 表现。针对需要动态交互的页面，可以结合动态渲染。示例（使用 Pre-rendering）使用Vite配合vite-plugin-ssg静态生成 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>标签<title>和<meta>是搜索引擎理解页面内容的关键。如果这些标签由 JS 动态生成，爬虫可能会抓取不到。

　　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.

　　实践方法使用工具（如 React Helmet 或 Vue Meta）动态设置页面标题和描述。确保重要页面优先定义meta name="description"和meta name="robots"。示例（Vue 中动态设置标题和描述）// 使用 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. 优化内部链接结构内部链接帮助爬虫理解页面结构和内容关系。

　　4. Optimize internal link structure. Internal links help crawlers understand page structure and content relationships.

　　如果链接通过 JS 动态生成，爬虫可能会忽略这些链接。实践方法使用标准的<a>标签定义内部链接。避免完全依赖事件监听器（如onClick）实现导航。示例// 避免这种方式：

　　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语义化标签能增强爬虫对页面内容的理解。滥用<div>和<span>会降低页面的可读性。实践方法用<header>、<main>、<article>等结构化页面内容。合理使用<h1>到<h6>标签，突出页面层次。示例<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>内容</p>

　　<p>Content</p>

　　</article>

　　</article>

　　</main>

　　</main>

　　<footer>

　　<footer>

　　<p> 2024 程序员Sunday</p>

　　<p>2024 Programmer Sunday</p>

　　</footer>

　　</footer>

　　6. 避免对内容的延迟加载懒加载可以优化用户体验，但如果懒加载的内容是关键内容，可能会导致爬虫抓取不到。实践方法优先渲染首屏内容。使用 Intersection Observer 优化懒加载行为。示例（懒加载优化）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. 优化 JavaScript 文件加载JavaScript 文件加载过慢会影响页面渲染速度，从而降低 SEO 排名。实践方法使用 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，爬虫无法正确解析页面内容。实践方法确保 robots.txt 文件允许访问关键资源。检查资源是否被错误屏蔽。

　　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. 构建结构化数据结构化数据帮助搜索引擎更好地理解页面内容，并有机会在搜索结果中展示富文本卡片。

　　9. Building structured data helps search engines better understand page content and has the opportunity to display rich text cards in search results.

　　本文由济南网站建设友情奉献.更多有关的知识请点击https://www.chinanovo.net/真诚的态度.为您提供为的服务.更多有关的知识我们将会陆续向大家奉献.敬请期待.

　　This article is a friendly contribution from Jinan website construction For more related knowledge, please click https://www.chinanovo.net/ Sincere attitude To provide you with comprehensive services We will gradually contribute more relevant knowledge to everyone Coming soon.