訊傳天下
|
|
網(wǎng)頁圖片的SEO交互怎么優(yōu)化？ 二維碼
發(fā)表時間：2021-07-14 12:33 許多SEOer都認為網(wǎng)站優(yōu)化就是單純依靠內(nèi)容優(yōu)化，但其實一個優(yōu)秀的網(wǎng)站，網(wǎng)站中的每一個元素都是有優(yōu)化的必要性的，如：框架優(yōu)化、導航優(yōu)化、代碼優(yōu)化、CSS優(yōu)化、JS優(yōu)化、圖片優(yōu)化等。 網(wǎng)頁圖片的SEO交互怎么優(yōu)化 1、圖片放大功能 該算法的思想是利用兩幅圖片，一幅是鼠標移動的小圖片，另一幅是大圖片，來動態(tài)地獲取鼠標的位置，并在小圖片上按比例地移動大圖片，使得其中的一部分可以以DIV方式顯示以實現(xiàn)放大效果。 html代碼： <div> <div> <div id="middlePicRemark"> <img id="imgGoodsPic" alt="" src="https://xunctx.com/images/20141009154623153.jpg" style="width:950px; height:950px; display:block;position: relative"></div> <div id="middlePicBox"> <span id="BigViewImage" style="outline-style: none; cursor: crosshair; display: block; position: relative; height: 396px; width: 396px;"><img id="" style="width: 396px; height: 396px; position: absolute; top: 0px; left: 0px;" src="https://xunctx.com/images/20141009154623153.jpg"> <div style='height:166.32px;width: 214.240837696335px;border-width: 1px;visibility: hidden;position: absolute;'> </div></span> </div> 2、圖集使用：JS圖片切換 通過計時器使得圖片每間隔幾秒可以自動切換，也可以通過鼠標的點擊控制播放的圖片。 html代碼： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>圖片自動切換</title> <link rel="stylesheet" type="text/css" > <script> window.onload=function(){ var oDiv=document.getElementById("box"); var oImg=oDiv.getElementsByTagName("img")[0]; var oSpan=oDiv.getElementsByTagName("span")[0]; var oP=oDiv.getElementsByTagName("p")[0]; var oUl=oDiv.getElementsByTagName("ul")[0]; var oLi=oUl.getElementsByTagName("li"); var arrUrl=['1.png','2.png','3.png','4.png']; var arrText=['圖片一','圖片二','圖片三','圖片四']; var num=0; //初始化 function fnTab(){ oImg.src=https://xunctx.com/arrUrl[num]; oSpan.innerHTML=1+num+'/'+arrUrl.length; oP.innerHTML=arrText[num]; for(var i=0;i<oLi.length;i++){ oLi[i].className='' } oLi[num].className='active' } fnTab(); //計時 var timer=null; function show(){ num++; num%=arrText.length; //計算播放哪張圖片 fnTab(); } function autoPlay(){ timer=setInterval(show,2000); //圖片播放間隔為2秒 } setTimeout(autoPlay,2000); //2秒后自動播放 function stopPlay(){ clearTimeout(timer); } oDiv.onmouseover=stopPlay; oDiv.onmouseout=autoPlay; for(var i=0;i<oLi.length;i++){ oLi[i].index=i; oLi[i].onclick=function (){ num=this.index; fnTab(); }; } }; </script> </head> <body> <div id="box"> <img src="https://xunctx.com/"/> <span>數(shù)量正在加載中...</span> <p>文字說明正在加載中...</p> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html> 3、選擇適當?shù)膱D片寬度大小(即響應圖片) 無論是電腦還是手機，都有很多不同大小的圖偏需要展現(xiàn)，如果做做的是響應性的網(wǎng)站，那么你就更加需要考慮圖片的大小尺寸問題。 移動端有太多的屏幕分辨率和大小，因此可能需要加載不同大小的圖像，從而節(jié)省了對站點的訪問和頁面呈現(xiàn)的效率。 4、使用CSSSprites減少HTTP的網(wǎng)絡(luò)資源請求 CSSSprites是一種網(wǎng)頁圖像處理方法，其中一個頁面所涉及的所有散亂的圖像或圖標都包含在一個大圖片中，因此只需要加載這個圖片，而不是很多圖片，這減少了許多HTTP請求。 5、站點圖片屬性值的添加 網(wǎng)站圖片上的屬性值(ALT和TITLE)也是圖片優(yōu)化中重要的一點，搜索引擎識別圖片的途徑首先就是從圖片的ALT屬性值抓取的，ALT屬性值就相當于這個圖片的標題、解釋說明。 6、CSS和CSS3制作簡單的圖標和動畫 隨著技術(shù)的發(fā)展，CSS3可以實現(xiàn)的效果越來越多，比如箭頭圖標，三角形，梯形等圖標，或者一些陰影效果，漸變的效果，可以用CSS制作一些圖片排列，使得頁面更美化。
|
