写文章
一条胖咸鱼
2024-11-01 15:32

从0到1:结合颜Sir教学与AI打造成功网站

Hey, 米课的小伙伴们!

接触米课快8年了, 从来没发过文章, 只偷师学艺, 今天来交个作业,哈哈. 我一直在跟随颜Sir的课程学习独立站和SERP,近期正好花了2周时间从0到1重新做了一个新网站, 非常多处借助了AI工具,所以想和你们分享这段建站旅程中的点滴,希望能给同样对建站感兴趣的小伙伴一些启发和帮助。一起看看我是怎么从0开始,运用AI实现网站上线的吧!

第一步: 购买域名,服务器,解析DNS设置

我的域名srizfly.com是在阿里云购买的, 因为上面还有我购买的其它的许多资源,为了方便管理,就买在了一起. 反正外贸站域名也不用备案, 和国外购买的差不多.

服务器在Hostinger购买, 因为只做一个网站, 所以选择了Business版本, 折扣很大直接买了4年版

Hostinger主机.jpg
接下来就是初学建站的小伙伴会遇到的第一个问题, 购买服务器后, 需要将域名的DNS解析改为服务器的DNS. 这样域名就和服务器绑定了. 确保国内购买的域名DNS解析为购买的服务器DNS即可, hostinger的DNS服务器是:
ns1.dns-parking.com
ns2.dns-parking.com

注意在阿里云修改DNS时不要直接在基本信息处修改, 而是在域名的DNS管理处, 修改完点击同步

spacer.gif1730430640501.jpg

然后等待最慢48小时, 新的DNS生效. 小伙伴们注意, 很多人注册域名时同时购买了企业邮箱, 或者以前的老域名已经开通了企业邮箱, 如果域名的DNS更改后, 企业邮箱的解析就失效了, 导致企业邮箱会无法使用.

DNS是否生效的标准就是在Hostinger后台添加自己的Wordpress网站后, 点击Dashboard看看是否能进去.

Hostinger网站.jpg

这是阿里云的域名DNS修改为hostinger生效后点进进去的界面

Hostinger网站生效.jpg

在界面左侧底部, advanced里面找到DNS Zone Editor, 这里是添加DNS解析记录的位置.

注意: 新手可能会遇到的第二个问题, DNS设置为hostinger的地址后, 后续企业邮箱,google站长等需要添加解析记录的都是在hostinger这里进行添加, 原域名处添加解析无效.

Hostinger解析设置.jpg

hostinger自带的方案就自动安装了SSL, 配置CDN等, 不放心的话可以去检查一下. 路径在左侧Performance-CDN

第二步: Wordpress后台设置

完成第一步的动作后, 就可以开始wordpress网站的编辑啦, 我简要的整理几条个人认为对新手有用的操作流程建议.

  1. 先将后台Setting-常规项中的语言调整为中文显示, 方便自己编辑操作, 后续上线后调整为需要展示的语言, 可以理解为英文不好的小伙伴进后台操作每次都要调到操作显示语言, 调整完后再调回展示显示语言, 当然英文ok的伙伴可以忽略.

  2. 再将阅读设置中, 文章的显示设为摘要, 对搜索引擎的可见性勾选建议不索引本站点. 固定链接设置为文章名.

    为什么阅读设置为摘要?
    -1. 显示简短内容:摘要可以在文章列表中显示一小段内容,让读者对文章有一个快速的了解。这  可以吸引读者的兴趣。
    -2. 提供结构化信息:为读者提供更清晰的信息,让他们更容易找到感兴趣的内容。
    -3. SEO 优化:搜索引擎也可以使用摘要来了解您的文章内容,并在搜索结果中显示相关的摘要片 段,提高文章在搜索引擎中的可见性和点击率。
    -4. 避免被同行爬取所有内容
    为什么勾选建议搜索殷勤不索引?

    -1.网站未完成被 Google 收录,被谷歌收录后因为页面质量差没有排名-2.网站未完成给访问者留下不良印象

    -3.确保网站在各个方面都达到了最佳状态,以提高搜索引擎的可见性和排名。
  3. 设置站点的标题, 副标题, 等. 自己行业的专业展示内容, 从这里就可以开始使用AI啦, 对新手免费好用的AI我推荐Monica免费版就可以用GPT3.5模型, 我长期使用和Copilot对比过, Monica确实是更好用, 同样的对话,生成图片和文章质量更高. 理解更精准. 最关键的是, 它是集成的AI, 一个平台就可以使用多种AI工具比如GPT-4o;Claude 3.5; DALL-E 3等, 我因为重度使用, 就开了Unlimited会员, 这是使用的界面.

    Monica.jpg
    同时在APP端登陆开启AI的从聊天中学习, AI会自动根据与你的对话, 变得越来越好用, 回答越来越精准.
  4. Monica2.jpg

    借助于AI提问的格式可以是很多种, 比如请根据我的行业产品XX,设计一个网站标题和副标题, 面向XXX型潜在客户XX, 专业宣传风格, 英文结果. 


其它网站基础设置需要输入文本或图片的地方, 也可以借助AI快速的生成内容进行填充.spacer.gif 相信新手也可以很快速的完成相关设置. 

第三步:网站后台插件安装

这里建议把后台默认安装的所有插件先都删除掉. 插件按照后续使用的优先级排序, 安装建议如下.

1. Elementor和Elementor Pro(购买99USD/年的方案), 这个插件后续所有页面的编辑都需要. 而且能解决弹窗表单, 文章聚合页, 文章单页, 产品聚合页,产品单页模板. 

2.Style Kits 和 Starter Templates, 这两插件都是结合elementor在设计页面时使用的, 提供一些精美的板块模板. 可以方便的调用.

3. Woocommerce(如有较多产品分类和产品类型), 然后安装颜Sir发的Yansir B2B插件, 可以把B2C的功能进行设置隐藏不展示. 

4.Gtranslate 免费的多语言翻译浏览插件, 因为在初期设计页眉, 页脚时就要考虑这个插件的浮窗设计, 所以在开始就建议安装类似的工具, 避免后面安装后再进行调整.

5.All In One WP Security 据说是WP最好用的安全工具 类似的选一个就行.

基础建站时使用以上5个插件足够

为了效率, 我同样列上后续需要可以提前安装的插件.

6.File manager管理网站文件的插件, 如果需要上传特定的文件到网站后台特定的路径中, 可以开启这个插件, 完成相关操作后, 再关闭它. 避免黑客攻击. 比如第三步Yan Sir B2B的汉化怎么做

     就可以打开File manager, 然后路径-文件管理器-public_html到wp-content到languages到plugins, 添加汉化文件.

B2B汉化.jpg

7.One User Avatar创建站长头像工具, 博客文章留言显示头像. 安装后即可激活, wordpress后台右上角更改自己的站长头像. 设置评论回复默认的头像.

8.Seopress 便携设置站长地图和提供SEO优化指导的免费SEO工具, 前期可以不开启, 建站完毕设置阅读选项推荐抓取后再进行开启和相关设置.

9.Nitro Pack一个优化网站访问速度,清理缓存的免费插件. 同样前期可以不开启, 建站完毕, 网站图片,文件等资源都调整完毕后开启.

10.WPCode Lite 一个方便给网站添加各种代码的插件, 比如后续的GTM, Facebook等跟踪代码都可以借助于这个插件方便的添加.

第四步:制作网站菜单

具体的设置参照课程都是比较简单的, 我提醒二个地方就是主页与文章页/商店页的设置. 主页和文章页在菜单栏自定义设置中调整, 别忘了主页显示静态页面.

主页和文章页商店页.jpg
而商店页要在Woocommerce中点击设置, 选择产品绑定XXXX为商店页面, 只有这一步对了, 后续设计的产品聚合页才能正常显示.
产品聚合页.jpg

第五步.制作网站内容

-1.页眉页脚和网站皮肤

使用elementor的主题构建器创建页眉页脚, 并设置其生效范围. 具体的操作步骤这里就不做详细描述了, 最终效果大家也可以在网站上浏览.就是用前面的工具, 按照颜Sir的课程做的. 一些简单的工具分享

给网站选颜色https://coolors.co/generate

配色的网站nipponcolors.com

给网站选字体https://fontjoy.com

制作LOGO looka.com

-2.设计主页Home页面

首页框架
采用AIDA原则, attention, interest, desire, action

使用hero(主图)+portflio(作品)+service(服务) or features(特点)+testimniol(客户评价)+call to action(行动)

在设计首页后, 尽快完成弹窗表单的设计, 因为后续每个页面都需要使用.
:怎么设置询盘表单并收询盘
利用elementor的templates功能, 设置询盘弹窗pop up模板. 在弹窗表单设置邮箱下面设置收件邮箱.
pop_up.jpg
设置好弹窗后, 在网页各处想点击弹窗的地方加入链接-动作-选中需要的弹窗. 这样点击对应位置时就能出现弹窗表单.
弹窗.jpg
为了方便后续google统计发送询盘的转化数量, 在发送询盘后设置一个跳转至thanks的页面.
打开表单编辑-内容-提交后的操作(添加跳转)-跳转设置连接
thanks.jpg

注意这里的跳转链接, 一定要和自己新建的Thanks页面的页面链接一致, 对于thanks页面的 制作也比较简单, 表达感谢, 告知会如何行动, 以及号召对方接下来做什么. 我在页脚, blog和这里都做了社媒集成. 因为后续网站推广的同时, 其它社媒也会广告推广. N+1 流量交织.

thanks调专业.jpg
-3.设计About页面


遵循求婚六问-你是谁-为什么非要从你这儿买-在你这买有什么好处-我怎么知道你不是个疯子-能来中国跟你喝啤酒吗-接下来干嘛呢.

技巧: 第一人称表述(亲近感), 团队核心成员介绍, 团队照片或出镜视频,最后call to action(告诉客户发送询盘或下载brochure或浏览产品等)
about_6问.jpg

-4.设计产品单页, 产品汇总页

八要素-产品图片(无背景图,实际使用图,带包装图)-描述(简介和参数)-视频(展示,安装,使用)-价格/服务-call to action-评价-消除不确定(隐私安全,售后保证,付款安全,运输方式等)-推荐

新手注意设计产品汇总模板后选择展示位置时同时选择所有产品的汇总页和不包含产品类别页, 否则当点击产品类别进行产品汇总时出现一样的结果.

产品单页和汇总页.jpg

-5.设计博客单页与汇总页

单页-3C2R排版

Content(内容排版)-是否大小标题, 重点突出, 图文,视频结合.
Call to action(引导客户行为)-下载PDF,跳转产品页, 联系或社交转发
Comment(评论功能)-利于seo(潜客留下评论互动) google考核engagement 参与度
Repost(转发功能)-文章传播,分享
Related articles(相关文章推荐)-延长客户停留时间
基于3C2R框架建立通用文章单页模板-使用elementor自带的文章通用模块功能(切勿手动输入)
从上至下的结构参考(文章标题-woocommerce面包屑导航-特色图像-文章信息-文章正文-作者信息-分享-文章导航-评论-其它文章)

前面的插件7 One use avator已经激活了, 就可以编辑wordpress后台右上角设计自己作为作者的头像.

汇总页-主要是设计汇总版式

切记文章汇总页代替页面中的Blog文章页, 不要在blog页面进行编辑. 直接在主题构建器编辑.

在设计文章页,汇总页板块的时候, 建议一并设置EDM订阅

订阅:如何用Elementor结合mailchimp或mailerlite给订阅客户邮件营销
在elementor的设置中找到integrations选项, 然后下拉找到mailchimp或mailerlite的API Key接口
API_EDM.jpg
然后登陆需要绑定的mailchimp或mailerlite等EDM账号, 在对应网站上找到设置的API, 将API key填入elementor对应的api位置, 并点击激活
mailchimp的apikey在profile-extras里
API_EDM_Mailchimp.jpg
激活成功后 去到放置相应订阅表单的位置, 修改左侧点击订阅后的动作为mailerlite, 即点击后邮件添加到mailerlite,
API_EDM_订阅.jpg

然后调整mailerlite的设置, 包括使用的API密钥,联系人添加到哪个Group表单里存储, 同时 选择填写的信息同步哪些. 默认只添加email对应即可. 同理可以对填写表单的用户设置,提交后的操作和这个一样, 收集. 方便后续edm营销

API_EDM_订阅群组.jpg

-6.设计Contact Us页面

GRE原则
Greetings-和用户说hi,同时方便用户和我们说hi-(手机/座机, 邮箱, skype/whatsapp, facebook/linkedin, 表单)
Reliable-真实地图, 真实地址, 真实外景.
Expectable-谁会收到我的邮件? (收件人,团队), 我的邮件发送成功了吗?(给提示, 跳转thanks页面, 邮件自动回复), 我何时得到回应?(工作时间,文字提示)

这里如果为了实现某些效果,但不知道用何插件或代码,可以借助AI询问实现某些效果的插件工具.

以上整个网站就大工告成啦, 难点其实是在于专业素材的选取和制作, 内容创作上全交给了AI. 同时新手可能会对elementor的容器编辑不太熟练, 多操作几次就ok啦, 打开结构显示, 拖拉式还是很方便的.


第六步.提升网站浏览体验, 方便SEO抓取和营销转化

-1.启用在线聊天窗口插件, 保持在线. 随时与访客对话或设计相关自动化接待话语.我用的是Tidio免费版.

Chaty或者 Mystickyelements | $49/年/1个网站 | 支持20多种聊天和社交网络平台,多种聊天视图,多人团队支持,高级定位功能,可定制的用户界面 | 多渠道接入需求的网站

Tidio | 免费版本(50次聊天/月)或 $29/月 | 结合AI和人工支持,实时聊天和帮助台,优化支持流程,只能连一个WhatsApp号码 | 适用于需要实时聊天支持和自动化客户互动流程的电商平台

Hubspot | 免费版本只能使用营销工具,$20/月 | 提供一个集成的CRM平台,涵盖从营销、销售到客户服务的全过程 | 需要全面的客户关系管理。寻求营销自动化和电子邮件营销解决方案。希望通过深入分析优化客户互动和营销策略的企业

JivoChat | $19/年/网站 + WhatsApp需要额外$25 | 多渠道整合,API开发支持,多种解决方案,聊天机器人集成,数据保护和控制 | 需要全面客户支持的网站

Click to Chat | 免费版本或者 $18/年/一个网站 | 预定义样式,灵活定位,自定义元素,短代码,Webhooks,多语言支持,分析工具 | 简单有效聊天解决方案的网站

-2.启用前面的插件9 Nitropack 加速  或者litespeed加速提升网站访问速度, 优化页面打开速度. 注意每次网站有什么改动优化完后, 记得点击清理缓存. 

切记一个网站只能有一个加速插件, 当启用一个后, 其它的都要禁用.
清理缓存.jpg

-3.启用前面的插件8 SEOPRESS, 按照操作生成网站地图提交google search console. 并开启相关SEO功能设置. 

完成以上步骤整站就正式可以上线啦, 回到本文第二步Wordpress后台设置, 将阅读设置里的勾去掉, 允许搜索引擎抓取. 

其它工具:
数据分析相关Google Analytics / Webtrends /
热力图工具: crazy egg/ Clicktale / Full story
录屏工具: Hotjar / inspectilt/ User replay
表单分析工具: Formisimo / decibel insight / Sessioncam
在线聊天工具: Tidio /zendesk chat / Olark
调查工具:  google consumer service / pollfish /survery monkey.
反馈工具: Mopinion / informizely / qualaroo

最后给大家看一下当时这个网站这样建出来后, google speed的结果,  99分, 速度秒开.

Google_speed.jpg
google_page2.jpg

第七步: SERP

收集整理了行业的adwrods相关词, 同时使用字母汤的方式A-Z收集了字母汤关键词表.

关键词.jpg

前期主要采取搜索意图文章进行覆盖, 在创作文章时我会告诉AI许多写文章的要求, 包括后面设计Ads广告标题和内容也是, 为了避免多次重复输入, 推荐大家一个方法, 使用搜狗输入法的高级设置-快捷短语功能, 比如我设置好后, 在打字输入状态q下面2345等选项就成了我设置好的快捷短语.

SOGOU.jpg

当我发给Monica写一篇文章或设计一张图的时候就可以很方便的下达指令. 

"XXXXX, 请根据以上潜在买家在google上的搜索词, 帮我写一篇尽量能详细覆盖客户搜索意图的网站blog, 同时设计一个符合搜索意图的标题. blog是发布在无人机模拟器公司网站srizfly.com上用来吸引潜在企业用户联系的, 请给英文结果"

可以看一下我用monica写出的搜素意图覆盖文章, 同理我会用Claude 3.5也设计类似的文章, 用Dalle-3 设计文章的特色图片和内容插图. 由于我的文章模板是含文章的导航列表的, 这样结合后一篇图文并茂的搜索意图覆盖文章就完成了. 

AI文章.jpg

目前也正在陆续这样覆盖相应的搜素词, 

由于这是一个新站, 设置10月16刚上线, google 抓取的数据量有限, 我查询了从10月16至目前11.1号的search console数据和google site收录如图, SERP的数据沉淀只能交给时间啦.

google页面收录.jpg
16号上线.jpg

后续ads和社媒流量跑起来后, 我会再更新. 衷心感谢颜Sir的教学分享.



举报
收藏
转发
0/500
添加表情
评论
评论 (5)
最近
最早
3天2夜学会建站
置顶时间 :

设置帖子类型

普通
新闻
活动
修改

圈内转发

0/104

分享至微信

复制链接

举报

请选择举报理由

留联系方式
垃圾广告
人身攻击
侵权抄袭
违法信息
举报

确认要删除自己的评论吗?

取消 确定

确认要删除自己的文章吗?

取消 确定
提问
设置提问积分
当前可用积分:
-
+
20
50
100
200
偷看

积分偷看

10积分
我的积分(可用积分)
确认偷看

问题已关注

答主回复后,系统将通知你

不再提示