最佳回答
從產品的角度來看，解決SEO優化與前后端分離(li)的問(wen)題(ti)，可(ke)以考(kao)慮以下幾點(dian)：
1. 前后端分離框(kuang)架(jia)選(xuan)擇：選(xuan)擇一種支持SEO優化的(de)前后端分離框(kuang)架(jia)，例(li)如React、Vue.js等。這(zhe)些框(kuang)架(jia)可以(yi)通(tong)過服務端渲(xuan)染（SSR）或預渲(xuan)染（Prerendering）的(de)方(fang)式生成靜(jing)態HTML頁面(mian)，以(yi)便搜索(suo)引擎可以(yi)正確地抓(zhua)取和索(suo)引。
2. 合理的URL設計：確保前端頁面(mian)的URL結(jie)構(gou)是直觀、語(yu)義化(hua)的，并且與網(wang)站內(nei)容相關。這樣有(you)助于(yu)搜索(suo)(suo)引擎理解網(wang)頁的內(nei)容和(he)結(jie)構(gou)，并提高網(wang)頁在搜索(suo)(suo)結(jie)果中的排名。
3. 頁面內(nei)容異步(bu)(bu)加載(zai)：通過使用異步(bu)(bu)加載(zai)技(ji)術，例如AJAX，可以在頁面加載(zai)完成(cheng)后(hou)再加載(zai)內(nei)容。這樣可以提高網頁的加載(zai)速度，并且在搜(sou)索引擎抓取網頁時，能夠獲(huo)取到完整的內(nei)容。
4. 合適的(de)頁面(mian)(mian)標(biao)題(ti)和(he)(he)描述(shu)：為每(mei)個(ge)頁面(mian)(mian)設置合適的(de)標(biao)題(ti)和(he)(he)描述(shu)，以(yi)便搜(sou)索引(yin)擎可以(yi)正確地理解和(he)(he)展示頁面(mian)(mian)的(de)內(nei)容。通過合理的(de)關鍵詞使用(yong)和(he)(he)描述(shu)的(de)編寫，可以(yi)提(ti)高頁面(mian)(mian)在搜(sou)索結果(guo)中的(de)曝光度。
5. 內部(bu)鏈接優化(hua)：在產品設計時，合(he)理(li)設置頁面之(zhi)間的內部(bu)鏈接。通過內部(bu)鏈接的設置，可(ke)以幫助(zhu)搜索引(yin)擎發現和索引(yin)網站(zhan)的其他頁面，提高(gao)整體網站(zhan)的可(ke)訪(fang)問性和可(ke)索引(yin)性。
6. 社交(jiao)分享和引用(yong)：設計產品時，考慮(lv)添(tian)加(jia)社交(jiao)分享和引用(yong)功能。當用(yong)戶通過社交(jiao)媒體分享或引用(yong)網站(zhan)(zhan)內容(rong)時，可以增(zeng)加(jia)網站(zhan)(zhan)的外部鏈接和曝光度(du)，有助于(yu)提高SEO優化效(xiao)果。
通過選(xuan)擇合適(shi)的前后端(duan)分(fen)離(li)框(kuang)架、優(you)化URL結構、異(yi)步加載內容、設置合適(shi)的頁面標題(ti)和(he)描述、優(you)化內部鏈接(jie)以(yi)及添(tian)加社交分(fen)享(xiang)和(he)引用功能，可以(yi)在產品設計中解決SEO優(you)化與前后端(duan)分(fen)離(li)的問題(ti)。
沒(mei)有滿意答案？試試 發布類似問(wen)題 或向 專家咨(zi)詢
專業人員一(yi)對一(yi)解答(da)
從產品的角度來看，解決SEO優化與前后端分離(li)的問(wen)題(ti)，可(ke)以考(kao)慮以下幾點(dian)：
1. 前后端分離框(kuang)架(jia)選(xuan)擇：選(xuan)擇一種支持SEO優化的(de)前后端分離框(kuang)架(jia)，例(li)如React、Vue.js等。這(zhe)些框(kuang)架(jia)可以(yi)通(tong)過服務端渲(xuan)染（SSR）或預渲(xuan)染（Prerendering）的(de)方(fang)式生成靜(jing)態HTML頁面(mian)，以(yi)便搜索(suo)引擎可以(yi)正確地抓(zhua)取和索(suo)引。
2. 合理的URL設計：確保前端頁面(mian)的URL結(jie)構(gou)是直觀、語(yu)義化(hua)的，并且與網(wang)站內(nei)容相關。這樣有(you)助于(yu)搜索(suo)(suo)引擎理解網(wang)頁的內(nei)容和(he)結(jie)構(gou)，并提高網(wang)頁在搜索(suo)(suo)結(jie)果中的排名。
3. 頁面內(nei)容異步(bu)(bu)加載(zai)：通過使用異步(bu)(bu)加載(zai)技(ji)術，例如AJAX，可以在頁面加載(zai)完成(cheng)后(hou)再加載(zai)內(nei)容。這樣可以提高網頁的加載(zai)速度，并且在搜(sou)索引擎抓取網頁時，能夠獲(huo)取到完整的內(nei)容。
4. 合適的(de)頁面(mian)(mian)標(biao)題(ti)和(he)(he)描述(shu)：為每(mei)個(ge)頁面(mian)(mian)設置合適的(de)標(biao)題(ti)和(he)(he)描述(shu)，以(yi)便搜(sou)索引(yin)擎可以(yi)正確地理解和(he)(he)展示頁面(mian)(mian)的(de)內(nei)容。通過合理的(de)關鍵詞使用(yong)和(he)(he)描述(shu)的(de)編寫，可以(yi)提(ti)高頁面(mian)(mian)在搜(sou)索結果(guo)中的(de)曝光度。
5. 內部(bu)鏈接優化(hua)：在產品設計時，合(he)理(li)設置頁面之(zhi)間的內部(bu)鏈接。通過內部(bu)鏈接的設置，可(ke)以幫助(zhu)搜索引(yin)擎發現和索引(yin)網站(zhan)的其他頁面，提高(gao)整體網站(zhan)的可(ke)訪(fang)問性和可(ke)索引(yin)性。
6. 社交(jiao)分享和引用(yong)：設計產品時，考慮(lv)添(tian)加(jia)社交(jiao)分享和引用(yong)功能。當用(yong)戶通過社交(jiao)媒體分享或引用(yong)網站(zhan)(zhan)內容(rong)時，可以增(zeng)加(jia)網站(zhan)(zhan)的外部鏈接和曝光度(du)，有助于(yu)提高SEO優化效(xiao)果。
通過選(xuan)擇合適(shi)的前后端(duan)分(fen)離(li)框(kuang)架、優(you)化URL結構、異(yi)步加載內容、設置合適(shi)的頁面標題(ti)和(he)描述、優(you)化內部鏈接(jie)以(yi)及添(tian)加社交分(fen)享(xiang)和(he)引用功能，可以(yi)在產品設計中解決SEO優(you)化與前后端(duan)分(fen)離(li)的問題(ti)。
網站前后臺分離，通(tong)常對SEO是(shi)沒(mei)有影響(xiang)的。沒(mei)有影響(xiang)主要是(shi)有以(yi)下原因：
從(cong)SEO的(de)定(ding)(ding)義(yi)來看，SEO是通過站(zhan)(zhan)(zhan)內優(you)化主要包(bao)括（網站(zhan)(zhan)(zhan)結構的(de)調(diao)整(zheng)、網站(zhan)(zhan)(zhan)內容的(de)建設、網站(zhan)(zhan)(zhan)代碼的(de)優(you)化等）和站(zhan)(zhan)(zhan)外(wai)優(you)化主要包(bao)括（網站(zhan)(zhan)(zhan)站(zhan)(zhan)(zhan)外(wai)推廣(guang)以及(ji)網站(zhan)(zhan)(zhan)品牌(pai)建設等）從(cong)而使網站(zhan)(zhan)(zhan)滿(man)足搜索引擎收錄排(pai)名(ming)(ming)需求進而提高關(guan)鍵詞(ci)排(pai)名(ming)(ming)，最終達(da)到品牌(pai)推廣(guang)以及(ji)網站(zhan)(zhan)(zhan)獲(huo)得(de)免費(fei)流量的(de)目的(de)。從(cong)SEO的(de)定(ding)(ding)義(yi)中(zhong)不難發現，網站(zhan)(zhan)(zhan)SEO的(de)整(zheng)個過程中(zhong)網站(zhan)(zhan)(zhan)后臺并(bing)沒有發揮很(hen)大的(de)作用(yong)，他也不參與網站(zhan)(zhan)(zhan)排(pai)名(ming)(ming)的(de)。
明(ming)確網(wang)站(zhan)前臺與后臺具(ju)體是(shi)(shi)干什么的(de)，前臺顧名(ming)思義是(shi)(shi)展(zhan)現給用(yong)戶的(de)；SEO人員(yuan)在做網(wang)站(zhan)優化時(shi)的(de)各種操作(zuo)都是(shi)(shi)在網(wang)站(zhan)后臺進(jin)行的(de)，換句話說(shuo)說(shuo)網(wang)站(zhan)后臺是(shi)(shi)前臺的(de)支撐(cheng)，但是(shi)(shi)他對SEO并(bing)沒(mei)有太大的(de)影(ying)響。網(wang)站(zhan)前后臺分離(li)需(xu)要(yao)注意以下兩(liang)點：為了(le)便于網(wang)站(zhan)前臺能夠正常(chang)打開網(wang)站(zhan)后臺服務器一定要(yao)穩(wen)定；
為了SEO的(de)最終目(mu)的(de)，網站后臺該有的(de)文(wen)件例如：網站地圖、robots文(wen)件等，都(dou)不能缺少。
2019-04-16-09:22 于公(gong)司假如面試官問你：前后(hou)端分離項目如何(he)做seo？1、使用(yong)prerender，如果說不用(yong)prerender，你怎么回答呢？2、先去 www.baidu.com/robots.txt 找(zhao)出常(chang)見的(de)爬(pa)蟲(chong)，然后(hou)在(zai) ngnix 服務器(qi)上判斷訪問者的(de) User Agent （劃(hua)重點）是(shi)(shi)否是(shi)(shi)爬(pa)蟲(chong)。如果是(shi)(shi)：用(yong) ngnix 反向代理到我(wo)們自己用(yong) nodejs + puppeteer 實現的(de)爬(pa)蟲(chong)服務器(qi)。知識點：puppeteer ：谷歌推出，可以理解為無界面版本(ben)的(de) chrome 瀏(liu)覽器(qi)，通俗說就是(shi)(shi)可以在(zai)服務端使用(yong)瀏(liu)覽器(qi)（頁面不展示而已）。實際上是(shi)(shi)通過(guo)調用(yong)Chrome DevTools開放的(de)接口與Chrome通信，Chrome DevTools的(de)接口很復雜，但puppeteer對其進行了封裝，我(wo)們調用(yong)起來還是(shi)(shi)很方便(bian)的(de)。
SEO你(ni)可以找(zhao)一位專員(yuan)來作為溝通的(de)橋梁。
畢竟一個合格(ge)的SEO對(dui)前(qian)端和后臺都是(shi)有所(suo)了解的。
seo方面更在乎的(de)(de)是前端展現內(nei)容，并不(bu)是說頁面上線之(zhi)后，就符合搜索引擎需(xu)求的(de)(de)，關鍵(jian)詞(ci)等(deng)戰(zhan)略性(xing)的(de)(de)，還需(xu)要我們(men)重點考慮(lv)。
可以利(li)用(yong)現在的前(qian)端框架做(zuo)同構支持(chi)（目(mu)前(qian)熱(re)門的前(qian)端框架都支持(chi)同構）。在初次網址訪問時由服務器渲(xuan)染頁面內容，Client端資源(yuan)做(zuo)CDN，這樣就可以支持(chi)SEO優(you)化了。
如果(guo)使用的是angularjs的話，可以(yi)看(kan)看(kan)Prerender-AngularJSSEO,BackboneJSSEO,orEmberJSSEO
分離(li)的(de)痛(tong)點是分離(li)后(hou)，接(jie)口提供(gong)不及時，文檔不完善，模擬數(shu)據不方便等(deng)。說一下(xia)我們的(de)解決辦法：
1）webpack設置proxy，這個通過webpack文檔或GOOGLE一下可以解(jie)決。
2）第二步就(jiu)是需要(yao)在(zai)后端(duan)提供接(jie)(jie)口(kou)(kou)及數(shu)據(ju)和接(jie)(jie)口(kou)(kou)文(wen)檔，而因為前后端(duan)很可能(neng)是并(bing)行(xing)開發的，所以(yi)在(zai)真(zhen)實(shi)接(jie)(jie)口(kou)(kou)出來(lai)之前需要(yao)前端(duan)模擬接(jie)(jie)口(kou)(kou)及數(shu)據(ju)，及數(shu)據(ju)文(wen)檔然(ran)后在(zai)真(zhen)實(shi)接(jie)(jie)口(kou)(kou)出來(lai)后，切換到真(zhen)實(shi)接(jie)(jie)口(kou)(kou)調試，我們之前也遇(yu)到過此問(wen)題，所以(yi)抽時間自(zi)己做了個mocksever 系統，功能(neng)包括(kuo):
支持可視化編輯JSON接(jie)口數據及接(jie)口文檔
支持GET、POST、PUT、DELETE請求類型
支持指定返(fan)回狀態(tai)碼(ma)，默認200
支持延時返回數據
支持mockjs
支持單個(ge)接口(kou)(kou)代理到真(zhen)實服務器(開發(fa)(fa)過程中(zhong)某個(ge)接口(kou)(kou)使用模擬數據,當此接口(kou)(kou)已開發(fa)(fa)完成后,可將指(zhi)(zhi)定接口(kou)(kou),通過此服務指(zhi)(zhi)向到真(zhen)實接口(kou)(kou)上)