项目出海实战3：快速制作网站并上线-知识充电站

部分资源需使用积分获取，注册就送积分，论坛互动、签到途径轻松获取。

部分图片较大，加载较慢，PC端浏览最佳！

往期回顾-点击下面链接：

项目出海第一站-寻找海外商机-连载中….

3.1 第一步：制作网站和优化网站

当我们了解到用户的搜索意图之后，即可确定这个网站的制作方向，即它是科普这个名词相关的内容站，还是满足用户某个使用需求的工具站。

确定网站的方向后，下一步是梳理出这个网站的树状结构，明确这个网站有哪些页面构成，一致的结构将使 Google 更容易抓取这个网站。

因为谷歌倾向于突出那些更容易找到正确页面的网站，如果树状结构成立，搜索引擎将很快了解这个网站的工作方式及其提供的内容。

如果对网站的结构设计没有思路，我们可以通过搜索关键词看竞对网站的结构，从中获取思路。

了解了网站的整体结构后，还可以用 Ctrl+Shift+I 来查看单个页面的代码，了解这个网页的结构和设计是怎么样的：

请注意，这个网站我们并不需要一步到位，搭建出一个完善的网站再去验证，是会花费大量的时间的。

而我们这时候更需要做的是做出初版的静态网站，快速上线测试，拿到真实的数据和用户反馈。再根据实际情况进行进一步的优化和功能完善。

3.1.1 开发网站

最好是自己开发或者直接部署别人做好的，如果没有编程基础的话，航海只有 21 天，临时去学可能来不太急，但也不能不去学。

1.如果你有开发能力，自己开发

如果你已经有了开发能力了，以上讲的这些都不在话下了。注意不要陷入追求高大上的技术栈的陷阱。

我们做的是有 AI 能力的工具，交互不会特别复杂。如果你会用 vue ，那么用 vue 没问题。如果不会，那么就直接用原生 js 就足够了，最多加上一个 jQuery 。

2.如果你没有开发能力，这三个方式可以帮助你完成开发

① 自学资料

有很多在线教程，看多了反而可能会无所适从，所以初学者就看菜鸟教程入门足够了。以下三个教程不一定要全部学完了才开始做网站，可以先看一遍概览，大概了解什么是 HTML，要想显示出样式要用 CSS，要想点击有效果要用 JS 就可以了，然后根据你的需求，想要什么就找到对应的章节去学习：

•HTML 教程 https://www.runoob.com/html/html-tutorial.html

•CSS 教程 https://www.runoob.com/css/css-tutorial.html

•JS 教程 https://www.runoob.com/js/js-tutorial.html

另外，你还可以找 ChatGPT 辅助学习，务必尽快学会做一个简单的网页。

② 找人组队合作

如果你实在不想学，那么还可以找人组队合作，团队的力量一定会比个人单打独斗更强。

③ 基于别人开源的代码或者模板去部署

其实不管你有没有开发能力，都可以基于别人开源的代码拿来改改就用。

•Github 可以找到很多开源代码，有很多代码是是完整的项目，可以直接拿来就用。

•Vercel 模板中心有很多可以一键部署拿来就用的模板。

还有 https://codecanyon.net/search/ai 有很多收费的源码，有完整的功能，价格不贵，只要几十美元。

内容来源：《海外工具的需求挖掘和网页制作》

3.1.2 站内内容优化

我们即使是做一个工具站，丰富的站内内容准备也是不可或缺的，有一个文章列表很重要。

谷歌本质上来说，还是通过内容来进行抓取和收录。和关键词高度相关的内容，会更利于搜索展示，影响谷歌的收录速度。

因此在建站的同时，我们主要需准备好这两部分的内容：

•TDK：即 title（网页标题）、description（网页描述）和 keywords（关键词列表）

•网页结构：即网页内的一级标题、二级标题、三级标题、正文内容以及图片等

下面将用一个电影《学爸》的影评网站，来举例说明每个模块的内容需要怎么优化。

3.1.2.1 TDK 优化

① title

网页标题，是搜索引擎判断一个网页的主要内容最重要的参考来源之一。很多时候我们说 SEO 优化，其实就是如何写好网页标题。标题会直接出现在搜索结果中，所以写一个好标题，还有助于吸引用户点进你的网页。

② description 和 keywords

description 网页描述，也比较重要，也会出现在搜索结果中。

keywords 关键词列表，一般可以不写。我的优化风格是优化不要太满，所以一般都是好好写 title 和 description，但直接删除 keywords 。

3.1.2.2 网页结构优化

一个 HTML 网页，除了要写好 title 和 descrition 外，最重要的就是要让整个网页结构清晰，有明显的 h1、h2、h3 结构。

① h1

一个网页只能有一个 h1，如果说 title 是给搜索引擎看的，那么 h1 就是给用户看的。但同时搜索引擎也会参考 h1 来对你的网页进行内容评判，最终给不给你排名，排在哪个位置，很多时候就是 h1 和 title 决定的。

② h2 和 h3

这两个也是一个完整的语义化 HTML 必不可少的部分。一个网页可以有多个 h2 和 h3。

③ ph1、h2、h3 都是标题，分别是一级标题、二级标题和三级标题，那么除了标题之外，其它正文内容，就要写在 p 里边了。

④ img图片也是一个网页必不可少的一部分，合理的放置图片，不仅可以让用户更好的理解你的内容，也可以从搜索引擎的图片搜索获取流量。

img 标签一定要写 alt 属性，这是对图片的描述，专门写给搜索引擎看的。图片尽量用大图，也就是 300×300 以上的。

内容来源：《站内优化、部署上线、广告变现》

3.1.3 站内链接优化

通常来讲，我们找到的关键词，都可以拓展出很多二级三级关键词，那么在我们网站首页里，一般会把主关键词和二级三级关键词都分别用 h1、h2、h3 列出来，以目录的形式展现，点击后即可进入对应子界面，由此变成一个网状的结构。

做以上这些的目的都是为了优化主页的主关键词。

?举个例子：我们找到的主关键词为：Coloring pages

二级词：在 coloring pages 的基础上拓展出 coloring pages christmas

三级词：在二级词 coloring pages christmas 基础上继续拓展

之后，给每一个二级关键词建立子目录，用子目录的首页来优化二级关键词。

接着，再在每个子目录下为该二级关键词的所有三级关键词建立内页。

那么，内链建设的意思是，既要能够从首页有链接到每个二级、三级关键词，也要每个关键词都有链接能够指向上级。

也就是说，某个二级关键词的所有的三级关键词都需要指向到这个二级关键词子目录页面，然后所有的二级关键词子目录页面也需要有链接能够指向到首页。

3.1.3.1 后端渲染

以上说的所有 tdk 、h1、h2、h3、p、img 等，都需要能够浏览器查看 html 源代码时就能够看到，也就是服务器返回的 html 就是完整的页面，有完整的内容。

而不能是前端只返回一个固定的 html 模板，然后通过 api 获取内容后前端渲染。

不要使用 Vue 等前端框架做前后端分离的页面，这种前端渲染的页面 SEO 不友好

3.1.3.2 确保 URL 唯一

注意：每一个页面都必须写自己的唯一 URL，不要写错成其它 URL 了。

这一步非必需，写错了关联不到应该到的页面，影响较大，但写了也有加分。因此可以根据自己的情况决定是否设置。

每一个网页，有可能会有多个 url 可以打开，但是我们需要在网页的 head 中通过设置 canonical 来让搜索引擎知道当前网页正确且唯一的 URL。

举个例子，微信 App 在苹果 AppStore 的网页，苹果官方推荐的唯一 URL 是 https://apps.apple.com/cn/app/%E5%BE%AE%E4%BF%A1/id414478124。

但其实我们可以通过多个 URL 都能打开这个页面，如以下 URL 都可以：

https://apps.apple.com/cn/app/id414478124

https://apps.apple.com/cn/app/weixin/id414478124

https://apps.apple.com/cn/app/wechat/id414478124

可以看到，不管用哪个 URL 打开，苹果官方用 canonical 指定的规范且唯一的 URL 都是同一个。

内容来源：《站内优化、部署上线、广告变现》

3.1.4 给网站增加多语言支持

假设你一个网站最开始只有中文版本，那么面向的访客只能是会中文的人。

假设你的网站增加了英文版本，那么就立马可以面向所有会英文的地球人了。

但是，还是有很多人不会英文，他们搜索时默认不会使用英文，那么搜索引擎排序时，也会优先显示对应语言的网站，之后再显示英文网站。所以，为了排名，为了流量，很值得我们去给我们网站增加多语言版本。

最佳结构是域名根目录直接用英文，然后 /zh/ 是中文，/jp/ 是日语， /kr/ 是韩语，以此类推，用子目录形式做多语言支持。不建议在 url 后面增加 “ ？language=zh ” 这种形式做多语言支持。

现在有了 GPT，翻译已经没有任何技术难度了。

如果你用 markdown 写作，那么完全可以自动化操作，先用中文编写文章，保存为 markdown 文件后，自动触发 GPT 翻译，分别翻译为各种语言，之后逐一渲染为 html 页面。

如果你做的是工具站，那么就需要提取语言包，先手动做一个中文语言包 json 文件，之后发给 GPT 逐一翻译为别的国家语言就行。

如果你不会调用 GPT 接口，你手动发语言包给 ChatGPT 也是可以的。

那么到底要做哪些语言的支持呢？

这种问题直接问 GPT 就好了，我们要合理利用 AI 能力。

哥飞：请根据语言通用程度给我 10 种语言 GPT：根据世界范围内的使用率和总说话人数，以下是 10 种通用程度较高的语言：英语：全球最广泛的国际交流语言，许多国家的官方或第二语言。中文（尤其是普通话）：中国、台湾和新加坡的官方语言，也是世界上说话人数最多的语言。西班牙语：西班牙、拉丁美洲和其他一些国家的官方语言。印地语：印度的主要语言之一，也是世界上说话人数较多的语言。阿拉伯语：中东和北非地区许多国家的官方语言。法语：法国、加拿大、非洲和其他一些国家和地区的官方或通用语言。葡萄牙语：葡萄牙、巴西和其他一些国家的官方语言。俄语：俄罗斯和一些独联体国家的官方语言。孟加拉语：孟加拉国和印度西孟加拉邦的官方语言。印尼语：印度尼西亚的官方语言，也是该国最广泛使用的通信工具。这些语言覆盖了世界上大部分地区和人口，为你的网站添加这些语言的支持可能会有助于吸引全球的用户。

哥飞：这些语言缩写是什么？

GPT:以下是您提到的 10 种语言的 ISO 639-1 语言代码：

英语（English）: en

中文（Chinese）: zh

西班牙语（Spanish）: es

印地语（Hindi）: hi

阿拉伯语（Arabic）: ar

法语（French）: fr

葡萄牙语（Portuguese）: pt

俄语（Russian）: ru

孟加拉语（Bengali）: bn

印尼语（Indonesian）: id