前端可以做到哪些SEO设置？-草根SEO博客

前端可以对底层SEO框架进行诸多调整，今天来介绍一些常见的方式与可以注意的地方。

<head>

在head当中，我们可以定义许多标签让搜索引擎方便拿到资料，例如：

<title></title>可以定义网页的标题，会显示在搜索结果的标题

OpenGraph：像是在facebook,twitter等分享连结网站时显示的文字与图片等，常见的有og:title,og:type,og:image等等。

SemanticTag

HTML标签虽然看起来只是个标签，技术上来说也可以从头用<div>做到尾，但对浏览器、阅读器、以及VoiceReader来说，如果能用符合语意的标签的话，除了提升可读性之外，对搜索引擎及阅读器来说也更容易解析与理解。

例如在HTML就有<section>、<header>、<nav>、<a>、<button>、<summary>、<table>、<article>等等丰富的标签可供使用，可以让整个组织看起来更一目了然。当然，对于前端开发来说似乎太理想，总是会有「这个元件该用哪个tag表达才好？」、「要用h2还是h4？」等等的问题。也不需要过往矫正，看到div或span就好像十恶不赦一样。

itemscope

这是在HTML5之后引入的新标准，目的是为了让搜索引擎更容易解析内容。在html当中，你可以用itemscope以及itemprop来定义一些属性，目前Google、Yahoo!等搜索引擎都有支持。

例如在搜索书籍的时候，有时会看到搜索结果有星星评价，虽然不一定是透过itemscope产生，但如果有定义的话可以帮助搜索引擎更快解析资料也说不定。

在schema.org有定义各种type与可以设定的栏位，方便各大厂商跟着标准实作。

<p>This example shows the addition of Accessibility metadata. Although these properties are nota formal enumeration, there is evolving consensus amongst accessibility experts forappropriate values for these properties. This example shows simple text values,as suggested by www.a11ymetadata.org.</p><div itemscope="" itemtype="http://schema.org/Book">   <meta itemprop="bookFormat" content="EBook/DAISY3"/>   <meta itemprop="accessibilityFeature" content="largePrint/CSSEnabled"/>   <meta itemprop="accessibilityFeature" content="highContrast/CSSEnabled"/>   <meta itemprop="accessibilityFeature" content="resizeText/CSSEnabled"/>   <meta itemprop="accessibilityFeature" content="displayTransformability"/>   <meta itemprop="accessibilityFeature" content="longDescription"/>   <meta itemprop="accessibilityFeature" content="alternativeText"/>   <meta itemprop="accessibilityControl" content="fullKeyboardControl"/>   <meta itemprop="accessibilityControl" content="fullMouseControl"/>   <meta itemprop="accessibilityHazard" content="noFlashingHazard"/>   <meta itemprop="accessibilityHazard" content="noMotionSimulationHazard"/>   <meta itemprop="accessibilityHazard" content="noSoundHazard"/>   <meta itemprop="accessibilityAPI" content="ARIA"/>   <dl>      <dt>Name:</dt>      <dd itemprop="name">Holt Physical Science</dd>      <dt>Brief Synopsis:</dt>      <dd itemprop="description">NIMAC-sourced textbook</dd>      <dt>Long Synopsis:</dt>      <dd>N/A</dd>      <dt>Book Quality:</dt>      <dd>Publisher Quality</dd>      <dt>Book Size:</dt>      <dd><span itemprop="numberOfPages">598</span> Pages</dd>      <dt>ISBN-13:</dt>      <dd itemprop="isbn">9780030426599</dd>      <dt>Publisher:</dt>      <dd itemprop="publisher" itemtype="http://schema.org/Organization" itemscope=""><span itemprop="name">Holt, Rinehart and Winston</span></dd>      <dt>Date of Addition:</dt>      <dd>06/08/10</dd>      <dt>Copyright Date:</dt>      <dd itemprop="copyrightYear">2007</dd>      <dt>Copyrighted By:</dt>      <dd itemprop="copyrightHolder" itemtype="http://schema.org/Organization" itemscope=""><span itemprop="name">Holt, Rinehart and Winston</span></dd>      <dt>Adult content:</dt>      <dd><meta itemprop="isFamilyFriendly" content="true"/>No</dd>      <dt>Language:</dt>      <dd><meta itemprop="inLanguage" content="en-US"/>English US</dd>      <dt>Essential Images:</dt>      <dd>861</dd>      <dt>Described Images:</dt>      <dd>910</dd>      <dt>Categories:</dt>      <dd><span itemprop="genre">Educational Materials</span></dd>      <dt>Grade Levels:</dt>      <dd>Sixth grade, Seventh grade, Eighth grade</dd>      <dt>Submitted By:</dt>      <dd>Bookshare Staff</dd>      <dt>NIMAC:</dt>      <dd>This book is currently only available to public K-12 schools and organizations in the      United States for use with students with an IEP, because it was created from files      supplied by the NIMAC under these restrictions. Learn more in the NIMAC Support Center.</dd>   </dl>   <div class="bookReviews" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">      <h2>Reviews of Holt Physical Science (<span itemprop="reviewCount">0</span> reviews)</h2>      <div class="bookReviewScore">         <span><span itemprop="ratingValue">0</span> - No Rating Yet</span>      </div>   </div></div>

当然不只有Book，也有像是Moive、Article、Message等各式各样的type可供使用，其实蛮适合当成Databaseschema参考的。

AMP

AMP是由Twitter与Google共同开发的专案，目的是为了让mobile能够更快载入网页。透过文件中规范的语法与标签，你可以定义自己的AMP页面，这样在Google搜索时就可以几乎秒载入网页。虽然限制重重，但很适合文章、内容呈现的网站使用。

SSR

由于SPA必须要等到JavaScript载入后，如果直接用像是curl或是爬虫的方式抓取网页，只会得到一坨空空的index.html，虽然搜索引擎也会先解析JavaScript，不过SSR还是最有效果的方式，而且也能大幅减少初始载入的时间。

不过要做到SSR的成本相当高，不仅前端的程式码要写的够谨慎之外，后端部分也要做不少处理，尤其是如果搭配redux的话要整合起来更加麻烦。目前在React.js与Vue.js都有对应的Framework可以帮助你做到这件事。（Next.js与Nuxt.js）

SearchConsole

你可以用searchconsole来查看跟提交搜索请求，让Google为你的网页建立索引，也可以在上面看到使用者怎么进入你的网页还有关键字。

小结

前端能够做到的SEO相当多，而这些小眉角累积起来就能有不小的助益。不过最重要的一点还是专注于网页的内容，并且尽力创造优质的内容，而不是想办法「骗」搜索引擎来拿流量。

相关文章推荐