前端可以(yi)對底層SEO框架進(jìn)行諸多調整，前端今天來(lái)介紹一些常見(jiàn)的設置方式(shi)與可以注意的地方。
<head>
在head當中，前端我們可以定義許??多標簽讓搜索引擎方便拿到資料，設置例如：
<title></title>可以定義網(wǎng)頁(yè)的前端標題，會(huì )顯示在搜索結果的設置標題
<meta></meta>：在meta可以放置許多跟網(wǎng)站有關(guān)的資訊，例如keyword,前端description等，但似乎對SEO的設?置權重??越來(lái)越小了。
open="open"Graph：像是前端在fac??ebook,twitter等分享連結網(wǎng)站時(shí)顯示的文字與圖片等，常見(jiàn)的設置有og:title,og:type,og:image等等。
SemanticTag
HTML標簽雖然看起來(lái)只是前端個(gè)標簽，技術(shù)上來(lái)說(shuō)也可以從頭用<div>做到尾，設置但對瀏覽器、前端閱讀器、設置以及Voic┐(′?｀)┌eReader來(lái)說(shuō)，前端如果能用符合語(yǔ)意的標???簽的話(huà)，除了提升可讀性之外，對搜索引擎及閱讀器來(lái)說(shuō)也更容易解析與理解。
例如在(zai)HTML就有(you)<section>、<header>、<nav>、<a>、<button>、&???lt;summary>、<table>、<article>等等豐富的標(biao)簽可供使用，可以讓整個(gè)組???織看起來(lái)更一目了然。當然，對于前端開(kāi)發(fā)來(lái)說(shuō)似乎太理想，總是會(huì )有「這個(gè)元件該用哪個(gè)tag表達才好？」、「要用h2還是h4？」等等的問(wèn)題。也不需要過(guò)往矯正，看到div或span就好像??十惡不赦一樣。
這是在HTML5之后引入的新標準，目的是為了讓搜索引擎更容易解析內容。在html當中，你可以用itemscope以及??itemprop來(lái)定義一些屬性，目前Google、Yahoo!等搜索引擎都有支ヽ(′ー｀)ノ持。
例如在搜索(′▽?zhuān)?書(shū)籍的時(shí)候，有時(shí)會(huì )看到搜索結果有星星評價(jià)，雖然不一定是透過(guò)itemscope產(chǎn)生，但??如果有定義的話(huà)可以幫助搜索引擎更快解析資料也說(shuō)不定。
在schema.org有定義各種type與可以設定的欄位，方便各大廠(chǎng)商跟著(zhù)標準實(shí)作。
<p>(′▽?zhuān)?This exampl(′?_?`)e shows the addition of Accessibility metadata. Although these properties are nota for(′ω｀)mal 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'/> <m(′?ω?`)eta itemprop="accessibili(???)tyFeature" content='largePrint/CSSEnabled'/> <meta itemprop="acces??sibilityFeature" content='highContrast/CSSEnabled'/>?? <meta itemprop='accessibilityFeature' content="resizeText/CSSEna(╯°□°）╯︵ ┻━┻bled"/> <meta itemprop="accessibilityFeature" content='displayTransformability'/&g(′?_?`)t; <meta itemprop="accessibilityFeature" content="longDescription"/> <meta itemprop="accessibilityF??eature" content="alternativeText"/> <meta itemprヽ(′▽?zhuān)?ノop='accessibilityヽ(′▽?zhuān)?ノControl' content='fu??llKeyboardControl'/> <meta itemprop="accessibilityControl" con??tent='fullMouseControl'/> <meta itemprop="accessibilityHazard(//ω//)" content='noFlashi??ngHazard'/> <meta itemprop="aヾ(′▽?zhuān)??c??cessibilityHazard" content='noMotionSimulationHazard'/> <meta itemprop??="access??ibilityHazard" content='noSoundHazard'/> <meta itemprop='accessibilityAPI' content="ARIA"/> <ヽ(′▽?zhuān)?ノdl> <dt>Name:</dt> <dd item??prop="??name">Holt Physical Science</dd> <dt>Brief Synopsis:</dt> <d(′?_?`)d itemprop='description'>NIMAC-sourced textbook</dd> <dt&??gt;L??ong Synopsis:</dt> <dd>N/A</dd> <dt>Book Quality:</dt( ?ω?)> <dd>Publisher Qua??lity</dd> <dt>??;Book Size:&l??t;/dt> <dd><span itemprop="numberOfPages">598ヽ(′▽?zhuān)?ノ<??/span> Pages</dd> &l??t;dt&??gt;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> <d(╬?益?)d>06/08/10</dd> <dt>Copyright Date:</dt> <dd itemprop="copyright┐(′ー｀)┌Year??">2007</dd> <dt>Copyrighted By:</dt> <dd itemprop="copyrightHolder" itemtype="http://schema.org/Organization" itemscope=""><span itemprop='name'>Holt, Ri??nehart and Winston</span></dd> <dt>Adult content:</d(O_O)t> <dd><meta itemprop='isFamilyFriendly' content="true"/>No</dd> <??dt>Language:<(′-ι_-｀)/dt> <dd><meta(???) itemprop="inLanguage" content="en-US"/&g(′ω｀)t;English US</dd> &l??t;dt>Essential Images:</dt> <dd>861</dd> <dt>Des(°ロ°) !cribed Imag(′?｀)es:</dt> <dd>910</d??d> <dt>Categories:</dt> <??;dd><span itemprop="genre"&(′▽?zhuān)?gt;Educational Material┐(′?｀)┌s<??/span></dd> <dt>Grade Levels:</dt> <dd>Sixth grade, Seventh grade, Eighth grade</dd> <dt>Submitted By:</dt> <dd>Bookshare Staff&??lt;/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 restricti(′；ω；`)o???ns. Learn more in the NIMAC Support Center.</dd> </dl> <div class="bookReviews" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <h2&??gt;Reviews of Holt Physical Science (<ヽ(′▽?zhuān)?ノspan itemprop="re???viewCount">0</span> reviews)</h2> <div class='bookReviewScore'> <span&(′▽?zhuān)?gt;<span itemprop="ratingValue">0</span> - No Rating Yet</span> </div> </div></div>當然不只有Book，也有像是Moive、Article、Message等各式各樣的type可供使用，其實(shí)蠻適合當成Databaseschema參考的。
AMP
AMP是由Twitter與Googl(?????)e共同開(kāi)發(fā)的專(zhuān)案，目的是為了讓mobile能夠更快載入網(wǎng)??頁(yè)。透過(guò)文件中規范的語(yǔ)法與標簽(╬?益?)，你可以定義自己的AMP頁(yè)面，這樣在Google搜索時(shí)就可以幾乎秒載入網(wǎng)頁(yè)。雖然限制重重，但很適合文章、內容呈現的網(wǎng)站使用。
由于SPA必須要等到JavaScript載入后，如果直接用像是curl或是爬蟲(chóng)的方式抓取網(wǎng)頁(yè)，只會(huì )得到一坨空空的index.html，雖然搜索引擎也會(huì )先解析JavaScript，不過(guò)SSR還是(shi)最有效果的方式，而且也能大幅減少初始載入的時(shí)間。
不過(guò)要做到SSR的成本相當高，??不僅前端的程式碼要寫(xiě)的夠謹慎之外，后端部分??也要做不少處理，尤其是如果搭配redux的話(huà)要整合起來(lái)更加麻煩。目前在React.js與Vue.js都有對應的Framework可以幫ヽ(′ー｀)ノ助你做到這件事。（Next.js與Nuxt.j??s）
你可以用searchconsole來(lái)查看跟提交搜索請求，讓Google為你的網(wǎng)頁(yè)建立索引，也可以在上面看到使用者怎么進(jìn)入你的網(wǎng)頁(yè)還有關(guān)鍵字。
小結
前端能(neng)夠做到的SEO相當多，而這些小眉角累積起來(lái)就能有不小的助益。不過(guò)最重要的一點(diǎn)還是專(zhuān)注于網(wǎng)頁(yè)的內容，并且盡力創(chuàng )造優(yōu)質(zhì)的內容，而不是想辦法「騙」搜索引擎來(lái)拿流量。
中文 
