整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
于網站不收錄，需要分情況討論，
比如：新站點不收錄、產品或者案例頁面不收錄、新發文章不收錄、欄目頁面不收錄、聚合頁面不收錄、當天不收錄、一周或者一個月不收錄、網站被K、降權后恢復不收錄等。。。。。
不同的情況需要不同的方法去應對。
今天科牛就結合自己的經驗，分享下我處理這些問題的心得。
一、新站點，一個月了還沒有收錄
首先需要排除服務器訪問慢、被人攻擊的情況，其次排除網站上有灰色、違規內容，再者排除網站源代碼DIV+CSS的問題。
以上都沒問題，那么就去發外鏈，最簡單的，百度搜“超級外鏈工具”，這個是免費的。
如果覺得免費的不夠，可以購買付費外鏈，幾十塊錢幾百條。
然后再去換友鏈，一般情況下，你一個新站點，沒收錄沒排名是很難換到高質量的友鏈的，此時，可以去添加一些友鏈交換的qq群，在群里找個大哥，給人發個紅包，讓人幫你掛幾天。
當然，也可以直接去百度搜索跟你同類型的網站，聯系對方站長，談好價格直接付費購買，這種方法雖然笨一點，但交換來的友情鏈接質量一般比較高，因為人家有排名啊！
如果以上工作都做了，最后還是沒有收錄，那么可以到百度站長平臺提交反饋，請百度工作人員幫忙排查原因并放出首頁收錄。
目前，根據科牛平時給客戶搭建的新網站案例來看，正常情況，新站點的首頁收錄時間一般在兩周到一個月之間，如果超過一個月還沒有收錄，大概率是有問題了，如果你的外鏈、友鏈都做了，文章每天也按時發布，那么基本上可以判斷網站服務器、網站內容、源代碼這三項中，必定有一個出問題了，這時就需要進一步深入排查了！
二、企業站，已經搭建了一段時間，首頁已收錄，但新發布的文章遲遲不收錄
首先排查原因：
網站是否有中途改版或更改首頁關鍵詞的情況，這一點是非常影響百度收錄的因素，盡量不要對網站進行太大的改動，關鍵詞等在建站之初就應該確定好。
企業站，基本上都有一個通病，就是內容一般都不持續更新或更新數量少，這也就導致百度抓取次數會比較低，抓取不及時就會導致收錄慢或不收錄。
且企業站存在嚴重的內容同質化問題，很多站點都是采集復制的內容，文章原創度差。
建議：
企業站或者中小站長，首先要做到人工定時更新養站，比如日均5篇，內容盡可能偽原創或原創，風雨無阻，有能力的話保證每個頁面或欄目頁做到內容更新，這樣即可提升網站抓取的次數以及提升收錄速度。
另外，一年以內的新站點，在第3個月到第7個月之間的某一段時間里，網站會有一個秒收期，就是在這段時間內，不論你的網站發布任何內容都會秒收，這時，配合上權重操作，是上排名的黃金期！
過了這個黃金期之后，就會繼續出現不收錄的情況，原因是爬蟲低質。
此時，還是老套路，花錢買外鏈、換友鏈，增加非首頁的頁面抓取頻次。
3個月后，如果發現網站還是老樣子，不要慌，先去看網站索引，只要索引一直增長就沒問題，因為索引是網站收錄的根本，只要索引不掉，即使收錄掉了，過幾天必定也會漲上來。
三、網站被降權、被K，內容頁不收錄怎么辦？
網站被k或降權，首要需要找出降權的原因，且期間要保證網站能正常訪問，保證網站正常更新，及時提交新增加的鏈接。
好好的站點被K被懲罰了，那肯定是自己的問題，百度官方后臺是有記錄每一個站點是否懲罰過的，可以查看下具體是什么程度。
首頁K了的話，請繼續通過內容頁面補救，時間會很長；
欄目或頻道頁被K了的話，請開設其它欄目或二級域名補救，時間特長；
全站被K了的話，我建議你放棄，更換其它域名吧；
優化網站還是要正規手法，不然代價都是很大的！
網站被K或者降權的恢復周期，一般1個月起步，3-6個月是正常情況！
四、網站新增加的聚合頁面不收錄、無排名
聚合頁想要有收錄和排名，最常見的是標簽tag做法，通過標簽的超鏈接來增加聚合頁面的權重。
分析過很多客戶的網站，科牛發現，tag頁的收錄和排名一般都是優于文章頁的。
如果你的聚合頁面沒有收錄和排名，那么問題可能在于：
1、標題的寫法存在問題
比如，tdk沒有設置好，標題只有一個關鍵詞或者是幾個關鍵詞的堆疊，并沒有拓展及延伸其他的相關需求。
2、聚合頁面的內容相關程度低，內容質量少
作為一個聚合頁面，一定是需要大量的文章內容來支撐的，建議每個聚合頁面至少10條以上內容，盡可能做到無空白頁面。
3、網站自身權重低
網站首頁都沒什么權重，次級的聚合頁面就更不用提了，建議適當交換一些內頁友情鏈接，最好是有相關性的，10個左右即可，不用太多！
五、企業站分類欄目排名的seo優化方法
企業站的重心一般都會集中在產品列表頁面，但一般來說，產品列表頁面想要獲取比較大的流量是很困難的，因此可以直接把產品頁面設置到首頁，因為首頁的收錄會比欄目頁快很多，再配合上首頁的營銷頁面，有助于更快的把產品關鍵詞排名上去，不過需要注意的是，首頁必須時刻保持更新！
以上，就是在日常工作中給客戶解決問題時，科牛積累的一些經驗心得，希望能夠給廣大站長或者seo從業人員一點幫助！
今天就來聊聊在為了您更好的體驗，本文章聊聊如何僅支持谷歌瀏覽器訪問查看頁面？這篇文章中提到的瀏覽器兼容問題，以此篇文章來證明自己并非不了解瀏覽器兼容性問題，而是當時其他因素導致選擇了一刀切的方法來處理需求（我就是一個不粘鍋）。
嘿，xdm~既然點進來了，不妨就繼續看下去吧^_^
所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。
上面的定義就是大白話，我們來看看來自百度百科的權威解釋：瀏覽器兼容性問題又被稱為網頁兼容性或網站兼容性問題，指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。在網站的設計和制作中，做好瀏覽器兼容，才能夠讓網站在不同的瀏覽器下都正常顯示。而對于瀏覽器軟件的開發和設計，瀏覽器對標準的更好兼容能夠給用戶更好的使用體驗。
造成瀏覽器兼容性問題的根本原因就是各瀏覽器使用了不同的內核，并且它們處理同一件事情的時候思路不同。
怎么理解上述文字？即：不同瀏覽器使用的內核及所支持的HTML等網頁語言標準不同，以及用戶客戶端的環境不同（如分辨率不同）造成了顯示效果不能達到理想效果。
前端開發經常需要檢查瀏覽器的兼容性，這里推薦(Can I Use)這個查詢網站。它是一個針對前端開發人員定制的一個查詢CSS、JS、HTML5、SVG在主流瀏覽器中特性和兼容性的網站，可以很好的保證網頁在瀏覽器中的兼容性。有了這個工具我們就可以快速地了解到代碼在各個瀏覽器中的兼容情況了，強烈推薦一波，大家趕緊去體驗吧?！界面效果如下圖所示：
工具只能給我們顯示查詢的特性在不同瀏覽器上的兼容情況，至于如何解決兼容問題還得看下述的解決辦法→
1、不同瀏覽器的標簽默認的內外邊距不同
解決方案：*{margin: 0; padding: 0;}
其實清除瀏覽器自帶的默認樣式，每個前端開發者所用的方法大同小異，這里給出我選用的清除默認樣式的重置樣式代碼：
/**
* 該文件用于清除瀏覽器樣式
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
padding:0;
margin:0;
border:0;
outline: 0;
font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
word-wrap:break-word;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
-webkit-tap-highlight-color:rgba(255,255,255,0);
}
ul, ol {
list-style-type: none;
}
textarea {
resize: none;
}
/*去除input button默認樣式*/
input, button, textarea {
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(255, 225, 225, 0);
padding: 0;
border: 0;
outline: 0;
}
// 修改placeholder屬性默認文字顏色
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
/* WebKit browsers */
color: #999;
}
input:-moz-placeholder, textarea:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #999;
}
input::-moz-placeholder, textarea::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #999;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #999;
}除了自己定義清除默認樣式的代碼，也可選擇引用別人寫好的成熟插件Normalize.css來清除默認樣式；
2、圖片加a標簽在IE9中會有邊框
解決方案：img{border: none;}
3、IE6及更低版本浮動元素，浮動邊雙倍邊距
解決方案：不使用margin，使用padding
4、IE6及更低版本中，部分塊元素擁有默認高度
解決方案：給元素設置font-size: 0;
5、a標簽藍色邊框
解決方案：a{outline: none;}
6、IE6不支持min-height屬性
解決方案：{min-height: 200px; _height: 350px;}
7、IE9以下瀏覽器不能使用opacity
解決方案：Firefox/Chrome/Safari/Opera瀏覽器使用opacity；IE瀏覽器使用filter
opacity: 0.7; /*FF chrome safari opera*/
filter: alpha(opacity:70); /*用了ie濾鏡,可以兼容ie*/8、IE6/7不支持display:inline-block
解決方案：{display: inline-block; *display: inline;}
9、cursor兼容問題
解決方案：統一使用{cursor: pointer;}
10、IE6/7中img標簽與文字放一起時，line-height失效的問題
解決方案：文字和<img>都設置float
11、table寬度固定，td自動換行
解決方案：table設置 {table-layout: fixed}，td設置 {word-wrap: break-word}
12、相鄰元素設置margin邊距時，margin將取最大值，舍棄小值
解決方案：不讓邊距重疊，可以給子元素加一個父元素，并設置該父元素設置：{overflow: hidden}
13、a標簽css狀態的順序
解決方案：按照link--visited--hover--active的順序編寫
14、IE6/7圖片下面有空隙的問題
解決方案：img{display: block;}
15、ul標簽在Firefox中默認是有padding值的，而在IE中只有margin有值
解決方案：ul{margin: 0;padding: 0;}
16、IE中li指定高度后，出現排版錯誤
解決方案：設置line-height
17、ul或li浮動后，顯示在div外
解決方案：清除浮動；須在ul標簽后加<div style="clear:both"></div>來閉合外層div
18、ul設置float后，在IE中margin將變大
解決方案：ul{display: inline;}，li{list-style-position: outside;}
19、li中內容超過長度時，用省略號顯示
li{
width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}20、div嵌套p時，出現空白行
解決方案：li{display: inline;}
21、IE6默認div高度為一個字體顯示的高度
解決方案：{line-height: 1px;}或{overflow: hidden;}
22、在Chrome中字體不能小于10px
解決方案：p{font-size: 12px; transform: scale(0.8);}
23、谷歌瀏覽器上記住密碼后輸入框背景色為黃色
input{
background-color: transparent !important;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
-webkit-text-fill-color: #333 !important;
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
background-color: transparent !important;
background-image: none !important;
transition: background-color 5000s ease-in-out 0s;
}24、CSS3兼容前綴表示
寫法 | 內核 | 瀏覽器 |
-webkit- | webkit渲染引擎 | chrome/safari |
-moz- | gecko渲染引擎 | Firefox |
-ms- | trident渲染引擎 | IE |
-o- | opeck渲染引擎 | Opera |
如：
.box{
height: 40px;
background-color: red;
color: #fff;
-webkit-border-radius: 5px; // chrome/safari
-moz-border-radius: 5px; // Firefox
-ms-border-radius: 5px; // IE
-o-border-radius: 5px; // Opera
border-radius: 5px;
}1、事件對象的兼容
e=ev || window.event
2、滾動事件的兼容
scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
3、阻止冒泡的兼容
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble=true;
}4、阻止默認行為的兼容
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue=false;
}5、添加事件監聽器的兼容
if (target.addEventListener) {
target.addEventListener("click", fun, false);
} else {
target.attachEvent("onclick", fun);
}6、ajax創建對象的兼容
var xhr=null；
if (window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else {
xhr=new ActiveXObject("Microsoft XMLHTTP");
} 7、鼠標按鍵編碼的兼容
function mouse (ev) {
var e=ev || window.event;
if (evt) {
return e.button;
} else if (window.event) {
switch (e.button) {
case 1: return 0;
case 4: return 1;
case 2: return 2;
}
}
}8、在IE中，event對象有x，y屬性，Firefox中與event.x等效的是event.pageX，而event.pageX在IE中又沒有
x=event.x ? event.x : event.pageX;
9、在IE下，event對象有srcElement屬性，但是沒有target屬性；Firefox下，event對象有target屬性，但是沒有srcElement屬性
var source=ev.target || ev.srcElement;
var target=ev.relatedTarget || ev.toElement;10、在Firefox下需要用CSS禁止選取網頁內容，在IE用JS禁止
-moz-user-select: none; // Firefox
obj.onselectstart=function() {return false;} // IE11、innerText在IE中能正常工作，但在FireFox中卻不行
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('element').innerText="IE";
} else {
document.getElementById('element').textContent="Firefox";
}12、在Firefox下，可以使用const關鍵字或var關鍵字來定義常量；在IE下，只能使用var關鍵字來定義常量
解決方案：統一使用var關鍵字來定義常量
1、禁止iOS識別長串數字為電話
解決方案：<meta content="telephone=no" name="format-detection" />
2、禁止iOS彈出各種操作窗口
解決方案：-webkit-touch-callout:none
3、禁止Android手機識別郵箱
解決方案：<meta content="email=no" name="format-detection" />
4、禁止iOS和Android用戶選中文字
解決方案：-webkit-user-select:none
5、iOS下取消input在輸入的時候英文首字母的默認大寫
解決方案：<input autocapitalize="off" autocorrect="off" />
6、Android下取消輸入語音按鈕
解決方案：input::-webkit-input-speech-button {display: none}
7、在移動端修改難看的點擊的高亮效果，iOS和安卓下都有效
解決方案：* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
8、iOS下input為type=button屬性disabled設置true，會出現樣式文字和背景異常問題
解決方案：使用opacity=1;
9、input為fixed定位，在iOS下input固定定位在頂部或者底部，在頁面滾動一些距離后，點擊input(彈出鍵盤)，input位置會出現在中間位置
解決方案：內容列表框也是fixed定位，這樣不會出現fixed錯位的問題
10、移動端字體小于12px使用四周邊框或者背景色塊，部分安卓文字偏上bug問題
解決方案：可以使用整體放大1倍(width、height、font-size等等)，再使用transform縮放
11、在移動端圖片上傳圖片兼容低端機的問題
解決方案：input 加入屬性accept="image/*" multiple
12、在Android上placeholder文字設置行高會偏上
解決方案：input有placeholder情況下不要設置行高
13、overflow: scroll或auto；在iOS上滑動卡頓的問題
解決方案:加入-webkit-overflow-scrolling: touch;
14、iOS中日期如：2022-02-22 00:00:00格式的時間轉時間戳不成功
解決方案：需要將時間中的'00:00:00去除之后才能轉為時間戳'
15、iOS中需要將時間格式轉為/，如：2022/02/22
let date='2022-02-22';
let dateStr=date.replace(/-/g, '/'); // 2022/02/2216、移動端click300ms延時響應
解決方案：使用Fastclick
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );17、移動端1px邊框問題
解決方案：原先元素的border去掉，然后利用:before或者:after重做border，并transform的scale縮小一半，原先的元素相對定位，新做的border絕對定位
.border-1px{
position: relative;
border:none;
}
.border-1px:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}至此，關于瀏覽器兼容性問題的相關知識和解決方案就聊完了，最后還穿插了關于移動端兼容的問題描述，肯定還有很多沒有總結到的兼容性問題，希望xdm在下方評論↘提供。
看文至此，順手點個贊再走唄，3Q^_^
伙伴們，如果覺得本文對你有些許幫助，點個或者?個關注在走唄^_^ 。另外如果本文章有問題或有不理解的部分，歡迎大家在評論區評論指出，我們一起討論共勉。
隨時隨地給大家提供技術支持的葡萄又來了。這次的事情是這樣的，提供demo屬于是常規操作，但是前兩天客戶突然反饋壓縮傳輸模塊拋出異常，具體情況是壓縮內容傳輸到服務端后無法解壓。
由于代碼沒有發生任何變動，前端相關依賴也沒有升級，服務端java版本也沒有變化，所以我們可以推定為環境問題；進一步仔細檢查，經過反復對比后突然發現服務端收到的壓縮內容變長了；和前端請求內容進行對比，發現所有的\r和\n都變成了\r\n。
綜合以上分析我們初步判斷：問題出在了瀏覽器轉譯之中。為了驗證猜想是否正確，葡萄將chrome版本回退到92版，異常消失，服務端接收的內容也沒有被替換。
問題是順利解決了，但是Chrome POST數據內容居然會在傳輸過程中發生變化。一直擅長大前端技術的葡萄絕不認輸，為了弄明白這一原因，我們來看看POST的細節操作到底有什么。
控制字符
首先我們需要搞清楚幾個控制字符的含義。
在代碼管理中，在不同操作系統下CRLF會有很大不同。下面在不同系統中為大家實際演示一下：
在Mac Visual Code中新建一個文檔默認為LF，而Windows中為CRLF，可以選擇切換行尾序列的內容的類型。
Mac版Visual Code
Windows 版
面對這種情況，需要開發者統一CRLF，以免不同操作系統開發導致代碼管理的混亂。
弄明白了在不同系統中，控制字符會出現不同的原因，接下來我們就需要搞清楚為什么POST的數據在傳輸過程中發生了變化。
我們來寫個簡單Demo測試一下。先在頁面上放一個允許換行的textarea， 輸入帶換行的文本，獲取內容看到只有\n轉譯。通過FormData直接post數據到服務端，然后直接返回，看到\n全部變成了\r\n。
var uploadData=document.getElementById("ta").value
var formData=new FormData();
formData.append("data", uploadData)
fetch("http://localhost:8088/spread/getpdf", {
body: formData,
method: "POST"
}).then(resp=> resp.text())
.then(text=> {
console.log(JSON.stringify(text));
document.getElementById("result").innerHTML=JSON.stringify(text)
})
瀏覽器標識：
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36
回退Chrome到92版本，發送和接收文本此時編為一致：
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36
深入探究這一原因，我們了解到互聯網請求意見稿2046（RFC 2046）4.1.1.中有明確說明：
“ The canonical form of any MIME‘text’ subtype MUST always represent a
line break as a CRLF sequence. “
這里我們可以看到所有的文本類型都要使用CRLF，而Chrome只是修復了一個“bug”，對于用戶而言，在普通文本中用戶感知不到CR、LF和CRLF的區別，但是當使用場景轉換到解壓的文本內容就變得十分重要。
大家都知道POST是HTTP的一個常用方法，而另一個我們常用的方法是GET。
關于GET和POST區別以及使用相關問題這里不做贅述，要解決POTS傳輸的數據變化問題，最相關的是Content-Type。
首先我們來了解Content-Type和MIME分別是什么：
Content-Type，內容類型，一般是指網頁中存在的Content-Type，用于定義網絡文件的類型和網頁的編碼，決定瀏覽器將以什么形式、什么編碼讀取這個文件，這就是經常看到一些Asp網頁點擊的結果卻是下載到的一個文件或一張圖片的原因。
在POST中常用的Content-Type有application/x-www-form-urlencoded、multipart/form-data和application/json。
1、 application/x-www-form-urlencoded
將需要內容提交表單后，內容會按照name1=value1&name2=value2的方式編碼，并且key和valu e都會進行URL轉碼。
對于"\n"和"\r" 會被轉碼為'%0A'和'%0D'，通過這種傳輸方式，避免了瀏覽器的對CRLF的修正可以解決以上問題。
但是這樣轉碼會增加文本長度，原本1個字符變成了3個，結果是壓縮的文本又變長了。
2、multipart/form-data
當需要想服務器提交文件時，就需要使用這種方式。前面代碼中我們可以看到當formData是普通文本是會被修正，為了解決這個情況我們可以將string內容封裝到Blob中作為文件流傳輸，來避免修正。
這樣傳輸，服務端會以文件方式收到內容，直接讀取Stream內容；對于壓縮文本，這種處理方式最優。
var formData=new FormData();
formData.append("data", uploadData)
formData.append("data1", new Blob( [uploadData]))
上圖展示了同樣的內容，使用不同方式進行傳輸。
3、 application/json
Json也是目前比較流行的傳輸方式，json的內容在post傳輸中也不會被改變，如果文本內容不長，也是不錯的方式。
fetch("http://localhost.charlesproxy.com:8088/spread/postjson", {
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({data: uploadData}),
method: "POST"
}).then(resp=> resp.text())
.then(text=> {
console.log(JSON.stringify(text));
document.getElementById("result").innerHTML=JSON.stringify(text)
})
作為一個前端er，除了HTML、CSS和Javascript三大件，熟練使用Axios等類庫調用API，更不可忽視的是要了解如何調試網絡請求，在項目出現問題時能快速定位到問題的所在。
這里提供了在 Angular 框架下動態加載js文件時返回 Content-Type 為text/html 的Demo，大家感興趣的可以自行下載試試。
本人花費2個月時間，整理了一套JAVA開發技術資料，內容涵蓋java基礎，分布式、微服務等主流技術資料，包含大廠面經，學習筆記、源碼講義、項目實戰、講解視頻。
希望可以幫助一些想通過自學提升能力的朋友，領取資料，掃碼關注一下
記得轉發+關注+私信
私信回復【2022面試資料】
領取更多學習資料
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
