20231017养网站防老第3步根据搜索意图使用ChatGPT的GPT4生成网页
文章目录
Keywords ROl Calculator
ImportSemrush Excel to GenerateKeywordsROl Table.
ImportSemrushExcel
*The contentuploaded isprocessed solelyonyour local device.
Export Excel
Keyword | Volume KD | CPC 优化回报率 |
phonenumbergenerator | 14800 20 1.07 | 791.80 |
randomphonenumbergenerator | 8100 28 1.04 | 300.86 |
养网站防老第3步:根据搜索意图使用ChatGPT的GPT4生成网页
原创 我是哥飞 哥飞
大家好,我是哥飞。网站养老系列哥飞已经更新了4篇了:
养网站防老:网站可以做成一生的事业养网站防老第1步,挖掘出第1个需求养网站防老第2步:分析搜索意图
养网站防老第1.5步:用一个公式来判断关键词是否值得做,让你选择关键词不再犹豫
本来昨天就要发第3步的,我们临时决定插入一篇文章,先教会大家怎么选择关键词。
基于昨天哥飞讲的公式,社群里@Kunsect 做了一个小工具,能够把大家从 Semrush 下载的关键词表格计算出“优化回报率”,并支持下载计算好的新表格。工具是在前端做的计算,所以大家不用担心自己正在调研的关键词被泄漏,同时工具还是开源的,大家可以自己部署使用。
工具网址:https://roi-calculator-flame.vercel.app/
开源代码:https://github.com/Kunsect/roi-calculator
今天我们回到第3步,讲讲如何根据分析出来的搜索意图去让GPT帮我们制作网页。
我们先在 Semrush 搜索“phone number generator”,得到所有相关关键词,点击导出按钮,得到关键词表格。
之后上传到 @Kunsect 制作的小工具里,得到了最值得做的一些关键词。
Keywords ROl Calculator
Import Semrush Excel to GenerateKeywords ROl Table
ImportSemrushExcel
*The content uploaded is processed solely on your local device.
Export Excel
Keyword Volume |
KD CPC |
phonenumbergenerator 14800 20 1.07 791.80 |
randomphonenumbergenerator 8100 28 1.04 300.86 |
fakephonenumbergenerator 1600 34 1.04 48.94 |
usphonenumbergeneratorwithsms 720 43 2.77 46.38 |
usphonenumbergenerator 1300 38 1.34 45.84 |
可以看到,最值得做的,还是主关键词“phone number generator”,我们昨天已经分析了这个关键词的搜索意图:
用户可能寻求一个工具或服务,用于生成电话号码。这可以是出于各种目的,例如随机生成测试数据或隐私保护。
我是哥飞,公众号:哥飞养网站防老第2步:分析搜索意图
我们网站也的确是围绕着关键词 “ phone number generator ”来做优化的,但是因为全球每个国家的电话号码格式都不一样,所以我们的电话号码生成需要能够兼容各个国家。
最直接想到的办法是给出一个下拉框让用户选择需要生成哪个国家的,但是全球这么多国家,从下拉列表里查找很不方便。
哥飞之前讲过,网页优化可以总结为六字真言“分门别类罗列”:
对此,哥飞总结了两点精髓:分门别类、罗列成语我是哥飞,公众号:哥飞分享一个谷歌和百度都优化得不错的网站
哥飞之前讲过,一般权重关系是主域名>子域名>子目录>内页,所以我们如果要优化一个关键词的话,最好的办法就是用这个关键词注册一个域名,然后用上哥飞总结的六字真言“分门别类罗列”来做站内优化。
我是哥飞,公众号:哥飞
保小图大:专门给给初学者的用小词图谋大词做站策略
所以对于 “ phone number generator ”网站,我们的首页也可以用这个方法,分门别类罗列全球各个国家。我们打开ChatGPT,把需求描述给GPT4:
10 | |||
13 | |||
14 15 | |||
16 | |||
17 | |||
你是一个SEO专家和前端开发专家,擅长使用html+css实现符合SEO要求的前端页面。
我现在要建立一个关于“phone number generator”的网站,
要求能够帮助全球各个国家的用户都生成电话号码,
每个国家的电话号码格式都不一样,
所以我会给每个国家制作一个页面,
如“us phone number generator”、“china phone number generator”等,
这就要求在首页把各个国家都列出来。
我的想法是先在网站顶部用h1写出“phone number generator”,
之后列出各个国家的名字,
之后生成很多的 h2 ,每一个 h2 就是一个国家的名字+phone number generator,
所以完整的 h2 举例是“us phone number generator”。
每一个h2下方会有一小段描述文字,用p标签,
描述文字下方是一个按钮,按钮文字为“us phone number generator”,不同的国家需要替换成不同的名字,点击按钮后打开新页面,不同的国家,新页面url不一样,
如美国则页面url为“us-phone-number-generator”,
现在,请帮我生成页面,要求符合SEO规范。
对于我没有提要求的地方,你可以按照你的理解去做。
GPT4的回答如下:
1234567好的,根据您的需求,我为您提供了一个基本的前端HTML代码模板。我会确保其符合SEO基本规范:使用语义化的HTML标签,如
10 | |
1 | |
3 4 | |
15 | |
16 | |
18 | |
192021223 45267 28 29 30 | |
3323 | |
35 | |
36
37
38
39
40
41
42
43
44
!DOCTYPE html>
Phone Number Generator
US Phone Number Generator
Generate valid US phone numbers with our tool. Suitable for various applications and tests.
China Phone Number Generator
Generate valid China phone numbers with our tool. Perfect for various applications and tests.
一些建议和注意事项:
确保为每个页面提供了描述性和唯一的
考虑为每个国家的页面提供更多的描述性内容或与之相关的信息,以丰富页面内容并提高其对搜索引擎的吸引力。
尝试使用schema.org的标记,这可以帮助搜索引擎更好地理解和展示您的网站内容。
考虑为页面添加一个sitemap.xml,以帮助搜索引擎抓取和索引所有页面。
希望这可以帮助您建立一个SEO友好的网站!
以上代码部分需要保存为文件 index.html。
请帮我生成styles.css,要求用简洁大气的配色
GPT4的回答:
/* Reset some default browser styles for consistency */
body, h1, h2, p, a, button {margin: 0;padding: 0;font-family: ‘Arial’, sans-serif; /* 使用常见的无衬线字体 */text-decoration: none;
}
body {background-color: #f4f4f8; $/{^*}$ 轻微的灰色背景 */color: #333; /* 主要文字颜色 */line-height: 1.5;padding: 20px;
}
header {text-align: center;margin-bottom: 50px;
}
h1 {font-size: 2em;margin-bottom: 20px;
}
main {max-width: 800px;margin: 0 auto; /* 居中主内容区域 */
}
section {background-color: #fff;padding: 20px;border-radius: 8px; /* 添加圆角 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */margin-bottom: 30px;
}
h2 {font-size: 1.5em;margin-bottom: 10px;
}
p {margin-bottom: 20px;
}
button {background-color: #2c89a0; /* 选中的宁静蓝色 */color: #fff; /* 按钮上的文字颜色 */border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;
}
button:hover {background-color: #247a8c; /* 按钮hover状态时的颜色 */
}
footer {margin-top: 50px;text-align: center;
}
以上代码需要保存为文件 styles.css 。基于以上GPT4生成的代码,哥飞创建了一个网站目录,把两个文件放进去:
/index.html
/styles.css
接着浏览器打开,看看效果,还是很不错的,第一次就达到了几乎可用的效果:
不过也有点不足,缺少了哥飞提的需求,在h1下方列出所有国家名字,所以我们再次提需求:
你漏掉了我的一个需求,在h1下方,需要设置一块区域,显示所有国家名字列表 |
GPT4的回答: |
对不起,我错过了这一点。以下是修改后的styles.css和index.html文件,添加了国家名单的部分。 |
styles.css(新加的部分在最下方): |
10 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 19 |
202122
/* …原先的CSS代码… */
/* Country list styles */
.country-list {display: flex;flex-wrap: wrap;gap: 10px;margin: 20px 0;justify-content: center; $1\ast$ 让国家列表居中 */
}
.country-list a {background-color: #e0e0e0; /* 轻微的灰色背景 */padding: 5px 15px;border-radius: 5px; /* 圆角 */color: #333;transition: background-color 0.3s;
}
.country-list a:hover {background-color: #d0d0d0; /* 鼠标悬停时的背景色 */
}
index.html(在
Phone Number Generator
US China
USPhone Number Generator
GeneratevalidUSphonenumberswithourtool.Suitableforvariousapplicationsandtests.
US Phone Number Generator
China Phone Number Generator
GeneratevalidChinaphonenumberswithourtool.Perfectforvariousapplicationsandtests
China Phone Number Generator
大概效果没问题了,接着需要让GPT4列出更多国家,并且生成相关代码。
我们继续提要求,限于篇幅原因,哥飞这里只让GPT4列出10个国家,实际使用时,你可以让AI列出100个国家。
目前你只列出来了2个国家,请按照互联网用户数量,列出10个国家,并生成相关代码
GPT4的回答:
好的,按照互联网用户数量,以下是10个国家的列表(截止到我的最后的训练数据,2022年1月):
中国 (China)
印度 (India)
美国 (United States/US)
印度尼西亚 (Indonesia)
巴西 (Brazil)
巴基斯坦 (Pakistan)
尼日利亚 (Nigeria)
孟加拉国 (Bangladesh)
俄罗斯 (Russia)
日本 (Japan)
以下是根据上述列表修改的index.html部分:12345678910111213141516171819