[{"data":1,"prerenderedAt":3238},["ShallowReactive",2],{"blog-\u002Fblog\u002Fwebsite\u002Fyidongduan-shipei":3,"blog-related-\u002Fblog\u002Fwebsite\u002Fyidongduan-shipei":1266},{"id":4,"title":5,"author":6,"body":7,"category":1237,"cover":1238,"date":1239,"description":1240,"draft":1241,"extension":1242,"faq":1243,"featured":1241,"image":1238,"keywords":1253,"meta":1257,"navigation":246,"path":1258,"seo":1259,"sitemap":1260,"stem":1261,"tags":1262,"updated":1239,"__hash__":1265},"blog\u002Fblog\u002Fwebsite\u002Fyidongduan-shipei.md","官网移动端适配要注意什么","HNREIS",{"type":8,"value":9,"toc":1176},"minimark",[10,19,23,28,41,45,56,60,68,72,80,83,87,98,102,156,164,168,366,370,425,442,446,457,461,465,529,535,539,550,554,565,569,601,605,616,620,634,637,641,652,656,667,671,682,686,697,701,751,755,759,770,773,784,787,791,802,806,817,821,832,836,844,847,851,859,863,871,875,883,887,895,899,907,911,919,923,931,935,940,944,952,956,964,967,971,982,986,1000,1004,1025,1029,1043,1046,1092,1095,1139,1142,1166,1172],[11,12,13,14,18],"p",{},"打开官网，手机上字小到要放大才能看、按钮点不到、图片加载半天——访客早就关了。",[15,16,17],"strong",{},"移动端流量已超过 PC，官网必须做好移动端适配，否则就是 50% 流量流失。"," 这篇文章讲清移动端适配要注意什么。",[20,21,22],"h2",{"id":22},"为什么移动端适配重要",[24,25,27],"h3",{"id":26},"_1-流量占比","1. 流量占比",[29,30,31,35,38],"ul",{},[32,33,34],"li",{},"全球移动端流量超过 55%。",[32,36,37],{},"中国移动端流量超过 70%。",[32,39,40],{},"部分行业（本地服务、电商）超过 80%。",[24,42,44],{"id":43},"_2-seo-影响","2. SEO 影响",[29,46,47,50,53],{},[32,48,49],{},"Google 用 mobile-first indexing（移动版索引）。",[32,51,52],{},"移动端体验差影响排名。",[32,54,55],{},"Core Web Vitals 用移动端数据。",[24,57,59],{"id":58},"_3-转化影响","3. 转化影响",[29,61,62,65],{},[32,63,64],{},"移动端转化率低于 PC（如果不优化）。",[32,66,67],{},"优化后移动端转化率可接近 PC。",[24,69,71],{"id":70},"_4-用户体验","4. 用户体验",[29,73,74,77],{},[32,75,76],{},"用户对移动端体验期望高。",[32,78,79],{},"体验差用户流失。",[20,81,82],{"id":82},"响应式设计",[24,84,86],{"id":85},"_1-什么是响应式","1. 什么是响应式",[29,88,89,92,95],{},[32,90,91],{},"同一套代码适配所有屏幕。",[32,93,94],{},"用 CSS media queries 调整布局。",[32,96,97],{},"不同设备看到合适的版本。",[24,99,101],{"id":100},"_2-viewport-设置","2. Viewport 设置",[103,104,109],"pre",{"className":105,"code":106,"language":107,"meta":108,"style":108},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \u002F>\n","html","",[110,111,112],"code",{"__ignoreMap":108},[113,114,117,121,125,129,132,135,139,141,144,146,148,151,153],"span",{"class":115,"line":116},"line",1,[113,118,120],{"class":119},"sMK4o","\u003C",[113,122,124],{"class":123},"swJcz","meta",[113,126,128],{"class":127},"spNyl"," name",[113,130,131],{"class":119},"=",[113,133,134],{"class":119},"\"",[113,136,138],{"class":137},"sfazB","viewport",[113,140,134],{"class":119},[113,142,143],{"class":127}," content",[113,145,131],{"class":119},[113,147,134],{"class":119},[113,149,150],{"class":137},"width=device-width, initial-scale=1",[113,152,134],{"class":119},[113,154,155],{"class":119}," \u002F>\n",[29,157,158,161],{},[32,159,160],{},"让浏览器知道是响应式。",[32,162,163],{},"设置视口宽度等于设备宽度。",[24,165,167],{"id":166},"_3-media-queries","3. Media Queries",[103,169,173],{"className":170,"code":171,"language":172,"meta":108,"style":108},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* 移动端 *\u002F\n@media (max-width: 768px) {\n  .container { padding: 16px; }\n}\n\n\u002F* 平板 *\u002F\n@media (min-width: 769px) and (max-width: 1024px) {\n  .container { padding: 24px; }\n}\n\n\u002F* PC *\u002F\n@media (min-width: 1025px) {\n  .container { padding: 32px; }\n}\n","css",[110,174,175,181,208,235,241,248,254,287,307,312,317,323,341,361],{"__ignoreMap":108},[113,176,177],{"class":115,"line":116},[113,178,180],{"class":179},"sHwdD","\u002F* 移动端 *\u002F\n",[113,182,184,188,191,195,198,202,205],{"class":115,"line":183},2,[113,185,187],{"class":186},"s7zQu","@media",[113,189,190],{"class":119}," (",[113,192,194],{"class":193},"sBMFI","max-width",[113,196,197],{"class":119},":",[113,199,201],{"class":200},"sbssI"," 768px",[113,203,204],{"class":119},")",[113,206,207],{"class":119}," {\n",[113,209,211,214,217,220,224,226,229,232],{"class":115,"line":210},3,[113,212,213],{"class":119},"  .",[113,215,216],{"class":193},"container",[113,218,219],{"class":119}," {",[113,221,223],{"class":222},"sqsOY"," padding",[113,225,197],{"class":119},[113,227,228],{"class":200}," 16px",[113,230,231],{"class":119},";",[113,233,234],{"class":119}," }\n",[113,236,238],{"class":115,"line":237},4,[113,239,240],{"class":119},"}\n",[113,242,244],{"class":115,"line":243},5,[113,245,247],{"emptyLinePlaceholder":246},true,"\n",[113,249,251],{"class":115,"line":250},6,[113,252,253],{"class":179},"\u002F* 平板 *\u002F\n",[113,255,257,259,261,264,266,269,271,274,276,278,280,283,285],{"class":115,"line":256},7,[113,258,187],{"class":186},[113,260,190],{"class":119},[113,262,263],{"class":193},"min-width",[113,265,197],{"class":119},[113,267,268],{"class":200}," 769px",[113,270,204],{"class":119},[113,272,273],{"class":119}," and",[113,275,190],{"class":119},[113,277,194],{"class":193},[113,279,197],{"class":119},[113,281,282],{"class":200}," 1024px",[113,284,204],{"class":119},[113,286,207],{"class":119},[113,288,290,292,294,296,298,300,303,305],{"class":115,"line":289},8,[113,291,213],{"class":119},[113,293,216],{"class":193},[113,295,219],{"class":119},[113,297,223],{"class":222},[113,299,197],{"class":119},[113,301,302],{"class":200}," 24px",[113,304,231],{"class":119},[113,306,234],{"class":119},[113,308,310],{"class":115,"line":309},9,[113,311,240],{"class":119},[113,313,315],{"class":115,"line":314},10,[113,316,247],{"emptyLinePlaceholder":246},[113,318,320],{"class":115,"line":319},11,[113,321,322],{"class":179},"\u002F* PC *\u002F\n",[113,324,326,328,330,332,334,337,339],{"class":115,"line":325},12,[113,327,187],{"class":186},[113,329,190],{"class":119},[113,331,263],{"class":193},[113,333,197],{"class":119},[113,335,336],{"class":200}," 1025px",[113,338,204],{"class":119},[113,340,207],{"class":119},[113,342,344,346,348,350,352,354,357,359],{"class":115,"line":343},13,[113,345,213],{"class":119},[113,347,216],{"class":193},[113,349,219],{"class":119},[113,351,223],{"class":222},[113,353,197],{"class":119},[113,355,356],{"class":200}," 32px",[113,358,231],{"class":119},[113,360,234],{"class":119},[113,362,364],{"class":115,"line":363},14,[113,365,240],{"class":119},[24,367,369],{"id":368},"_4-现代方案tailwind-css","4. 现代方案：Tailwind CSS",[103,371,373],{"className":170,"code":372,"language":172,"meta":108,"style":108},"\u002F* Tailwind 默认 mobile-first *\u002F\n\u003Cdiv class=\"p-4 md:p-6 lg:p-8\">\n  内容\n\u003C\u002Fdiv>\n",[110,374,375,380,411,416],{"__ignoreMap":108},[113,376,377],{"class":115,"line":116},[113,378,379],{"class":179},"\u002F* Tailwind 默认 mobile-first *\u002F\n",[113,381,382,385,388,391,394,397,400,403,406,408],{"class":115,"line":183},[113,383,120],{"class":384},"sTEyZ",[113,386,387],{"class":193},"div",[113,389,390],{"class":384}," class=\"",[113,392,393],{"class":193},"p-4",[113,395,396],{"class":384}," md:",[113,398,399],{"class":193},"p-6",[113,401,402],{"class":384}," lg:",[113,404,405],{"class":193},"p-8",[113,407,134],{"class":384},[113,409,410],{"class":119},">\n",[113,412,413],{"class":115,"line":210},[113,414,415],{"class":384},"  内容\n",[113,417,418,421,423],{"class":115,"line":237},[113,419,420],{"class":384},"\u003C\u002F",[113,422,387],{"class":193},[113,424,410],{"class":119},[29,426,427,430,436],{},[32,428,429],{},"默认是移动端样式。",[32,431,432,435],{},[110,433,434],{},"md:"," 是平板及以上。",[32,437,438,441],{},[110,439,440],{},"lg:"," 是 PC 及以上。",[24,443,445],{"id":444},"_5-flexgrid-布局","5. Flex\u002FGrid 布局",[29,447,448,451,454],{},[32,449,450],{},"Flexbox 适合一维布局（行或列）。",[32,452,453],{},"CSS Grid 适合二维布局。",[32,455,456],{},"响应式调整方向。",[20,458,460],{"id":459},"移动端-ux-要点","移动端 UX 要点",[24,462,464],{"id":463},"_1-字体大小","1. 字体大小",[466,467,468,484],"table",{},[469,470,471],"thead",{},[472,473,474,478,481],"tr",{},[475,476,477],"th",{},"元素",[475,479,480],{},"移动端",[475,482,483],{},"PC",[485,486,487,498,509,520],"tbody",{},[472,488,489,493,496],{},[490,491,492],"td",{},"正文",[490,494,495],{},"16 到 18px",[490,497,495],{},[472,499,500,503,506],{},[490,501,502],{},"标题 H1",[490,504,505],{},"24 到 28px",[490,507,508],{},"32 到 48px",[472,510,511,514,517],{},[490,512,513],{},"标题 H2",[490,515,516],{},"20 到 24px",[490,518,519],{},"24 到 32px",[472,521,522,525,527],{},[490,523,524],{},"按钮",[490,526,495],{},[490,528,495],{},[11,530,531,534],{},[15,532,533],{},"正文不要小于 16px","（小于 16px 在 iOS Safari 会自动放大）。",[24,536,538],{"id":537},"_2-触摸目标","2. 触摸目标",[29,540,541,544,547],{},[32,542,543],{},"按钮最小 44x44px（Apple 推荐）。",[32,545,546],{},"链接、图标按钮也要大。",[32,548,549],{},"间距足够（避免误触）。",[24,551,553],{"id":552},"_3-简化导航","3. 简化导航",[29,555,556,559,562],{},[32,557,558],{},"汉堡菜单（隐藏次要导航）。",[32,560,561],{},"底部导航栏（移动端常用）。",[32,563,564],{},"重要页面快速访问。",[24,566,568],{"id":567},"_4-表单优化","4. 表单优化",[29,570,571,595,598],{},[32,572,573,574],{},"输入框触发正确键盘：\n",[29,575,576,583,589],{},[32,577,578,579,582],{},"手机号：",[110,580,581],{},"inputmode=\"tel\"","。",[32,584,585,586,582],{},"邮箱：",[110,587,588],{},"inputmode=\"email\"",[32,590,591,592,582],{},"数字：",[110,593,594],{},"inputmode=\"numeric\"",[32,596,597],{},"字段大、易点。",[32,599,600],{},"减少输入（用下拉、单选）。",[24,602,604],{"id":603},"_5-内容简化","5. 内容简化",[29,606,607,610,613],{},[32,608,609],{},"移动端精简内容（不是隐藏核心）。",[32,611,612],{},"段落短。",[32,614,615],{},"用列表、表格清晰呈现。",[24,617,619],{"id":618},"_6-弹窗和广告","6. 弹窗和广告",[29,621,622,625,628,631],{},[32,623,624],{},"不挡全屏。",[32,626,627],{},"可关闭。",[32,629,630],{},"不频繁弹。",[32,632,633],{},"Google 惩罚侵入式弹窗。",[20,635,636],{"id":636},"移动端性能",[24,638,640],{"id":639},"_1-图片优化","1. 图片优化",[29,642,643,646,649],{},[32,644,645],{},"移动端加载小图（响应式 srcset）。",[32,647,648],{},"WebP\u002FAVIF 格式。",[32,650,651],{},"懒加载。",[24,653,655],{"id":654},"_2-减少-js","2. 减少 JS",[29,657,658,661,664],{},[32,659,660],{},"移动端 CPU 弱。",[32,662,663],{},"减少第三方脚本。",[32,665,666],{},"代码分割。",[24,668,670],{"id":669},"_3-字体优化","3. 字体优化",[29,672,673,676,679],{},[32,674,675],{},"字体子集（只加载用到的字符）。",[32,677,678],{},"font-display: swap。",[32,680,681],{},"系统字体作为备选。",[24,683,685],{"id":684},"_4-网络优化","4. 网络优化",[29,687,688,691,694],{},[32,689,690],{},"移动网络慢。",[32,692,693],{},"减少请求。",[32,695,696],{},"启用压缩（Brotli、Gzip）。",[24,698,700],{"id":699},"_5-预加载关键资源","5. 预加载关键资源",[103,702,704],{"className":105,"code":703,"language":107,"meta":108,"style":108},"\u003Clink rel=\"preload\" href=\"hero.webp\" as=\"image\" \u002F>\n",[110,705,706],{"__ignoreMap":108},[113,707,708,710,713,716,718,720,723,725,728,730,732,735,737,740,742,744,747,749],{"class":115,"line":116},[113,709,120],{"class":119},[113,711,712],{"class":123},"link",[113,714,715],{"class":127}," rel",[113,717,131],{"class":119},[113,719,134],{"class":119},[113,721,722],{"class":137},"preload",[113,724,134],{"class":119},[113,726,727],{"class":127}," href",[113,729,131],{"class":119},[113,731,134],{"class":119},[113,733,734],{"class":137},"hero.webp",[113,736,134],{"class":119},[113,738,739],{"class":127}," as",[113,741,131],{"class":119},[113,743,134],{"class":119},[113,745,746],{"class":137},"image",[113,748,134],{"class":119},[113,750,155],{"class":119},[20,752,754],{"id":753},"mobile-first-indexing","Mobile-First Indexing",[24,756,758],{"id":757},"google-用移动版索引","Google 用移动版索引",[29,760,761,764,767],{},[32,762,763],{},"即使 PC 版有内容，移动版没有也不算。",[32,765,766],{},"移动版和 PC 版内容要一致。",[32,768,769],{},"移动版要可抓取（不要用 robots 屏蔽）。",[24,771,772],{"id":772},"注意事项",[29,774,775,778,781],{},[32,776,777],{},"不要在移动端隐藏重要内容。",[32,779,780],{},"移动端的结构化数据要完整。",[32,782,783],{},"移动端的内链要合理。",[20,785,786],{"id":786},"移动端测试",[24,788,790],{"id":789},"_1-浏览器开发者工具","1. 浏览器开发者工具",[29,792,793,796,799],{},[32,794,795],{},"Chrome DevTools 设备模拟。",[32,797,798],{},"模拟不同设备、网络。",[32,800,801],{},"不完全准确（要看真机）。",[24,803,805],{"id":804},"_2-真机测试","2. 真机测试",[29,807,808,811,814],{},[32,809,810],{},"iOS Safari、Android Chrome。",[32,812,813],{},"不同尺寸（小屏、大屏）。",[32,815,816],{},"不同网络（WiFi、4G、3G）。",[24,818,820],{"id":819},"_3-在线工具","3. 在线工具",[29,822,823,826,829],{},[32,824,825],{},"Google Mobile-Friendly Test。",[32,827,828],{},"PageSpeed Insights 移动端测试。",[32,830,831],{},"BrowserStack（真机云测试）。",[24,833,835],{"id":834},"_4-实验室数据-vs-真实用户","4. 实验室数据 vs 真实用户",[29,837,838,841],{},[32,839,840],{},"实验室：Lighthouse、PageSpeed Insights。",[32,842,843],{},"真实用户：CrUX、自建 RUM。",[20,845,846],{"id":846},"常见移动端错误",[24,848,850],{"id":849},"_1-字体太小","1. 字体太小",[29,852,853,856],{},[32,854,855],{},"用户要放大才能看。",[32,857,858],{},"用 ≥16px 字体。",[24,860,862],{"id":861},"_2-按钮太小","2. 按钮太小",[29,864,865,868],{},[32,866,867],{},"点不准、误触。",[32,869,870],{},"用 ≥44px 按钮。",[24,872,874],{"id":873},"_3-内容溢出","3. 内容溢出",[29,876,877,880],{},[32,878,879],{},"横向滚动条。",[32,881,882],{},"元素固定宽度（用响应式）。",[24,884,886],{"id":885},"_4-弹窗挡全屏","4. 弹窗挡全屏",[29,888,889,892],{},[32,890,891],{},"用户找不到关闭按钮。",[32,893,894],{},"测试关闭按钮可见、可点。",[24,896,898],{"id":897},"_5-表单字段错误","5. 表单字段错误",[29,900,901,904],{},[32,902,903],{},"手机号字段没触发数字键盘。",[32,905,906],{},"用 inputmode 属性。",[24,908,910],{"id":909},"_6-图片太大","6. 图片太大",[29,912,913,916],{},[32,914,915],{},"移动网络加载慢。",[32,917,918],{},"用响应式图片。",[24,920,922],{"id":921},"_7-flash-动画","7. Flash 动画",[29,924,925,928],{},[32,926,927],{},"移动端不支持 Flash。",[32,929,930],{},"用 HTML5、CSS 动画。",[24,932,934],{"id":933},"_8-重定向到-mexamplecom","8. 重定向到 m.example.com",[29,936,937],{},[32,938,939],{},"现代 99% 用响应式，不用独立移动站。",[24,941,943],{"id":942},"_9-横向滚动","9. 横向滚动",[29,945,946,949],{},[32,947,948],{},"元素宽度超过屏幕。",[32,950,951],{},"检查固定宽度。",[24,953,955],{"id":954},"_10-字体加载闪烁","10. 字体加载闪烁",[29,957,958,961],{},[32,959,960],{},"字体未加载显示默认字体。",[32,962,963],{},"用 font-display: swap。",[20,965,966],{"id":966},"移动端设计的特殊考虑",[24,968,970],{"id":969},"_1-触摸-vs-鼠标","1. 触摸 vs 鼠标",[29,972,973,976,979],{},[32,974,975],{},"触摸精度低（按钮要大）。",[32,977,978],{},"没有 hover（不要依赖 hover 交互）。",[32,980,981],{},"滑动手势（左右滑、下拉刷新）。",[24,983,985],{"id":984},"_2-设备特性","2. 设备特性",[29,987,988,991,994,997],{},[32,989,990],{},"摄像头（扫码、AR）。",[32,992,993],{},"GPS（定位）。",[32,995,996],{},"陀螺仪（重力感应）。",[32,998,999],{},"震动反馈。",[24,1001,1003],{"id":1002},"_3-应用集成","3. 应用集成",[29,1005,1006,1009,1016,1022],{},[32,1007,1008],{},"微信、支付宝分享。",[32,1010,1011,1012,1015],{},"拨打电话（",[110,1013,1014],{},"tel:","）。",[32,1017,1018,1019,1015],{},"发送短信（",[110,1020,1021],{},"sms:",[32,1023,1024],{},"地图导航。",[24,1026,1028],{"id":1027},"_4-pwa","4. PWA",[29,1030,1031,1034,1037,1040],{},[32,1032,1033],{},"添加到主屏幕。",[32,1035,1036],{},"离线访问。",[32,1038,1039],{},"推送通知。",[32,1041,1042],{},"类 App 体验。",[20,1044,1045],{"id":1045},"成本参考",[466,1047,1048,1058],{},[469,1049,1050],{},[472,1051,1052,1055],{},[475,1053,1054],{},"移动端优化范围",[475,1056,1057],{},"成本",[485,1059,1060,1068,1076,1084],{},[472,1061,1062,1065],{},[490,1063,1064],{},"响应式调整（小问题修复）",[490,1066,1067],{},"几千",[472,1069,1070,1073],{},[490,1071,1072],{},"完整响应式重构",[490,1074,1075],{},"1 万到 3 万",[472,1077,1078,1081],{},[490,1079,1080],{},"含 PWA、设备特性",[490,1082,1083],{},"3 万到 5 万",[472,1085,1086,1089],{},[490,1087,1088],{},"移动端持续优化",[490,1090,1091],{},"几千到几万\u002F月",[20,1093,1094],{"id":1094},"常见误区",[29,1096,1097,1103,1109,1115,1121,1127,1133],{},[32,1098,1099,1102],{},[15,1100,1101],{},"\"PC 端做好就行\"","：移动端流量大。",[32,1104,1105,1108],{},[15,1106,1107],{},"\"用 Chrome 模拟测试够了\"","：要看真机。",[32,1110,1111,1114],{},[15,1112,1113],{},"\"响应式就是缩放\"","：要重新设计布局。",[32,1116,1117,1120],{},[15,1118,1119],{},"\"隐藏移动端内容\"","：影响 SEO。",[32,1122,1123,1126],{},[15,1124,1125],{},"\"字体小点能放更多内容\"","：用户看不清。",[32,1128,1129,1132],{},[15,1130,1131],{},"\"按钮小点精致\"","：点不到。",[32,1134,1135,1138],{},[15,1136,1137],{},"\"弹窗全屏吸引注意\"","：用户反感。",[20,1140,1141],{"id":1141},"怎么开始",[1143,1144,1145,1148,1151,1154,1157,1160,1163],"ol",{},[32,1146,1147],{},"用 PageSpeed Insights 测试移动端。",[32,1149,1150],{},"用真机测试（iOS、Android）。",[32,1152,1153],{},"列出移动端问题清单。",[32,1155,1156],{},"优化字体、按钮、表单、图片。",[32,1158,1159],{},"简化导航和内容。",[32,1161,1162],{},"修复性能问题。",[32,1164,1165],{},"持续监控移动端体验。",[1167,1168,1169],"blockquote",{},[11,1170,1171],{},"广州市汉诺雷斯（HNREIS）做企业官网默认用响应式设计、移动端优化（Tailwind mobile-first、字体按钮适配、性能优化）。把你的官网移动端情况告诉我们，我们给出移动端优化方案。",[1173,1174,1175],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":108,"searchDepth":183,"depth":183,"links":1177},[1178,1184,1191,1199,1206,1210,1216,1228,1234,1235,1236],{"id":22,"depth":183,"text":22,"children":1179},[1180,1181,1182,1183],{"id":26,"depth":210,"text":27},{"id":43,"depth":210,"text":44},{"id":58,"depth":210,"text":59},{"id":70,"depth":210,"text":71},{"id":82,"depth":183,"text":82,"children":1185},[1186,1187,1188,1189,1190],{"id":85,"depth":210,"text":86},{"id":100,"depth":210,"text":101},{"id":166,"depth":210,"text":167},{"id":368,"depth":210,"text":369},{"id":444,"depth":210,"text":445},{"id":459,"depth":183,"text":460,"children":1192},[1193,1194,1195,1196,1197,1198],{"id":463,"depth":210,"text":464},{"id":537,"depth":210,"text":538},{"id":552,"depth":210,"text":553},{"id":567,"depth":210,"text":568},{"id":603,"depth":210,"text":604},{"id":618,"depth":210,"text":619},{"id":636,"depth":183,"text":636,"children":1200},[1201,1202,1203,1204,1205],{"id":639,"depth":210,"text":640},{"id":654,"depth":210,"text":655},{"id":669,"depth":210,"text":670},{"id":684,"depth":210,"text":685},{"id":699,"depth":210,"text":700},{"id":753,"depth":183,"text":754,"children":1207},[1208,1209],{"id":757,"depth":210,"text":758},{"id":772,"depth":210,"text":772},{"id":786,"depth":183,"text":786,"children":1211},[1212,1213,1214,1215],{"id":789,"depth":210,"text":790},{"id":804,"depth":210,"text":805},{"id":819,"depth":210,"text":820},{"id":834,"depth":210,"text":835},{"id":846,"depth":183,"text":846,"children":1217},[1218,1219,1220,1221,1222,1223,1224,1225,1226,1227],{"id":849,"depth":210,"text":850},{"id":861,"depth":210,"text":862},{"id":873,"depth":210,"text":874},{"id":885,"depth":210,"text":886},{"id":897,"depth":210,"text":898},{"id":909,"depth":210,"text":910},{"id":921,"depth":210,"text":922},{"id":933,"depth":210,"text":934},{"id":942,"depth":210,"text":943},{"id":954,"depth":210,"text":955},{"id":966,"depth":183,"text":966,"children":1229},[1230,1231,1232,1233],{"id":969,"depth":210,"text":970},{"id":984,"depth":210,"text":985},{"id":1002,"depth":210,"text":1003},{"id":1027,"depth":210,"text":1028},{"id":1045,"depth":183,"text":1045},{"id":1094,"depth":183,"text":1094},{"id":1141,"depth":183,"text":1141},"website",null,"2026-01-13","移动端流量已超过 PC，官网必须做好移动端适配。本文讲清响应式设计要点、移动端 UX、性能优化和常见错误。",false,"md",[1244,1247,1250],{"q":1245,"a":1246},"移动端适配和响应式设计是一回事吗？","不完全。响应式设计是一种实现方式（同一套代码适配所有屏幕），移动端适配是目标（让移动端体验好）。除了响应式，还有动态适配（服务器根据设备返回不同 HTML）、独立移动站（m.example.com）。现代官网 99% 用响应式设计，因为维护成本低、SEO 友好。Google 也是 mobile-first indexing，响应式最稳。",{"q":1248,"a":1249},"移动端适配最容易忽视什么？","五点：一是字体太小（移动端要 ≥16px）；二是按钮太小（≥44px 易点）；三是表单字段触发错误键盘（手机号要数字键盘、邮箱要邮箱键盘）；四是图片太大（移动网络慢）；五是弹窗挡住整个屏幕（用户体验差）。建议用真实手机测试，不是只看 Chrome DevTools 模拟。",{"q":1251,"a":1252},"移动端和 PC 端内容要不要一样？","内容主体要一样（Google mobile-first indexing 用移动版索引），但呈现可以差异化：移动端简化导航（汉堡菜单）、隐藏次要内容、调整顺序（重要内容上移）。原则：用户在任何设备都能获取核心信息，但移动端体验更精简。注意：不要在移动端隐藏重要内容（会被搜索引擎和用户都看不到）。",[1254,82,1255,1256],"官网移动端适配","移动端UX","手机网站优化",{},"\u002Fblog\u002Fwebsite\u002Fyidongduan-shipei",{"title":5,"description":1240},{"loc":1258},"blog\u002Fwebsite\u002Fyidongduan-shipei",[480,1263,1264],"响应式","UX","1KLftLniPWagCpL7Me9N9dNV4kcDfZfiahfjJGZYyP0",[1267,1773,2205,2655],{"id":1268,"title":1269,"author":6,"body":1270,"category":1237,"cover":1238,"date":1746,"description":1747,"draft":1241,"extension":1242,"faq":1748,"featured":1241,"image":1238,"keywords":1758,"meta":1763,"navigation":246,"path":1764,"seo":1765,"sitemap":1766,"stem":1767,"tags":1768,"updated":1746,"__hash__":1772},"blog\u002Fblog\u002Fwebsite\u002Fab-ceshi-luodiye.md","落地页AB测试怎么做",{"type":8,"value":1271,"toc":1728},[1272,1279,1283,1286,1289,1315,1319,1330,1333,1340,1439,1445,1449,1453,1456,1467,1473,1477,1480,1484,1487,1491,1494,1498,1501,1512,1516,1591,1597,1599,1661,1663,1701,1703,1723],[11,1273,1274,1275,1278],{},"很多企业的落地页改了一版又一版，转化率却始终上不去——根本问题在于改页面凭感觉，没有数据支撑。",[15,1276,1277],{},"落地页优化必须用 AB 测试来验证假设，否则任何改动都是在赌。"," 这篇文章讲清楚落地页 AB 测试的完整流程、可测试元素、工具选择以及常见的坑。",[20,1280,1282],{"id":1281},"什么是落地页-ab-测试","什么是落地页 AB 测试",[11,1284,1285],{},"AB 测试（A\u002FB testing）的核心是把访问者随机分成两组：A 组看到原版本（对照组），B 组看到修改版本（实验组），其他条件相同，按转化数据判断哪个版本更优。",[24,1287,1288],{"id":1288},"关键概念",[29,1290,1291,1297,1303,1309],{},[32,1292,1293,1296],{},[15,1294,1295],{},"对照组（Control）","：当前上线的原版本，作为基准。",[32,1298,1299,1302],{},[15,1300,1301],{},"实验组（Variant）","：做了修改的新版本。",[32,1304,1305,1308],{},[15,1306,1307],{},"核心指标（KPI）","：通常是表单提交率、咨询点击率、购买转化率。",[32,1310,1311,1314],{},[15,1312,1313],{},"统计显著","：差异不是偶然产生，通常要求置信度达到 95% 以上。",[24,1316,1318],{"id":1317},"ab-测试能解决什么问题","AB 测试能解决什么问题",[29,1320,1321,1324,1327],{},[32,1322,1323],{},"不知道改了会不会更好——用数据说话。",[32,1325,1326],{},"团队对某个设计有分歧——让真实用户投票。",[32,1328,1329],{},"怕改动带来风险——只对部分流量实验。",[20,1331,1332],{"id":1332},"落地页可测试的元素",[11,1334,1335,1336,1339],{},"不是所有元素都值得测。优先测",[15,1337,1338],{},"对转化影响大","的元素：",[466,1341,1342,1355],{},[469,1343,1344],{},[472,1345,1346,1349,1352],{},[475,1347,1348],{},"测试元素",[475,1350,1351],{},"示例假设",[475,1353,1354],{},"影响级别",[485,1356,1357,1368,1378,1388,1398,1409,1419,1429],{},[472,1358,1359,1362,1365],{},[490,1360,1361],{},"主标题文案",[490,1363,1364],{},"强调利益点 vs 强调功能",[490,1366,1367],{},"高",[472,1369,1370,1373,1376],{},[490,1371,1372],{},"CTA 按钮文案",[490,1374,1375],{},"立即咨询 vs 免费获取报价",[490,1377,1367],{},[472,1379,1380,1383,1386],{},[490,1381,1382],{},"头图样式",[490,1384,1385],{},"产品实景 vs 客户场景",[490,1387,1367],{},[472,1389,1390,1393,1396],{},[490,1391,1392],{},"表单字段数",[490,1394,1395],{},"5 个字段 vs 3 个字段",[490,1397,1367],{},[472,1399,1400,1403,1406],{},[490,1401,1402],{},"信任元素位置",[490,1404,1405],{},"顶部 vs 表单旁",[490,1407,1408],{},"中",[472,1410,1411,1414,1417],{},[490,1412,1413],{},"颜色搭配",[490,1415,1416],{},"暖色 vs 冷色",[490,1418,1408],{},[472,1420,1421,1424,1427],{},[490,1422,1423],{},"价格展示",[490,1425,1426],{},"直接显示 vs 询盘后告知",[490,1428,1408],{},[472,1430,1431,1434,1437],{},[490,1432,1433],{},"页面长度",[490,1435,1436],{},"长页 vs 短页",[490,1438,1408],{},[11,1440,1441,1444],{},[15,1442,1443],{},"原则","：一次只改一个变量。同时改多个变量，无法判断是哪个改动带来的效果。",[20,1446,1448],{"id":1447},"ab-测试的完整流程","AB 测试的完整流程",[24,1450,1452],{"id":1451},"第-1-步明确目标和假设","第 1 步：明确目标和假设",[11,1454,1455],{},"不要为了测试而测试。先问自己：",[29,1457,1458,1461,1464],{},[32,1459,1460],{},"业务目标是什么？（询盘量？注册量？购买？）",[32,1462,1463],{},"当前转化率是多少？",[32,1465,1466],{},"假设改动能提升多少？",[11,1468,1469,1472],{},[15,1470,1471],{},"写清假设","：把\"询盘按钮改成橙色，预计点击率提升 10%\"，而不是\"换个颜色试试\"。",[24,1474,1476],{"id":1475},"第-2-步准备实验版本","第 2 步：准备实验版本",[11,1478,1479],{},"按假设修改页面，只改一个关键变量。准备 B 版本的页面。",[24,1481,1483],{"id":1482},"第-3-步配置工具与分流","第 3 步：配置工具与分流",[11,1485,1486],{},"选择测试工具（见下文），配置流量分流（通常 50\u002F50），设置转化事件追踪。",[24,1488,1490],{"id":1489},"第-4-步运行实验并监控","第 4 步：运行实验并监控",[11,1492,1493],{},"测试期间不要中途改、不要提前结束。监控数据是否正常采集。",[24,1495,1497],{"id":1496},"第-5-步分析与决策","第 5 步：分析与决策",[11,1499,1500],{},"看核心指标的统计显著性：",[29,1502,1503,1506,1509],{},[32,1504,1505],{},"实验组显著优于对照组 → 上线 B 版本。",[32,1507,1508],{},"实验组显著差于对照组 → 保留 A 版本。",[32,1510,1511],{},"无显著差异 → 测试假设不成立，保留 A，换下一个假设。",[20,1513,1515],{"id":1514},"ab-测试工具怎么选","AB 测试工具怎么选",[466,1517,1518,1533],{},[469,1519,1520],{},[472,1521,1522,1525,1528,1531],{},[475,1523,1524],{},"工具类型",[475,1526,1527],{},"代表",[475,1529,1530],{},"适合场景",[475,1532,1057],{},[485,1534,1535,1549,1563,1577],{},[472,1536,1537,1540,1543,1546],{},[490,1538,1539],{},"网站 AB 测试 SaaS",[490,1541,1542],{},"Optimizely、VWO、Convert",[490,1544,1545],{},"标准网页测试",[490,1547,1548],{},"中高（按流量计费）",[472,1550,1551,1554,1557,1560],{},[490,1552,1553],{},"数据分析平台扩展",[490,1555,1556],{},"Google Optimize（已停用）\u002F GA4 实验",[490,1558,1559],{},"与 GA 数据打通",[490,1561,1562],{},"低",[472,1564,1565,1568,1571,1574],{},[490,1566,1567],{},"自研分流方案",[490,1569,1570],{},"服务端或前端分流",[490,1572,1573],{},"流量大、定制需求",[490,1575,1576],{},"开发成本",[472,1578,1579,1582,1585,1588],{},[490,1580,1581],{},"广告平台原生",[490,1583,1584],{},"百度落地页、Google Ads 落地页测试",[490,1586,1587],{},"配合广告投放",[490,1589,1590],{},"免费",[11,1592,1593,1596],{},[15,1594,1595],{},"选型要点","：流量小的网站用免费或低成本方案；流量大的需要专业工具保证分流准确和数据可靠。",[20,1598,1045],{"id":1045},[466,1600,1601,1617],{},[469,1602,1603],{},[472,1604,1605,1608,1611,1614],{},[475,1606,1607],{},"测试类型",[475,1609,1610],{},"工具成本",[475,1612,1613],{},"人力成本",[475,1615,1616],{},"适合阶段",[485,1618,1619,1633,1647],{},[472,1620,1621,1624,1627,1630],{},[490,1622,1623],{},"自研分流",[490,1625,1626],{},"工具免费",[490,1628,1629],{},"开发 1-3 天",[490,1631,1632],{},"流量稳定、有技术团队",[472,1634,1635,1638,1641,1644],{},[490,1636,1637],{},"中端 SaaS",[490,1639,1640],{},"每月几百到上千元",[490,1642,1643],{},"配置 + 监控",[490,1645,1646],{},"中小流量官网",[472,1648,1649,1652,1655,1658],{},[490,1650,1651],{},"企业级平台",[490,1653,1654],{},"按流量报价，通常较高",[490,1656,1657],{},"配合数据分析团队",[490,1659,1660],{},"大流量电商\u002F营销站",[20,1662,1094],{"id":1094},[29,1664,1665,1671,1677,1683,1689,1695],{},[32,1666,1667,1670],{},[15,1668,1669],{},"流量太小就硬测","：样本不足，结论不可信。先做流量、再做测试。",[32,1672,1673,1676],{},[15,1674,1675],{},"一次改多个变量","：无法归因，白费功夫。",[32,1678,1679,1682],{},[15,1680,1681],{},"提前结束测试","：看到数据好看就停止，结果上线后效果消失。",[32,1684,1685,1688],{},[15,1686,1687],{},"只看点击率不看转化率","：点击高不等于转化高。",[32,1690,1691,1694],{},[15,1692,1693],{},"测试结果不复用","：每次都从零开始，没积累实验知识库。",[32,1696,1697,1700],{},[15,1698,1699],{},"迷信\"最佳实践\"","：行业惯例不等于你的页面最佳，要自己测。",[20,1702,1141],{"id":1141},[1143,1704,1705,1708,1711,1714,1717,1720],{},[32,1706,1707],{},"接入数据统计（百度统计、GA4），明确当前转化率。",[32,1709,1710],{},"找出转化漏斗中流失最严重的环节。",[32,1712,1713],{},"写一个清晰的实验假设（变量 + 预期提升）。",[32,1715,1716],{},"准备 B 版本，配置测试工具与分流。",[32,1718,1719],{},"运行足够时间（至少 7-14 天）和样本。",[32,1721,1722],{},"按统计显著性决策，记录实验结果。",[1167,1724,1725],{},[11,1726,1727],{},"广州市汉诺雷斯（HNREIS）做营销型官网会内置转化追踪和分流能力，支持落地页 AB 测试与持续优化。把你的转化目标和流量情况告诉我们，我们给出可执行的测试方案与报价。",{"title":108,"searchDepth":183,"depth":183,"links":1729},[1730,1734,1735,1742,1743,1744,1745],{"id":1281,"depth":183,"text":1282,"children":1731},[1732,1733],{"id":1288,"depth":210,"text":1288},{"id":1317,"depth":210,"text":1318},{"id":1332,"depth":183,"text":1332},{"id":1447,"depth":183,"text":1448,"children":1736},[1737,1738,1739,1740,1741],{"id":1451,"depth":210,"text":1452},{"id":1475,"depth":210,"text":1476},{"id":1482,"depth":210,"text":1483},{"id":1489,"depth":210,"text":1490},{"id":1496,"depth":210,"text":1497},{"id":1514,"depth":183,"text":1515},{"id":1045,"depth":183,"text":1045},{"id":1094,"depth":183,"text":1094},{"id":1141,"depth":183,"text":1141},"2024-05-13","落地页转化率怎么提升？AB测试是常用方法。本文讲清落地页AB测试的流程、可测试元素、工具选择和避坑要点，帮你用数据驱动决策而不是凭感觉改页面。",[1749,1752,1755],{"q":1750,"a":1751},"落地页AB测试需要多少流量？","流量是关键前提。单次测试通常需要每个版本至少 1000 到 3000 访客和几十次转化事件，才能得出统计显著结论。流量小的页面建议先优化明显短板，等流量起来再做严格 AB 测试，否则数据样本不足，结论不可信。",{"q":1753,"a":1754},"AB测试要跑多久？","一般至少 7 到 14 天，建议覆盖 2 到 4 周以排除星期效应和异常波动。测试时间太短，容易得出偶然结论。统计显著（通常要求置信度 95% 以上）是判定标准，而不是固定天数。",{"q":1756,"a":1757},"AB测试和直接改版有什么区别？","AB测试是同时让两组真实用户看到不同版本，按转化数据判断哪个更好，是数据驱动。直接改版是凭经验或直觉判断，可能改了反而转化下降却不自知。AB测试降低决策风险，但需要流量和耐心。",[1759,1760,1761,1762],"落地页AB测试","着陆页测试","转化率优化","A\u002FB测试工具",{},"\u002Fblog\u002Fwebsite\u002Fab-ceshi-luodiye",{"title":1269,"description":1747},{"loc":1764},"blog\u002Fwebsite\u002Fab-ceshi-luodiye",[1769,1770,1771],"AB测试","落地页","转化优化","yElZjz5ka5pGCbAWcij_4M3r6WIkFKBHz0fjYFzvOtI",{"id":1774,"title":1775,"author":6,"body":1776,"category":1237,"cover":1238,"date":2178,"description":2179,"draft":1241,"extension":1242,"faq":2180,"featured":1241,"image":1238,"keywords":2190,"meta":2195,"navigation":246,"path":2196,"seo":2197,"sitemap":2198,"stem":2199,"tags":2200,"updated":2178,"__hash__":2204},"blog\u002Fblog\u002Fwebsite\u002Fanli-ye-zhanshi.md","官网案例页怎么展示才有说服力",{"type":8,"value":1777,"toc":2160},[1778,1785,1788,1791,1823,1826,1830,1833,1844,1848,1851,1871,1875,1878,1916,1919,2016,2019,2022,2025,2028,2031,2035,2038,2041,2044,2047,2096,2098,2136,2138,2155],[11,1779,1780,1781,1784],{},"很多企业官网的案例页只是把项目截图和客户 logo 堆在一起，访客看完不知道这家公司到底能解决什么问题。",[15,1782,1783],{},"案例页的核心是建立信任，而不是炫技——访客关心的是\"你能为我做什么\"，不是\"你做过多少项目\"。"," 这篇文章拆解案例页应该怎么写、怎么布局，才能有效说服潜在客户。",[20,1786,1787],{"id":1787},"案例页常见的失败模式",[11,1789,1790],{},"先看反面，避免重蹈覆辙：",[29,1792,1793,1799,1805,1811,1817],{},[32,1794,1795,1798],{},[15,1796,1797],{},"只放 logo 墙","：访客看不出具体做了什么，信任建立有限。",[32,1800,1801,1804],{},[15,1802,1803],{},"项目罗列无重点","：所有案例一样篇幅，访客找不到与自己相关的。",[32,1806,1807,1810],{},[15,1808,1809],{},"只展示成果不展示过程","：访客会怀疑结果的真实性。",[32,1812,1813,1816],{},[15,1814,1815],{},"缺少客户证言和数据","：自己说自己好，说服力不足。",[32,1818,1819,1822],{},[15,1820,1821],{},"案例陈旧","：还停留在几年前的项目，显得业务停滞。",[20,1824,1825],{"id":1825},"一个有说服力的案例页结构",[24,1827,1829],{"id":1828},"_1-案例索引首页或顶部","1. 案例索引（首页或顶部）",[11,1831,1832],{},"让访客一眼看到案例覆盖的领域，方便快速筛选：",[29,1834,1835,1838,1841],{},[32,1836,1837],{},"按行业（制造业、医疗、教育、零售等）。",[32,1839,1840],{},"按服务类型（官网建设、定制开发、SEO 优化等）。",[32,1842,1843],{},"按客户规模（初创、中小企业、集团）。",[24,1845,1847],{"id":1846},"_2-重点案例卡精选-3-5-个","2. 重点案例卡（精选 3-5 个）",[11,1849,1850],{},"每个重点案例卡至少包含：",[29,1852,1853,1856,1859,1862,1865,1868],{},[32,1854,1855],{},"客户背景一句话简介。",[32,1857,1858],{},"项目挑战（要解决的问题）。",[32,1860,1861],{},"解决方案（你做了什么）。",[32,1863,1864],{},"关键结果（带数据：转化提升、效率提升、成本下降）。",[32,1866,1867],{},"客户证言（一两句话，带姓名职位）。",[32,1869,1870],{},"项目截图或实景图。",[24,1872,1874],{"id":1873},"_3-完整案例详情页","3. 完整案例详情页",[11,1876,1877],{},"点击进入详情页，展开：",[29,1879,1880,1886,1892,1898,1904,1910],{},[32,1881,1882,1885],{},[15,1883,1884],{},"背景","：客户是谁、业务做什么、行业地位。",[32,1887,1888,1891],{},[15,1889,1890],{},"挑战","：客户面临的具体问题（最好与目标访客共鸣）。",[32,1893,1894,1897],{},[15,1895,1896],{},"方案","：你的思路、技术、流程、关键决策。",[32,1899,1900,1903],{},[15,1901,1902],{},"执行","：项目周期、团队配置、关键节点。",[32,1905,1906,1909],{},[15,1907,1908],{},"结果","：上线后的数据变化、客户反馈。",[32,1911,1912,1915],{},[15,1913,1914],{},"复盘","：哪里做得好、哪里可以改进（坦诚反而加分）。",[20,1917,1918],{"id":1918},"案例说服力要素清单",[466,1920,1921,1934],{},[469,1922,1923],{},[472,1924,1925,1928,1931],{},[475,1926,1927],{},"要素",[475,1929,1930],{},"作用",[475,1932,1933],{},"必备度",[485,1935,1936,1946,1956,1966,1976,1986,1996,2006],{},[472,1937,1938,1941,1944],{},[490,1939,1940],{},"客户行业背景",[490,1942,1943],{},"让目标访客代入",[490,1945,1367],{},[472,1947,1948,1951,1954],{},[490,1949,1950],{},"具体问题描述",[490,1952,1953],{},"建立问题共鸣",[490,1955,1367],{},[472,1957,1958,1961,1964],{},[490,1959,1960],{},"解决方案细节",[490,1962,1963],{},"体现专业能力",[490,1965,1367],{},[472,1967,1968,1971,1974],{},[490,1969,1970],{},"数据化结果",[490,1972,1973],{},"客观证明效果",[490,1975,1367],{},[472,1977,1978,1981,1984],{},[490,1979,1980],{},"客户证言",[490,1982,1983],{},"第三方背书",[490,1985,1367],{},[472,1987,1988,1991,1994],{},[490,1989,1990],{},"项目截图",[490,1992,1993],{},"视觉证据",[490,1995,1408],{},[472,1997,1998,2001,2004],{},[490,1999,2000],{},"团队成员介绍",[490,2002,2003],{},"增加人格化",[490,2005,1408],{},[472,2007,2008,2011,2014],{},[490,2009,2010],{},"项目时间线",[490,2012,2013],{},"体现流程规范",[490,2015,1408],{},[20,2017,2018],{"id":2018},"写案例文案的技巧",[24,2020,2021],{"id":2021},"用客户的话说事",[11,2023,2024],{},"少用\"我们公司专业、经验丰富\"这种自夸，多用客户的语言描述问题和结果。比如把\"我们优化了网站性能\"改成\"客户原官网加载 8 秒，优化后 1.5 秒，跳出率下降 40%\"。",[24,2026,2027],{"id":2027},"数据要真实具体",[11,2029,2030],{},"含糊的\"显著提升\"不如\"询盘量从月均 30 提升到 80\"。具体数字有说服力，前提是真实可验证。",[24,2032,2034],{"id":2033},"讲清为什么","讲清\"为什么\"",[11,2036,2037],{},"不只是讲做了什么，更要讲为什么这么做。比如\"选择 Nuxt 而不是 jQuery 模板，是因为客户重视 SEO 和长期可维护性\"——这种判断体现专业度。",[24,2039,2040],{"id":2040},"包含坦诚的复盘",[11,2042,2043],{},"只讲好的案例显得假。讲一两个项目中的挑战和调整，反而让案例更可信。",[20,2045,2046],{"id":2046},"案例页的成本参考",[466,2048,2049,2062],{},[469,2050,2051],{},[472,2052,2053,2056,2059],{},[475,2054,2055],{},"案例页类型",[475,2057,2058],{},"内容深度",[475,2060,2061],{},"成本区间",[485,2063,2064,2075,2085],{},[472,2065,2066,2069,2072],{},[490,2067,2068],{},"基础案例页（logo 墙 + 简述）",[490,2070,2071],{},"浅",[490,2073,2074],{},"含在展示型官网内",[472,2076,2077,2080,2082],{},[490,2078,2079],{},"标准案例页（5-8 个详情）",[490,2081,1408],{},[490,2083,2084],{},"含在定制官网内",[472,2086,2087,2090,2093],{},[490,2088,2089],{},"深度案例库（带分类、搜索、独立详情页）",[490,2091,2092],{},"深",[490,2094,2095],{},"1 万到 3 万起",[20,2097,1094],{"id":1094},[29,2099,2100,2106,2112,2118,2124,2130],{},[32,2101,2102,2105],{},[15,2103,2104],{},"logo 墙当案例页","：访客看不出能力，信任建立有限。",[32,2107,2108,2111],{},[15,2109,2110],{},"所有案例同等篇幅","：访客抓不到重点。",[32,2113,2114,2117],{},[15,2115,2116],{},"只讲技术不讲业务","：访客听不懂，关心的是结果。",[32,2119,2120,2123],{},[15,2121,2122],{},"案例不更新","：显得业务停滞。",[32,2125,2126,2129],{},[15,2127,2128],{},"数据造假或夸大","：一旦被识破信任全失。",[32,2131,2132,2135],{},[15,2133,2134],{},"缺少客户授权","：未经允许公开案例和证言有法律风险。",[20,2137,1141],{"id":1141},[1143,2139,2140,2143,2146,2149,2152],{},[32,2141,2142],{},"盘点现有客户案例，挑出 3 到 5 个最有代表性的。",[32,2144,2145],{},"为每个案例撰写背景、挑战、方案、结果、证言。",[32,2147,2148],{},"收集项目截图、数据、客户证言（取得授权）。",[32,2150,2151],{},"设计案例索引页和详情页模板。",[32,2153,2154],{},"上线后持续补充新案例，淘汰陈旧案例。",[1167,2156,2157],{},[11,2158,2159],{},"广州市汉诺雷斯（HNREIS）做企业官网会帮客户梳理案例内容、设计案例页结构、撰写说服力文案。把你的客户案例素材告诉我们，我们把它做成能说服新客户的页面。",{"title":108,"searchDepth":183,"depth":183,"links":2161},[2162,2163,2168,2169,2175,2176,2177],{"id":1787,"depth":183,"text":1787},{"id":1825,"depth":183,"text":1825,"children":2164},[2165,2166,2167],{"id":1828,"depth":210,"text":1829},{"id":1846,"depth":210,"text":1847},{"id":1873,"depth":210,"text":1874},{"id":1918,"depth":183,"text":1918},{"id":2018,"depth":183,"text":2018,"children":2170},[2171,2172,2173,2174],{"id":2021,"depth":210,"text":2021},{"id":2027,"depth":210,"text":2027},{"id":2033,"depth":210,"text":2034},{"id":2040,"depth":210,"text":2040},{"id":2046,"depth":183,"text":2046},{"id":1094,"depth":183,"text":1094},{"id":1141,"depth":183,"text":1141},"2024-05-27","案例页是企业官网转化客户的关键页面。本文讲清案例页的结构、内容要素、信任元素布局和常见错误，帮你把案例页从\"项目罗列\"变成\"客户说服工具\"。",[2181,2184,2187],{"q":2182,"a":2183},"案例页应该放多少个案例？","质量比数量重要。3 到 5 个有深度的代表案例，胜过几十个只放 logo 的项目罗列。每个案例讲清背景、挑战、方案、结果和数据，让访客看完能信任你的能力。案例太少显得没经验，太多又稀释重点。",{"q":2185,"a":2186},"没有大客户案例怎么办？","中小客户案例也能体现专业度，关键是把过程和结果讲清楚。重点展示项目难度、你提供的解决方案、客户的实际反馈和数据。比起\"行业头部客户\"的标签，访客更关心\"这家服务商能不能解决我的问题\"。",{"q":2188,"a":2189},"案例页要不要按行业分类？","如果你的客户跨多个行业，按行业分类能让访客快速找到与自己相关的案例。但分类太细会让每个分类下案例变少，反而显得能力分散。建议先按大类分（如 ToB \u002F ToC \u002F 政企），再在分类内突出 2-3 个重点案例。",[2191,2192,2193,2194],"官网案例页","案例展示设计","客户案例怎么写","官网说服力",{},"\u002Fblog\u002Fwebsite\u002Fanli-ye-zhanshi",{"title":1775,"description":2179},{"loc":2196},"blog\u002Fwebsite\u002Fanli-ye-zhanshi",[2201,2202,2203],"案例页","信任建设","转化","DWfkS7pLuniRhZO3NtOEbN-_iKTL7ehWMx6nPfFl_o4",{"id":2206,"title":2207,"author":6,"body":2208,"category":1237,"cover":1238,"date":2630,"description":2631,"draft":1241,"extension":1242,"faq":2632,"featured":1241,"image":1238,"keywords":2642,"meta":2647,"navigation":246,"path":2648,"seo":2649,"sitemap":2650,"stem":2651,"tags":2652,"updated":2630,"__hash__":2654},"blog\u002Fblog\u002Fwebsite\u002Fbendi-seo-guanwang.md","官网本地SEO怎么获客",{"type":8,"value":2209,"toc":2611},[2210,2217,2221,2303,2309,2313,2317,2320,2331,2337,2341,2352,2356,2359,2373,2376,2380,2391,2395,2406,2409,2412,2415,2426,2429,2432,2443,2445,2448,2456,2460,2463,2474,2480,2484,2544,2546,2584,2586,2606],[11,2211,2212,2213,2216],{},"本地服务型企业（装修、家政、维修、培训、医疗、餐饮）的官网，最希望的是同城客户搜到、打电话、上门咨询。",[15,2214,2215],{},"本地 SEO 不是把\"装修\"这种大词做到首页，而是让\"广州天河装修公司\"这种地域长尾词能稳定排上去。"," 这篇文章讲清本地 SEO 的核心要素和实操要点。",[20,2218,2220],{"id":2219},"本地-seo-与通用-seo-的区别","本地 SEO 与通用 SEO 的区别",[466,2222,2223,2236],{},[469,2224,2225],{},[472,2226,2227,2230,2233],{},[475,2228,2229],{},"维度",[475,2231,2232],{},"本地 SEO",[475,2234,2235],{},"通用 SEO",[485,2237,2238,2249,2260,2271,2282,2292],{},[472,2239,2240,2243,2246],{},[490,2241,2242],{},"关键词",[490,2244,2245],{},"带地域（广州 XX 公司）",[490,2247,2248],{},"不带地域（XX 公司）",[472,2250,2251,2254,2257],{},[490,2252,2253],{},"竞争范围",[490,2255,2256],{},"同城同行业",[490,2258,2259],{},"全国同行业",[472,2261,2262,2265,2268],{},[490,2263,2264],{},"流量规模",[490,2266,2267],{},"较小但精准",[490,2269,2270],{},"较大但宽泛",[472,2272,2273,2276,2279],{},[490,2274,2275],{},"转化率",[490,2277,2278],{},"高（同城需求明确）",[490,2280,2281],{},"中（可能来自任意城市）",[472,2283,2284,2287,2290],{},[490,2285,2286],{},"上榜难度",[490,2288,2289],{},"中等",[490,2291,1367],{},[472,2293,2294,2297,2300],{},[490,2295,2296],{},"适合",[490,2298,2299],{},"线下服务、地域性强的业务",[490,2301,2302],{},"线上服务、全国性业务",[11,2304,2305,2308],{},[15,2306,2307],{},"结论","：如果你的服务有地域限制，本地 SEO 投入产出比远高于通用 SEO。",[20,2310,2312],{"id":2311},"本地-seo-的核心要素","本地 SEO 的核心要素",[24,2314,2316],{"id":2315},"_1-地域关键词布局","1. 地域关键词布局",[11,2318,2319],{},"每个服务页面针对一个\"地域 + 服务\"组合：",[29,2321,2322,2325,2328],{},[32,2323,2324],{},"城市级别：广州装修公司。",[32,2326,2327],{},"区域级别：广州天河装修公司。",[32,2329,2330],{},"街道\u002F商圈级别：珠江新城装修公司。",[11,2332,2333,2336],{},[15,2334,2335],{},"布局位置","：标题、描述、H1、正文首段、内链锚文本、图片 alt。",[24,2338,2340],{"id":2339},"_2-地址与联系方式","2. 地址与联系方式",[29,2342,2343,2346,2349],{},[32,2344,2345],{},"官网每个页面底部展示完整地址、电话、营业时间。",[32,2347,2348],{},"用结构化数据（Schema.org 的 LocalBusiness）标记地址、电话、营业时间。",[32,2350,2351],{},"嵌入地图（百度地图、高德地图）。",[24,2353,2355],{"id":2354},"_3-商户平台入驻","3. 商户平台入驻",[11,2357,2358],{},"主流本地商户平台：",[29,2360,2361,2364,2367,2370],{},[32,2362,2363],{},"百度地图商户。",[32,2365,2366],{},"高德地图商户。",[32,2368,2369],{},"大众点评、口碑。",[32,2371,2372],{},"行业垂直平台（如医疗的\"好大夫\"、装修的\"土巴兔\"）。",[11,2374,2375],{},"每个平台保持信息一致（NAP 一致性：名称、地址、电话完全相同）。",[24,2377,2379],{"id":2378},"_4-客户评价与口碑","4. 客户评价与口碑",[29,2381,2382,2385,2388],{},[32,2383,2384],{},"引导真实客户在地图、点评平台留好评。",[32,2386,2387],{},"官网展示真实客户证言（带姓名、项目）。",[32,2389,2390],{},"评价数量和质量都是本地 SEO 的信号。",[24,2392,2394],{"id":2393},"_5-本地外链与媒体报道","5. 本地外链与媒体报道",[29,2396,2397,2400,2403],{},[32,2398,2399],{},"同城行业平台、商会、媒体的合作链接。",[32,2401,2402],{},"本地新闻、活动赞助带来的报道和外链。",[32,2404,2405],{},"政府备案、行业协会会员的展示。",[20,2407,2408],{"id":2408},"地域关键词怎么布局",[24,2410,2411],{"id":2411},"主页",[11,2413,2414],{},"主页通常优化\"城市 + 核心服务\"：",[29,2416,2417,2420,2423],{},[32,2418,2419],{},"标题：广州装修公司-XX 装饰。",[32,2421,2422],{},"H1：广州装修公司，专业提供家装、工装服务。",[32,2424,2425],{},"描述：自然带入城市和核心服务。",[24,2427,2428],{"id":2428},"服务页",[11,2430,2431],{},"每个服务针对一个细分地域词：",[29,2433,2434,2437,2440],{},[32,2435,2436],{},"家装服务页：广州家装公司。",[32,2438,2439],{},"工装服务页：广州办公室装修。",[32,2441,2442],{},"软装服务页：广州软装设计。",[24,2444,2201],{"id":2201},[11,2446,2447],{},"每个案例针对具体区域：",[29,2449,2450,2453],{},[32,2451,2452],{},"广州天河区某小区装修案例。",[32,2454,2455],{},"珠江新城办公室装修案例。",[24,2457,2459],{"id":2458},"落地页多城市策略","落地页（多城市策略）",[11,2461,2462],{},"如果业务覆盖多个城市，可以为每个城市建一个落地页：",[29,2464,2465,2468,2471],{},[32,2466,2467],{},"\u002Fguangzhou：广州装修。",[32,2469,2470],{},"\u002Ffoshan：佛山装修。",[32,2472,2473],{},"\u002Fdongguan：东莞装修。",[11,2475,2476,2479],{},[15,2477,2478],{},"注意","：每个城市页内容要差异化，不要复制粘贴只换城市名，否则搜索引擎会判定为低质内容。",[20,2481,2483],{"id":2482},"本地-seo-的成本参考","本地 SEO 的成本参考",[466,2485,2486,2498],{},[469,2487,2488],{},[472,2489,2490,2493,2496],{},[475,2491,2492],{},"投入项",[475,2494,2495],{},"说明",[475,2497,2061],{},[485,2499,2500,2511,2522,2533],{},[472,2501,2502,2505,2508],{},[490,2503,2504],{},"官网地域化建设",[490,2506,2507],{},"多城市落地页、地图、结构化数据",[490,2509,2510],{},"含在定制官网内或 1-3 万",[472,2512,2513,2516,2519],{},[490,2514,2515],{},"商户平台入驻",[490,2517,2518],{},"百度\u002F高德\u002F点评基础入驻",[490,2520,2521],{},"大多免费，认证有少量费用",[472,2523,2524,2527,2530],{},[490,2525,2526],{},"本地内容运营",[490,2528,2529],{},"本地案例、本地知识内容持续更新",[490,2531,2532],{},"每月几千到上万",[472,2534,2535,2538,2541],{},[490,2536,2537],{},"本地外链建设",[490,2539,2540],{},"行业平台、媒体合作",[490,2542,2543],{},"按合作资源定价",[20,2545,1094],{"id":1094},[29,2547,2548,2554,2560,2566,2572,2578],{},[32,2549,2550,2553],{},[15,2551,2552],{},"只优化通用词","：本地服务型企业做\"装修\"这种大词，流量大但转化低。",[32,2555,2556,2559],{},[15,2557,2558],{},"地图不接入","：错过本地搜索和地图商户结果。",[32,2561,2562,2565],{},[15,2563,2564],{},"NAP 不一致","：各平台地址、电话、名称不一致，影响信任度。",[32,2567,2568,2571],{},[15,2569,2570],{},"多城市页内容雷同","：复制粘贴只换城市名，被判低质。",[32,2573,2574,2577],{},[15,2575,2576],{},"忽视客户评价","：评价是本地 SEO 重要信号，引导不够。",[32,2579,2580,2583],{},[15,2581,2582],{},"急于求成","：本地 SEO 通常 3 到 6 个月起步，没耐心效果出不来。",[20,2585,1141],{"id":1141},[1143,2587,2588,2591,2594,2597,2600,2603],{},[32,2589,2590],{},"梳理你的服务地域范围（哪些城市、哪些区域）。",[32,2592,2593],{},"整理地域关键词表（城市+服务、区域+服务）。",[32,2595,2596],{},"在官网按地域落地页结构组织内容。",[32,2598,2599],{},"接入地图、结构化数据、商户平台。",[32,2601,2602],{},"持续产出本地案例、本地知识内容。",[32,2604,2605],{},"引导客户评价，建立口碑。",[1167,2607,2608],{},[11,2609,2610],{},"广州市汉诺雷斯（HNREIS）做企业官网会按本地 SEO 思路规划地域落地页、地图、结构化数据，帮助企业获取同城精准客户。把你的服务地域和目标客户告诉我们，我们给出本地 SEO 方案。",{"title":108,"searchDepth":183,"depth":183,"links":2612},[2613,2614,2621,2627,2628,2629],{"id":2219,"depth":183,"text":2220},{"id":2311,"depth":183,"text":2312,"children":2615},[2616,2617,2618,2619,2620],{"id":2315,"depth":210,"text":2316},{"id":2339,"depth":210,"text":2340},{"id":2354,"depth":210,"text":2355},{"id":2378,"depth":210,"text":2379},{"id":2393,"depth":210,"text":2394},{"id":2408,"depth":183,"text":2408,"children":2622},[2623,2624,2625,2626],{"id":2411,"depth":210,"text":2411},{"id":2428,"depth":210,"text":2428},{"id":2201,"depth":210,"text":2201},{"id":2458,"depth":210,"text":2459},{"id":2482,"depth":183,"text":2483},{"id":1094,"depth":183,"text":1094},{"id":1141,"depth":183,"text":1141},"2024-06-05","本地服务型企业官网怎么靠 SEO 获取同城客户？本文讲清本地 SEO 的核心要素（地域词、地图、目录、口碑）、关键词布局和避坑要点。",[2633,2636,2639],{"q":2634,"a":2635},"本地 SEO 多久能看到效果？","本地 SEO 一般比通用 SEO 快一些。新站通常 2 到 4 个月能在地域词搜索中获得初步排名，6 个月以上趋于稳定。竞争激烈的行业（如装修、家政）需要更长时间。前提是网站基础好、内容持续更新、有真实的本地客户反馈和评价。",{"q":2637,"a":2638},"本地 SEO 和通用 SEO 有什么区别？","本地 SEO 针对带地域的搜索词（如\"广州装修公司\"、\"上海建站公司\"），竞争范围窄、转化率高，适合服务有地域限制的企业。通用 SEO 针对全国性搜索词，流量大但竞争激烈。本地服务型企业应该优先做本地 SEO，效果更直接。",{"q":2640,"a":2641},"必须接入地图商户吗？","如果你的业务有线下门店或服务有明确地域范围，建议接入百度地图、高德地图的商户标注，并在官网展示。地图商户能出现在本地搜索结果中，是本地 SEO 的重要信号。但纯线上服务、无地域限制的企业可以不强求。",[2643,2644,2645,2646],"本地SEO","同城获客","地域关键词优化","本地商户官网",{},"\u002Fblog\u002Fwebsite\u002Fbendi-seo-guanwang",{"title":2207,"description":2631},{"loc":2648},"blog\u002Fwebsite\u002Fbendi-seo-guanwang",[2643,2653,2242],"地域获客","s_kMqGduPXhZ76TxZGa35wrUUDXKkgcjiXQfz2rbjM0",{"id":2656,"title":2657,"author":6,"body":2658,"category":1237,"cover":1238,"date":3211,"description":3212,"draft":1241,"extension":1242,"faq":3213,"featured":1241,"image":1238,"keywords":3223,"meta":3228,"navigation":246,"path":3229,"seo":3230,"sitemap":3231,"stem":3232,"tags":3233,"updated":3211,"__hash__":3237},"blog\u002Fblog\u002Fwebsite\u002Fcdn-wangzhan.md","官网为什么该上CDN",{"type":8,"value":2659,"toc":3187},[2660,2667,2671,2674,2678,2695,2699,2707,2711,2715,2765,2769,2780,2784,2795,2799,2802,2806,2886,2890,2894,2905,2909,2920,2924,2938,2942,2953,2957,3028,3032,3070,3072,3120,3122,3160,3162,3182],[11,2661,2662,2663,2666],{},"不少企业官网上线后会出现这些问题：南方访问快、北方访问慢；图片多了打开卡顿；遇到刷流量或被攻击直接打不开。这些问题的根源往往在于\"用户访问的是源服务器\"。",[15,2664,2665],{},"CDN（内容分发网络）通过在全国部署节点，把静态资源缓存到离用户最近的地方，是现代官网的标配基础设施。"," 这篇文章讲清 CDN 对官网的实际价值、上不上 CDN 的判断标准、以及选型要点。",[20,2668,2670],{"id":2669},"cdn-是什么","CDN 是什么",[11,2672,2673],{},"CDN（Content Delivery Network，内容分发网络）是一组分布在不同地理位置的服务器节点。它把网站的静态资源（图片、CSS、JavaScript、视频、字体）缓存到各个节点，用户访问时从最近的节点取数据，而不是全部回源到原始服务器。",[24,2675,2677],{"id":2676},"cdn-的工作原理","CDN 的工作原理",[1143,2679,2680,2683,2686,2689,2692],{},[32,2681,2682],{},"用户访问官网。",[32,2684,2685],{},"DNS 把用户解析到最近的 CDN 节点。",[32,2687,2688],{},"节点如果有缓存，直接返回（命中）。",[32,2690,2691],{},"节点没有缓存，回源拉取再缓存（未命中）。",[32,2693,2694],{},"后续同一资源的访问都从节点返回。",[24,2696,2698],{"id":2697},"cdn-加速什么不加速什么","CDN 加速什么、不加速什么",[29,2700,2701,2704],{},[32,2702,2703],{},"加速：图片、CSS、JS、字体、视频、文档等静态资源。",[32,2705,2706],{},"不加速（一般）：HTML 文档（可由源站动态生成）、API 接口、用户私有数据。",[20,2708,2710],{"id":2709},"cdn-对官网的实际好处","CDN 对官网的实际好处",[24,2712,2714],{"id":2713},"_1-加速访问","1. 加速访问",[466,2716,2717,2730],{},[469,2718,2719],{},[472,2720,2721,2724,2727],{},[475,2722,2723],{},"用户位置",[475,2725,2726],{},"不上 CDN",[475,2728,2729],{},"上 CDN",[485,2731,2732,2743,2754],{},[472,2733,2734,2737,2740],{},[490,2735,2736],{},"同城（离源站近）",[490,2738,2739],{},"较快",[490,2741,2742],{},"几乎无差异",[472,2744,2745,2748,2751],{},[490,2746,2747],{},"跨省访问",[490,2749,2750],{},"较慢（30ms+ 延迟）",[490,2752,2753],{},"快（命中节点，\u003C10ms）",[472,2755,2756,2759,2762],{},[490,2757,2758],{},"全国访问",[490,2760,2761],{},"体验参差",[490,2763,2764],{},"各地体验一致",[24,2766,2768],{"id":2767},"_2-减轻源站压力","2. 减轻源站压力",[29,2770,2771,2774,2777],{},[32,2772,2773],{},"静态资源请求由 CDN 节点承担，源站只处理动态请求。",[32,2775,2776],{},"流量峰值（活动、爆款内容）由 CDN 扛住。",[32,2778,2779],{},"源站带宽费用降低。",[24,2781,2783],{"id":2782},"_3-抗攻击和刷流量","3. 抗攻击和刷流量",[29,2785,2786,2789,2792],{},[32,2787,2788],{},"DDoS 攻击、恶意刷流量打到 CDN 节点而不是源站。",[32,2790,2791],{},"CDN 自带 WAF、限流、黑名单等防护能力。",[32,2793,2794],{},"即使被攻击，源站也能保持在线。",[24,2796,2798],{"id":2797},"_4-节省源站带宽费用","4. 节省源站带宽费用",[11,2800,2801],{},"CDN 流量费用通常比源站带宽便宜，特别是图片多的官网。",[20,2803,2805],{"id":2804},"什么情况下该上-cdn","什么情况下该上 CDN",[466,2807,2808,2821],{},[469,2809,2810],{},[472,2811,2812,2815,2818],{},[475,2813,2814],{},"场景",[475,2816,2817],{},"是否建议",[475,2819,2820],{},"理由",[485,2822,2823,2834,2844,2854,2865,2875],{},[472,2824,2825,2828,2831],{},[490,2826,2827],{},"全国\u002F全球访问的官网",[490,2829,2830],{},"强烈建议",[490,2832,2833],{},"跨地域加速",[472,2835,2836,2839,2841],{},[490,2837,2838],{},"图片\u002F视频多的官网",[490,2840,2830],{},[490,2842,2843],{},"静态资源体量大",[472,2845,2846,2849,2851],{},[490,2847,2848],{},"高流量或有活动期",[490,2850,2830],{},[490,2852,2853],{},"抗峰值、抗攻击",[472,2855,2856,2859,2862],{},[490,2857,2858],{},"仅本地访问的小站",[490,2860,2861],{},"可选",[490,2863,2864],{},"加速效果有限",[472,2866,2867,2870,2872],{},[490,2868,2869],{},"全静态官网（SSG）",[490,2871,2861],{},[490,2873,2874],{},"已经够快，CDN 锦上添花",[472,2876,2877,2880,2883],{},[490,2878,2879],{},"有大量动态接口的官网",[490,2881,2882],{},"建议",[490,2884,2885],{},"加速静态部分，动态回源",[20,2887,2889],{"id":2888},"cdn-选型要点","CDN 选型要点",[24,2891,2893],{"id":2892},"_1-节点覆盖","1. 节点覆盖",[29,2895,2896,2899,2902],{},[32,2897,2898],{},"全国节点数量和分布（一线城市、二线城市）。",[32,2900,2901],{},"是否覆盖目标用户主要地域。",[32,2903,2904],{},"海外节点（如果有海外业务）。",[24,2906,2908],{"id":2907},"_2-计费方式","2. 计费方式",[29,2910,2911,2914,2917],{},[32,2912,2913],{},"按流量计费（按 GB）：适合流量波动大的官网。",[32,2915,2916],{},"按带宽计费（按 Mbps）：适合流量稳定且大的官网。",[32,2918,2919],{},"月度套餐：适合中小流量官网，成本可控。",[24,2921,2923],{"id":2922},"_3-安全能力","3. 安全能力",[29,2925,2926,2929,2932,2935],{},[32,2927,2928],{},"DDoS 防护（基础和高级）。",[32,2930,2931],{},"WAF（Web 应用防火墙）。",[32,2933,2934],{},"CC 攻击防护。",[32,2936,2937],{},"黑白名单、限流。",[24,2939,2941],{"id":2940},"_4-缓存配置","4. 缓存配置",[29,2943,2944,2947,2950],{},[32,2945,2946],{},"支持按 URL、文件类型、目录配置缓存规则。",[32,2948,2949],{},"支持缓存预热、刷新。",[32,2951,2952],{},"支持 HTTPS。",[24,2954,2956],{"id":2955},"_5-国内主流服务商","5. 国内主流服务商",[466,2958,2959,2971],{},[469,2960,2961],{},[472,2962,2963,2966,2969],{},[475,2964,2965],{},"服务商",[475,2967,2968],{},"特点",[475,2970,2296],{},[485,2972,2973,2984,2995,3006,3017],{},[472,2974,2975,2978,2981],{},[490,2976,2977],{},"阿里云 CDN",[490,2979,2980],{},"节点多、生态完善",[490,2982,2983],{},"企业官网通用",[472,2985,2986,2989,2992],{},[490,2987,2988],{},"腾讯云 CDN",[490,2990,2991],{},"性价比高、配置友好",[490,2993,2994],{},"中小官网",[472,2996,2997,3000,3003],{},[490,2998,2999],{},"华为云 CDN",[490,3001,3002],{},"政企客户多",[490,3004,3005],{},"政企\u002F合规要求高",[472,3007,3008,3011,3014],{},[490,3009,3010],{},"百度智能云 CDN",[490,3012,3013],{},"与百度生态打通",[490,3015,3016],{},"重 SEO 的官网",[472,3018,3019,3022,3025],{},[490,3020,3021],{},"Cloudflare",[490,3023,3024],{},"全球节点强、海外业务友好",[490,3026,3027],{},"有海外业务的官网",[20,3029,3031],{"id":3030},"cdn-配置注意事项","CDN 配置注意事项",[29,3033,3034,3040,3046,3052,3058,3064],{},[32,3035,3036,3039],{},[15,3037,3038],{},"缓存策略","：静态资源（图片、CSS、JS）长缓存（30 天），HTML 短缓存或不缓存。",[32,3041,3042,3045],{},[15,3043,3044],{},"HTTPS","：开启 HTTPS，配置 SSL 证书。",[32,3047,3048,3051],{},[15,3049,3050],{},"回源配置","：回源协议、回源 Host、回源超时设置正确。",[32,3053,3054,3057],{},[15,3055,3056],{},"缓存刷新","：内容更新后及时刷新缓存。",[32,3059,3060,3063],{},[15,3061,3062],{},"跨域","：CORS 配置正确，避免字体、图片加载失败。",[32,3065,3066,3069],{},[15,3067,3068],{},"统计","：开启访问日志，便于排查问题。",[20,3071,1045],{"id":1045},[466,3073,3074,3085],{},[469,3075,3076],{},[472,3077,3078,3080,3083],{},[475,3079,2264],{},[475,3081,3082],{},"月度成本（参考）",[475,3084,2495],{},[485,3086,3087,3098,3109],{},[472,3088,3089,3092,3095],{},[490,3090,3091],{},"小流量（\u003C100GB）",[490,3093,3094],{},"0 到几十元",[490,3096,3097],{},"多数厂商有免费额度或入门套餐",[472,3099,3100,3103,3106],{},[490,3101,3102],{},"中流量（100GB-1TB）",[490,3104,3105],{},"几十到几百元",[490,3107,3108],{},"按量或套餐",[472,3110,3111,3114,3117],{},[490,3112,3113],{},"大流量（1TB+）",[490,3115,3116],{},"几百到几千元",[490,3118,3119],{},"按带宽或大流量套餐",[20,3121,1094],{"id":1094},[29,3123,3124,3130,3136,3142,3148,3154],{},[32,3125,3126,3129],{},[15,3127,3128],{},"\"我流量小不用 CDN\"","：现代 CDN 入门免费，小站也能享受加速和防护。",[32,3131,3132,3135],{},[15,3133,3134],{},"只加速不考虑安全","：DDoS、CC 攻击小站也会遇到。",[32,3137,3138,3141],{},[15,3139,3140],{},"缓存配置一刀切","：HTML 也长缓存会导致更新不生效。",[32,3143,3144,3147],{},[15,3145,3146],{},"不配 HTTPS","：HTTP 站点会被浏览器标\"不安全\"，影响信任。",[32,3149,3150,3153],{},[15,3151,3152],{},"忽视缓存刷新","：内容更新后忘刷新，访客看到旧版本。",[32,3155,3156,3159],{},[15,3157,3158],{},"选最便宜的","：节点少、稳定性差，反而拖累官网。",[20,3161,1141],{"id":1141},[1143,3163,3164,3167,3170,3173,3176,3179],{},[32,3165,3166],{},"评估官网流量规模、用户地域分布、静态资源体量。",[32,3168,3169],{},"选择合适的 CDN 服务商和计费方式。",[32,3171,3172],{},"配置域名解析、回源、缓存策略、HTTPS。",[32,3174,3175],{},"测试各地访问速度、缓存命中率、回源正常。",[32,3177,3178],{},"开启访问日志，持续监控。",[32,3180,3181],{},"定期优化缓存规则和成本。",[1167,3183,3184],{},[11,3185,3186],{},"广州市汉诺雷斯（HNREIS）做官网默认配置 CDN 加速和基础安全防护，用现代部署方案（Nuxt + CDN）保证全国访问流畅。把你的官网访问情况和性能要求告诉我们，我们给出 CDN 方案与报价。",{"title":108,"searchDepth":183,"depth":183,"links":3188},[3189,3193,3199,3200,3207,3208,3209,3210],{"id":2669,"depth":183,"text":2670,"children":3190},[3191,3192],{"id":2676,"depth":210,"text":2677},{"id":2697,"depth":210,"text":2698},{"id":2709,"depth":183,"text":2710,"children":3194},[3195,3196,3197,3198],{"id":2713,"depth":210,"text":2714},{"id":2767,"depth":210,"text":2768},{"id":2782,"depth":210,"text":2783},{"id":2797,"depth":210,"text":2798},{"id":2804,"depth":183,"text":2805},{"id":2888,"depth":183,"text":2889,"children":3201},[3202,3203,3204,3205,3206],{"id":2892,"depth":210,"text":2893},{"id":2907,"depth":210,"text":2908},{"id":2922,"depth":210,"text":2923},{"id":2940,"depth":210,"text":2941},{"id":2955,"depth":210,"text":2956},{"id":3030,"depth":183,"text":3031},{"id":1045,"depth":183,"text":1045},{"id":1094,"depth":183,"text":1094},{"id":1141,"depth":183,"text":1141},"2024-06-17","官网访问慢、跨地域打开卡顿、被刷流量打挂，都和 CDN 有关。本文讲清 CDN 是什么、对官网的实际好处、什么情况下该上、以及选型要点。",[3214,3217,3220],{"q":3215,"a":3216},"小流量官网也要上 CDN 吗？","不一定必须，但建议上。现代 CDN 大多有免费或低成本的入门套餐（比如每月几十 GB 流量免费），即使小站也能享受加速和安全防护。如果官网访问量小、用户都在同城，可以不上；但凡有全国访问、图片多、希望体验流畅，CDN 都是高性价比的选择。",{"q":3218,"a":3219},"CDN 和服务器带宽什么关系？","服务器是源站，所有数据从源站取会慢且容易被打满。CDN 在全国（全球）部署节点，把静态资源（图片、CSS、JS、视频）缓存到离用户最近的节点，用户访问的是 CDN 节点而不是源站，从而减轻源站压力、加速访问。CDN 不替代服务器，而是加速和保护源站。",{"q":3221,"a":3222},"上 CDN 会让 SEO 变好吗？","间接会。CDN 提升页面加载速度，而速度是搜索引擎的排名因素之一（Core Web Vitals）。加载快、用户体验好的网站，搜索排名会有正向影响。但 CDN 不是 SEO 银弹，要配合内容、关键词等其他优化。",[3224,3225,3226,3227],"CDN加速","官网性能优化","静态资源分发","网站抗DDoS",{},"\u002Fblog\u002Fwebsite\u002Fcdn-wangzhan",{"title":2657,"description":3212},{"loc":3229},"blog\u002Fwebsite\u002Fcdn-wangzhan",[3234,3235,3236],"CDN","性能","运维","KVUDp0HVjvjWF1EONi8MVB31p4bZBsDqDJSWtmwUQjI",1781688922988]