公司想推广做网站有用？图解步骤拆解避坑指南

网站做好了没人访问，这是无数中小企业主最头疼的噩梦。你花了几万块找外包，页面做得花里胡哨，结果上线三个月，后台访客数是个位数，百度一搜连影子都看不见。很多老板问我，公司想推广做网站有用吗？我的回答很直接：有用，但前提是你得把“做网站”和“做SEO”当成两件事来搞。很多公司死就死在，只盯着UI看好不好看，完全忽略了搜索引擎怎么抓取你的代码。

今天我不讲虚的，直接拿我去年经手的一个真实项目案例，用图解步骤的方式，把从需求到上线的全过程拆给你看。咱们不整那些高大上的理论，就聊怎么让百度和Google真正看懂你的网站。

项目背景与需求：别再为了“好看”买单

去年8月，一家做精密机械配件的工厂老板找我。他们之前花3万块做了个站，全是Flash和轮播图，手机打开要加载10秒。老板很焦虑：“我想在百度上搜到我们名字，结果排第二页后面，竞品那种简陋的静态站反而排第一。公司想推广做网站有用吗？是不是钱白花了？”

我打开他们的后台看了看，瞬间明白问题在哪了。他们的网站没有语义化标签，图片没有Alt属性，甚至连基础的meta description都没写。这就好比你开了一家店，装修豪华，但门口没招牌，店员也不会说话，客人路过都看不见你，看见了也进不去。

我们重新梳理需求。这次的目标很明确：SEO友好、加载速度快、移动端体验好。我告诉老板，网站不是艺术品，它是你的24小时数字销售员。它必须让搜索引擎爬虫（Bot）能轻松读懂你的内容，同时让潜在客户在手机上能3秒内看到你的核心产品。

在这个阶段，我们做了一张需求拆解表，把功能需求和技术需求分开列：

需求类型	具体细节	优先级
核心功能	产品分类展示、询价表单、关于我们	P0
SEO基础	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): Promise<Metadata> {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.webp"alt="6204-ZZ 深沟球轴承正面图"width={800}height={600}loading="lazy"priority={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，并请求了索引。三天后，核心页面全部被索引。一周后，我们在百度上也看到了部分页面的收录。