前端搜索引擎优化（SEO）的技巧-广富强博客

我们常常可以看到一些面试题中有问【 HTML 语义化的好处是什么】，很多人都可以溜溜地说其中一个好处就是【有利于 SEO 】。那么，什么是 SEO ，大家真的都清楚吗？搜索引擎优化（SEO）搜索引擎优化（英语： Search Engine Optimization ，缩写为 SEO ），根据维基百科的解释是：

它是一种透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。
由于不少研究发现，搜索引擎的用户往往只会留意搜索结果最前面的几个条目，所以不少网站都希望透过各种形式来影响搜索引擎的排序，让自己的网站可以有优秀的搜索排名。
当中尤以各种依靠广告维生的网站为甚。

也就是说，通过搜索引擎优化，我们的网站可以在搜索结果的排名中靠前。那么，作为一个前端，我们该如何为搜索引擎优化做出一点贡献呢？优化的技巧在学习如何优化之后，我们最好了解一下当我们在“百度一下”或者“ Google 搜索”时，搜索引擎都做了一些什么。

https://www.

youtube.com/watch

v=BNHR6IQJGZs&feature=youtu.be

这个视频 How Search Works 解释了搜索引擎是如何工作的。

需要科学上网才能看得到，当然在这里我也会总结一下这个视频的大意：当搜索进行时，它会从“蜘蛛”事先抓取到的大量有关联性的索引中，搜索所有包含用户输入的关键字的网页，然后根据算法给出每个网页一个总评分，再根据评分的高低给用户返回搜索结果。而这些包含关键字的内容，可以是文章标题、描述、关键字、内容、甚至是链接等。由上可以得知，要想优化，我们可以从这些方面入手。

创建唯一且准确的网页标题 </code></b><code><title></code> 标记可告诉用户和搜索引擎特定网页的主题是什么。它应放置在 HTML 文档的 <code><head></code> 元素中。<br/><img src="https://www.guangfuqiang.com/file/upload/202210/12/001254471.png" ><br/>我们应该为网站上的每个网页创建一个唯一标题，并且尽量避免与网页内容无关或使用默认或模糊的标题。</p><p>如：<code ><p></p><p><</p><p>title</p><p>></p>前端搜索引擎优化的技巧<p></</p><p>title</p><p>></p><p></p><p><</p><p>title</p><p>></p>我的文档<p></</p><p>title</p><p>></p></code></pre><b>使用</b> <b><code><me<i></i>ta></code></b> <b>元标签</b>我们可以使用 <code><me<i></i>ta></code> 的 <code>keywords</code> 元数据来提炼网页重要关键字，以及 <code>des<i></i>cription</code> 元数据准确总结网页内容，而避免在 <code>des<i></i>cription</code> 元数据的内容中出现关键词的堆砌，描述过长，或“这是一个网页”这种没有实际性意义的描述等现象。正确示范如下：<code ><me<i></i>ta name='keywords' co<i></i>ntent='SEO,title,me<i></i>ta,语义化,alt'><me<i></i>ta name='des<i></i>cription' co<i></i>ntent='介绍搜索引擎优化的技巧，如使用创建title标题、me<i></i>ta关键词和描述、语义化标签、img的alt属性等。'></code></pre><b>使用语义化元素</b>在合适的位置使用合适的元素表达合适的内容，让用户和“蜘蛛”能一目了然文档结构。</p><p>例如使用 <code></code> 可以让“蜘蛛”知道这是很重要的内容。然而，值得注意的是，例如在想要表达强调时，我们不应该滥用标题元素或者 <code><b></code> 、 <code><i></code> 这种没有实际意义的标签，换而可以使用 <code></code> 或 <code></code> 来表示强调。此外， <code></code> 的权重比 <code></code> 的大，我们不应该为了增大权重而去滥用 <code></code> ，一般来说 <code></code> 用于正文的标题。<b>利用</b> <b><code></code></b> <b>中的</b> <b><code>alt</code></b> <b>属性</b><code>alt</code> 属性可以在图片未成功显示时候，使用文本来代替图片的呈现，使“蜘蛛”可以抓取到这个信息。</p><p>此外它还可以解决浏览器禁用图像或屏幕阅读器解析等问题。<b>设置<code>rel='nofollow'</code></b> <b>忽略跟踪</b>如果某个 <code></code> 的链接不需要跟踪，那么添加 <code>rel='nofollow'</code> 即可通知“蜘蛛”忽略跟踪。因为“蜘蛛”分配到每个页面的权重是一定的，为了集中网页权重并将权重分给其他必要的链接，为不必跟踪的链接添加这个属性就显得很必要了。<b>尽量保证 HTML 的纯粹和高质量</b>我们应尽量让结构（HTML）、表现（CSS）及行为（Javas<i></i>cript）三者分离。</p><p>如果在一个 HTML 页面中，编写大量的 CSS 样式或脚本，会拖慢其加载速度，此外，如果不为 <code></code> 定义宽高，那么会引起页面重新渲染，同样也会影响加载速度。一旦加载超时，“蜘蛛”就会放弃爬取。如果这个 HTML 文档内容比较独特丰富（合理插入图片说明）等，会被认为质量较高符合用户需求，从而提高 SEO 的排名。<b>扁平化网站结构</b>一般来说，一个网站的结构层次越少，越有利于“蜘蛛”的爬取。</p><p>所以目录结构一般不多于 3 级，否则“蜘蛛”很容易不愿意继续往下爬。就像用户在操作一个网页一样，层级大于 3 就很影响用户体验了，“蜘蛛”就是模仿用户的心理。<b>合理安排重要内容的位置</b>我们应该将重要内容的 HTML 代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。</p><p>并且，重要内容不应该由 Javas<i></i>cript 或 if<i></i>rame 输出，“蜘蛛”没有办法读取 Javas<i></i>cript ，一般不会去读取 if<i></i>rame 中的内容。<hr>本文完。若文中有错误还请指正与包涵！原文链接：<p>https://</p><p>caijialinxx.github.io/2</p><p>018/07/30/seo-in-front-end/</p><p></p>转载请注明出处。</p><div class="jubaoBox" onclick="Dreport(21, 697578, 0);"><p>免责声明：本平台仅供信息发布交流之途，请谨慎判断信息真伪。如遇虚假诈骗信息，请立即举报</p> <a href="javascript:;" class="jubao_btn">举报</a></div> </div> <div class="tool"> <div class="hate" onclick="Dhate(21, 697578, 0);">反对 <b id="hate-21-697578-0">0</b></div>  <div class="award" onclick="Go('https://m.guangfuqiang.com/member/award.php?mid=21&itemid=697578');">打赏 <b>0</b></div><div class="share" onclick="Go('https://m.guangfuqiang.com/api/share.php?mid=21&itemid=697578');">分享 <b>1</b></div> </div> <div style="border-top: #F6F6F6 10px solid;"></div> <div class="ui-head" style="background:#FFFFFF;"><a href="https://m.guangfuqiang.com/zobk/c337"><span>更多</span></a><i></i><b>相关文章</b></div> <div class="feed"> <div class="feed-item"> <div id="list-sWyk855581"> <div class="temp-items"> <a href="https://m.guangfuqiang.com/zobk/a734929.html" class="link img_3"> <h2 class="title">网站优化排名6大技巧</h2> <div class="imglist"> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195647821.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195647971.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195647291.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> </div> <p class="tags"><span class="spanLabel tag">搜索优化</span><span class="tag">广富强</span> <span class="tag">2022-10-26 19:56更新</span></p> </a> </div> <div class="temp-items"> <a href="https://m.guangfuqiang.com/zobk/a734928.html" class="link img_3"> <h2 class="title">如何做好SEO优化</h2> <div class="imglist"> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195624971.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195624851.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195624101.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> </div> <p class="tags"><span class="spanLabel tag">搜索优化</span><span class="tag">广富强</span> <span class="tag">2022-10-26 19:56更新</span></p> </a> </div> <div class="temp-items"> <a href="https://m.guangfuqiang.com/zobk/a734927.html" class="link img_1"> <h2 class="title">SEO网站优化工具有哪些？哪个好？</h2> <div class="imglist"><div class="imgwp"><img src="https://i04piccdn.sogoucdn.com/0757e18d7a006b1b?.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div></div> <p class="tags"><span class="spanLabel tag">搜索优化</span><span class="tag">广富强</span> <span class="tag">2022-10-26 19:56更新</span></p> </a> </div> <div class="temp-items"> <a href="https://m.guangfuqiang.com/zobk/a734926.html" class="link img_video"> <h2 class="title">如何快速优化seo(整站优化)</h2> <div class="imglist"><div class="imgwp"><img src="https://i02piccdn.sogoucdn.com/f2339b3213c61966?.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div></div> <p class="tags"><span class="spanLabel tag">搜索优化</span><span class="tag">广富强</span> <span class="tag">2022-10-26 19:55更新</span></p> </a> </div> <div class="temp-items"> <a href="https://m.guangfuqiang.com/zobk/a734925.html" class="link img_3"> <h2 class="title">SEO排名网站优化怎么做更有效？</h2> <div class="imglist"> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195533681.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195533461.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195533171.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> </div> <p class="tags"><span class="spanLabel tag">搜索优化</span><span class="tag">广富强</span> <span class="tag">2022-10-26 19:55更新</span></p> </a> </div> <div class="temp-items"> <a href="https://m.guangfuqiang.com/zobk/a734924.html" class="link img_3"> <h2 class="title">你知道网站优化的技巧吗？</h2> <div class="imglist"> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195522771.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195522941.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195522171.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> </div> <p class="tags"><span class="spanLabel tag">搜索优化</span><span class="tag">广富强</span> <span class="tag">2022-10-26 19:55更新</span></p> </a> </div> <div class="temp-items"> <a href="https://m.guangfuqiang.com/zobk/a734923.html" class="link img_1"> <h2 class="title">SEO优化网站有哪些方法?</h2> <div class="imglist"><div class="imgwp"><img src="https://i03piccdn.sogoucdn.com/017584cb3ae8d2d1?.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div></div> <p class="tags"><span class="spanLabel tag">搜索优化</span><span class="tag">广富强</span> <span class="tag">2022-10-26 19:55更新</span></p> </a> </div> <div class="temp-items"> <a href="https://m.guangfuqiang.com/zobk/a734922.html" class="link img_video"> <h2 class="title">大型网站SEO要怎么优化（1）</h2> <div class="imglist"><div class="imgwp"><img src="https://i03piccdn.sogoucdn.com/42dd25a4a26672a1?.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div></div> <p class="tags"><span class="spanLabel tag">搜索优化</span><span class="tag">广富强</span> <span class="tag">2022-10-26 19:54更新</span></p> </a> </div> <div class="temp-items"> <a href="https://m.guangfuqiang.com/zobk/a734921.html" class="link img_1"> <h2 class="title">探寻做网站seo有哪些优化技巧</h2> <div class="imglist"><div class="imgwp"><img src="https://i03piccdn.sogoucdn.com/19f553583eeb99b4?.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div></div> <p class="tags"><span class="spanLabel tag">搜索优化</span><span class="tag">广富强</span> <span class="tag">2022-10-26 19:54更新</span></p> </a> </div> <div class="temp-items"> <a href="https://m.guangfuqiang.com/zobk/a734920.html" class="link img_3"> <h2 class="title">百度SEO网站优化技巧与优势</h2> <div class="imglist"> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195406741.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195406871.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> <div class="imgwp"><img src="https://www.guangfuqiang.com/file/upload/202210/26/195406401.png" onerror="this.src='https://www.guangfuqiang.com/skin/zmtskin/image/nopic156.gif';"></div> </div> <p class="tags"><span class="spanLabel tag">搜索优化</span><span class="tag">广富强</span> <span class="tag">2022-10-26 19:54更新</span></p> </a> </div> </div> </div> </div> <div class="foot-bar-fix"></div> <div class="bottom_inputBox fn-clear bottom_reply_fixed"> <div class="search" onclick="Go('https://m.guangfuqiang.com/comment/index-htm-mid-21-itemid-697578.html');"> <input id="common_btn" autocomplete="off" placeholder="写点你的评论吧" readonly="readonly"> </div> <div class="information"><i></i><p>评论</p><span>0</span></div> <div class="favorites"><div onclick="Dfavorxh(21, 697578);"><i></i><p class="favoritep">收藏</p></div></div> <div class="fabulous"><div onclick="Dlikexh(21, 697578, 0);"><i class=""></i><p class="dianzan">点赞</p></div></div> </div> <div class="popupRightBottom"> <a href="javascript:;" class="postFast haobao_xh_poster_a"><em class="smsk"></em></a> </div>  <link rel="stylesheet" type="text/css" href="https://m.guangfuqiang.com/static/haibaoimg/poster.css?v=f6f1dc"/> <script type="text/javascript" src="https://m.guangfuqiang.com/static/haibaoimg/html2canvas.min.js?v=f6f1dc"></script> <script type="text/javascript"> var poster_open = 'on'; var txt1 = '长按识别二维码查看详情'; var txt2 = '分享来自「广富强博客」'; //var showthumb = "data:;base64,"; //标题图 var showthumb = "https://i01piccdn.sogoucdn.com/2ec014d9de5b469f?.png"; //标题图 var haobao_xh_poster_start_wlat = 0; var haobao_xh_rlmenu = 1; var haobao_xh_nvscroll = 0; var haobao_xh_poster_time_baxt; $(document).ready(function(){ $(document).on('click', '.haobao_xh_poster_a', function(e) { show_haobao_xh_poster_ykzn(); $(".am-share").removeClass("am-modal-active"); $(".sharebg").removeClass("sharebg-active"); }); }); function haobao_xh_poster_rrwz(){ setTimeout(function(){ html2canvas(document.querySelector(".haobao_xh_poster_box_img"), {scale:2,useCORS:true}).then(canvas => { var img = canvas.toDataURL("image/jpeg", .9); document.getElementById('haobao_xh_poster_images').src = img; $('.haobao_xh_poster_load').hide(); $('.haobao_xh_poster_imgshow').show(); }); }, 300); } function show_haobao_xh_poster_ykzn(){ if(haobao_xh_poster_start_wlat == 0){ haobao_xh_poster_start_wlat = 1; //popup.open('<img src="https://m.guangfuqiang.com/static/haibaoimg/imageloading.gif" class="haobao_xh_loading">'); var url = window.location.href.split('#')[0]; //链接 url = encodeURIComponent(url); thumb = showthumb; //标题图 title = "前端搜索引擎优化（SEO）的技巧"; //标题 introduce = "我们常常可以看到一些面试题中有问【 HTML 语义化的好处是什么】，很多人都可以溜溜地说其中一个好处就是【有利于 …"; //简介 var html = '<div id="haobao_xh_poster_box" class="haobao_xh_poster_nchxd">\n' + '<div class="haobao_xh_poster_box">\n' + '<div class="haobao_xh_poster_okimg">\n' + '<div style="padding:150px 0;" class="haobao_xh_poster_load">\n' + '<div class="loading_color">\n' + '<span class="loading_color1"></span>\n' + '<span class="loading_color2"></span>\n' + '<span class="loading_color3"></span>\n' + '<span class="loading_color4"></span>\n' + '<span class="loading_color5"></span>\n' + '<span class="loading_color6"></span>\n' + '<span class="loading_color7"></span>\n' + '</div>\n' + '<div class="haobao_xh_poster_oktit">正在生成海报, 请稍候</div>\n' + '</div>\n' + '<div class="haobao_xh_poster_imgshow" style="display:none">\n' + '<img src="" class="vm" id="haobao_xh_poster_images">\n' + //'<div class="haobao_xh_poster_oktit">↑长按上图保存图片，分享好友或朋友圈</div>\n' + '<div class="haobao_xh_poster_oktit" onclick="savePicture();">↑长按或截屏保存图片，分享好友或朋友圈</div>\n' + '</div>\n' + '</div>\n' + '<div class="haobao_xh_poster_okclose"><a href="javascript:;" class="haobao_xh_poster_closekey"><img src="https://m.guangfuqiang.com/static/haibaoimg/poster_xh_okclose.png" class="vm"></a></div>\n' + '</div>\n' + '<div class="haobao_xh_poster_box_img zibv cl">\n' + '<div class="haobao_xh_poster_img"><div class="img_time">25<span>2024/10</span></div><img src="'+thumb+'" class="vm" id="haobao_xh_poster_image"></div>\n' + '<div class="haobao_xh_poster_tita">'+title+'</div>\n' + '<div class="haobao_xh_poster_txta">'+introduce+'</div><div class="haobao_xh_poster_x guig"></div>\n' + '<div class="haobao_xh_poster_foot fcym">\n' + '<img src="https://www.guangfuqiang.com/api/qrcode.png.php?auth='+url+'" class="kmewm fqpl vm">\n' + '<img src="https://m.guangfuqiang.com/static/haibaoimg/poster_xh_zw.png" class="kmzw vm"><span class="kmzwtip">'+txt1+'<br>'+txt2+'</span>\n' + '</div>\n' + '</div>\n' + '</div>'; if(html.indexOf("haobao_xh_poster") >= 0){ haobao_xh_poster_time_baxt = setTimeout(function(){ haobao_xh_poster_rrwz(); }, 5000); $('body').append(html); $('#haobao_xh_poster_image').load(function(){ clearTimeout(haobao_xh_poster_time_baxt); haobao_xh_poster_rrwz(); }); //popup.close(); setTimeout(function() { $('.haobao_xh_poster_box').addClass("haobao_xh_poster_box_show"); $('.haobao_xh_poster_closekey').off().on('click', function(e) { $('.haobao_xh_poster_box').removeClass("haobao_xh_poster_box_show").on('webkitTransitionEnd transitionend', function() { $('#haobao_xh_poster_box').remove(); haobao_xh_poster_start_wlat = 0; }); return false; }); }, 60); } } } var new_haobao_xh_user_share, is_haobao_xh_user_share = 0; var as = navigator.appVersion.toLowerCase(), isqws = 0; if (as.match(/MicroMessenger/i) == "micromessenger" || as.match(/qq\//i) == "qq/") { isqws = 1; } if(isqws == 1){ if(typeof haobao_xh_user_share === 'function'){ new_haobao_xh_user_share = haobao_xh_user_share; is_haobao_xh_user_share = 1; } var haobao_xh_user_share = function(){ if(is_haobao_xh_user_share == 1){ isusershare = 0; new_haobao_xh_user_share(); if(isusershare == 1){ return false; } } isusershare = 1; show_haobao_xh_poster_ykzn(); return false; } } </script> <div class="back2top"><a href="javascript:$('html, body').animate({scrollTop:0}, 200);void(0);"> </a></div> <script type="text/javascript"> var js_page = 1,js_pageid = 'sWyk855581'; $(function(){ Dhistory(js_pageid); Dpull(js_pageid); Ditem(js_pageid); }); </script> </div> </body> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?d68308fbdf8b869ae836476178add8db"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?bf42e13835ff8bb4fd3d47d2cab4bb00"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </html>