公司想推广做网站有用？图解步骤拆解避坑指南
网站做好了没人访问，这是无数中小企业主最头疼的噩梦。你花了几万块找外包，页面做得花里胡哨，结果上线三个月，后台访客数是个位数，百度一搜连影子都看不见。很多老板问我，公司想推广做网站有用吗？我的回答很直接：有用，但前提是你得把“做网站”和“做SEO”当成两件事来搞。很多公司死就死在，只盯着UI看好不好看，完全忽略了搜索引擎怎么抓取你的代码。
今天我不讲虚的，直接拿我去年经手的一个真实项目案例，用图解步骤的方式，把从需求到上线的全过程拆给你看。咱们不整那些高大上的理论，就聊怎么让百度和Google真正看懂你的网站。
项目背景与需求：别再为了“好看”买单
去年8月，一家做精密机械配件的工厂老板找我。他们之前花3万块做了个站，全是Flash和轮播图，手机打开要加载10秒。老板很焦虑：“我想在百度上搜到我们名字，结果排第二页后面，竞品那种简陋的静态站反而排第一。公司想推广做网站有用吗？是不是钱白花了？”
我打开他们的后台看了看，瞬间明白问题在哪了。他们的网站没有语义化标签，图片没有Alt属性，甚至连基础的meta description都没写。这就好比你开了一家店，装修豪华，但门口没招牌，店员也不会说话，客人路过都看不见你，看见了也进不去。
我们重新梳理需求。这次的目标很明确：SEO友好、加载速度快、移动端体验好。我告诉老板，网站不是艺术品，它是你的24小时数字销售员。它必须让搜索引擎爬虫（Bot）能轻松读懂你的内容，同时让潜在客户在手机上能3秒内看到你的核心产品。
在这个阶段，我们做了一张需求拆解表，把功能需求和技术需求分开列：需求类型
具体细节
优先级核心功能
产品分类展示、询价表单、关于我们
P0SEO基础
TDK独立设置、URL结构优化、内链布局
P0性能指标
首屏加载时间2秒、Lighthouse评分80
P1安全合规
HTTPS证书、ICP备案、数据备份
P1很多新手容易犯的错误是，一上来就问“用什么框架”，却忘了问“我要解决什么问题”。记住，技术是为业务服务的，不是炫技用的。
技术选型：为什么我放弃了重型框架
确定了需求后，就是技术选型。老板问：“是不是用React或者Vue更好？”我说：“别被忽悠了。对于这种以内容展示为主的企业官网，重型前端框架是累赘。”
为什么？因为SEO的核心是服务器端渲染（SSR）或者静态化。如果你用React做单页应用（SPA），初始HTML里只有一个div id=root/div，搜索引擎爬虫第一次来的时候，看到的就是一张白纸。虽然现代爬虫（如Googlebot）能执行JS，但这会大幅增加爬取成本，且百度对JS渲染的支持一直不如对纯静态页面友好。
我们最终选用的技术栈是：NestJS + Next.js + PostgreSQL。NestJS：作为后端核心，结构清晰，模块化好，适合后续扩展。
Next.js：利用其SSR（服务端渲染）能力，确保爬虫抓取到的HTML包含完整内容，同时利用其ISR（增量静态再生成）技术，平衡了动态内容和加载速度。
PostgreSQL：比MySQL在复杂查询和JSON数据处理上更有优势，适合处理产品分类和规格参数。这里有一个关键的技术决策点：URL结构设计。
很多传统CMS生成的URL是这样的：
www.example.com/product?id=123
这对SEO非常不友好。我们改成了语义化URL：
www.example.com/products/precision-bearings/6204-zz
这种结构不仅人类可读，搜索引擎也能从中提取关键词。在Next.js中，我们通过generateStaticParams函数来实现这个逻辑。
核心实现：代码里的SEO细节
接下来进入干货环节。很多人做网站，代码写得挺溜，但忽略了SEO的几个核心细节。我用代码片段展示一下我们是怎么做的。
1. 语义化HTML与Meta标签
在Next.js的_document.js或者App Router的layout.tsx中，我们动态注入Meta信息。不要偷懒用默认模板，每个页面的Title和Description必须独立。
// app/products/[slug]/page.tsx
import { Metadata } from 'next';
import { getProductBySlug } from '@/lib/db';type Props = {params: { slug: string };
};// 动态生成Meta信息，确保每个产品页都有独立的SEO标签
export async function generateMetadata({ params }: Props): PromiseMetadata {const product = await getProductBySlug(params.slug);if (!product) {return { title: '404 Not Found' };}return {title: `${product.name} - 高精度轴承 | ${product.category}`,description: `${product.name}规格参数、价格及现货供应。支持OEM定制，工厂直发。查看${product.category}系列产品详情。`,keywords: [product.name, '轴承', '精密机械', 'OEM定制'],openGraph: {url: `https://www.example.com/products/${params.slug}`,title: product.name,description: product.description.substring(0, 160),images: [{url: product.imageUrl,width: 1200,height: 630,alt: product.name,},],},};
}注意看代码中的description。我们截取了产品描述的前160个字符，并加入了行动号召（CTA）关键词。这直接影响了搜索结果页（SERP）的点击率（CTR）。
2. 结构化数据（JSON-LD）
这是很多外包公司会漏掉的“隐形翅膀”。我们在页面头部注入JSON-LD结构化数据，告诉搜索引擎“这是一个产品”，并标明价格、库存状态等。
script type=application/ld+json
{@context: https://schema.org,@type: Product,name: 6204-ZZ 深沟球轴承,image: https://www.example.com/images/6204-zz.jpg,description: 高精度工业级深沟球轴承，P5级精度,sku: BRG-6204-ZZ,brand: {@type: Brand,name: Example Bearings},offers: {@type: Offer,priceCurrency: CNY,price: 15.50,availability: https://schema.org/InStock,url: https://www.example.com/products/precision-bearings/6204-zz}
}
/script当你在Google Search Console中提交这个页面后，如果配置正确，你的产品在搜索结果中可能会显示“富媒体摘要”，比如显示星级评分或价格，这会显著提升你的展现形式，让竞争对手望尘莫及。
3. 图片优化：WebP与懒加载
原图往往是几MB的JPG，这直接拖垮速度。我们在构建时通过sharp库将所有图片压缩为WebP格式，并添加srcset属性以适配不同屏幕。
在Next.js中，直接使用Image组件即可自动处理：
import Image from 'next/image';Imagesrc=/images/6204-zz.webpalt=6204-ZZ 深沟球轴承正面图width={800}height={600}loading=lazypriority={false}style={{ objectFit: 'cover' }}
/alt属性千万别留空！这是搜索引擎“看”图片的唯一方式。我们在数据库里强制要求上传图片时必须填写alt，否则CI/CD流程会报错阻断部署。
上线与优化：从部署到收录
代码写完只是开始，上线部署才是生死关。我们部署在Vercel上，利用其全球CDN节点，确保国内和海外用户都有良好的访问速度。
1. HTTPS与SSL证书
现在HTTPS是标配，不是选项。在Vercel中，这是自动配置的。但在传统服务器部署时，你需要手动申请Let's Encrypt证书，并配置Nginx强制301重定向到HTTPS。
server {listen 80;server_name www.example.com;return 301 https://$host$request_uri;
}server {listen 443 ssl http2;server_name www.example.com;ssl_certificate /etc/letsencrypt/live/www.example.com/fullchain.pem;ssl_certificate_key /etc/letsencrypt/live/www.example.com/privkey.pem;# 其他配置...
}重要提示：如果你之前有HTTP版本被收录，务必设置301重定向，避免权重分散。
2. 百度与Google的提交策略
很多老板只关注百度，但如果你做外贸，Google才是爹。Google：注册Google Search Console（GSC），验证域名，提交Sitemap。GSC会告诉你哪些页面有覆盖错误，哪些页面被索引。这是最权威的SEO体检报告。
百度：注册百度站长平台，提交Sitemap。百度的收录机制比较慢，通常需要2-4周。建议配合“百度快速收录”功能，但这需要一定权重基础。我们在上线当天，就在GSC中提交了Sitemap，并请求了索引。三天后，核心页面全部被索引。一周后，我们在百度上也看到了部分页面的收录。
3. 性能监控
上线后，我们监控Lighthouse评分。初始版本移动端评分只有72，主要问题是字体渲染阻塞。我们通过font-display: swap和预加载关键字体，将评分提升至91。
性能即SEO。根据Google的数据，页面加载时间从1秒增加到3秒，用户流失率会增加32%。对于B2B网站，客户耐心更差，速度慢了，直接跳失。
经验总结：网站是长期的资产
这个项目上线三个月后，自然搜索流量增长了150%，询盘量增加了40%。老板很惊喜：“原来公司想推广做网站有用，关键是得做对。”
回顾整个过程，我想给还在纠结的朋友几点建议：别迷信外包：如果外包公司只谈UI不谈SEO结构，趁早换人。
内容质量数量：与其写100篇水文，不如写20篇深度解析行业痛点的文章。搜索引擎喜欢有价值的内容。
数据驱动优化：定期查看Google Search Console和百度站长平台的搜索查询报告，看看用户到底在搜什么词，据此优化你的标题和内容。
长期主义：SEO不是打广告，投钱就有效果。它是种树，需要时间。网站是你公司的数字资产，要像维护品牌一样维护它。网站建设不是终点，而是起点。只有当网站开始带来自然流量和询盘时，它才真正发挥了价值。
你在建站过程中遇到过什么坑？比如百度不收录、页面被K、或者代码结构混乱导致无法优化？还有什么建站疑问？评论区留言挨个回，咱们一起交流实战经验。
