响应式网页设计与SEO
<div style="color: black; text-align: left; margin-bottom: 10px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">所说</span>“响应式网页设计(Responsive Web Design)”<span style="color: black;">亦</span><span style="color: black;">便是</span>自适应，<span style="color: black;">便是</span><span style="color: black;">能够</span>自动识别屏幕宽度、并做出相应<span style="color: black;">调节</span>的网页设计。<span style="color: black;">日前</span>这种设计<span style="color: black;">已然</span>出<span style="color: black;">此刻</span>越来越多的国内网站上，<span style="color: black;">日前</span>Google<span style="color: black;">已然</span><span style="color: black;">知道</span><span style="color: black;">显示</span>鼓励响应式网页设计。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://p3-sign.toutiaoimg.com/3552/503043793~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1730044508&x-signature=WWau%2FctPrQVZvZwqAxFw5KzNYr4%3D" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(图一，响应式网页设计)</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">一般</span>在浏览网页时，手机上和电脑上<span style="color: black;">没法</span><span style="color: black;">表示</span>同一个网页，这<span style="color: black;">亦</span><span style="color: black;">引起</span>许多网页设计会自动转到特定的链接上，如上图所示，无论在PC端还是移动端，网页的<span style="color: black;">表示</span>其实都是一个版本，会随着屏幕的<span style="color: black;">体积</span>网页而改变。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">下面是<span style="color: black;">有些</span>例子：</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://p3-sign.toutiaoimg.com/3553/72894436~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1730044508&x-signature=m848uTroc9zA2RcRUd7BhPee%2BhA%3D" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(图二：响应式网页设计例子)</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://p3-sign.toutiaoimg.com/3549/8183655037~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1730044508&x-signature=AEAlvqZQv7lU46a7dWdYHbxk8Ok%3D" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(图三：迪士尼<span style="color: black;">机构</span>的网页)</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">运用</span>自适应网页设计有5个好处：</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1， 随着移动设备越来越多，<span style="color: black;">能够</span><span style="color: black;">提高</span>用户体验。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2， 该设计<span style="color: black;">无</span>网页版本区分，<span style="color: black;">因此</span>SEO的策略保持一致。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3， <span style="color: black;">能够</span>避免重复内容，专心<span style="color: black;">守护</span>这一个网页。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4， 保持网页的原有链接。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5， Google<span style="color: black;">亦</span><span style="color: black;">意见</span>优先采用响应式设计，<span style="color: black;">由于</span>无论是什么网页版本都是相同的HTML、相同的内容，Google最容易处理。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">响应式网页设计对SEO是友好的，这些<span style="color: black;">关联</span>技术还在<span style="color: black;">持续</span>演化中，还有许多尚待客服的<span style="color: black;">地区</span>。<strong style="color: blue;">下面<span style="color: black;">来讲</span>说它的缺陷：</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1， <strong style="color: blue;">对老版本IE支持<span style="color: black;">欠好</span>，</strong>这是一个致命的问题，尤其是IE6，<span style="color: black;">倘若</span>你的网站用户大多还采用老版本的IE的话(<span style="color: black;">意见</span>在统计工具里看一下)，就不适合做响应式网页设计了。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其实我<span style="color: black;">始终</span>想采用响应式网页设计，从新设计网页，但看到统计里的老版本IE用户依然<span style="color: black;">非常多</span>，只好放弃。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2， 例如一些小游戏站、视频站，<span style="color: black;">倘若</span>仅仅是网页采用了响应式设计，但里面的内容依然是只能在PC端打开的话，<span style="color: black;">此时</span>候就要认真<span style="color: black;">思虑</span>了。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">国外copyblogger的博客<span style="color: black;">说到</span>了一个很<span style="color: black;">尤其</span>的案例，<span style="color: black;">便是</span>迪士尼<span style="color: black;">机构</span>的网页。他说在迪士尼网页中有许多给小<span style="color: black;">伴侣</span>玩的网页游戏，有些游戏<span style="color: black;">能够</span>在桌上型电脑玩，<span style="color: black;">然则</span><span style="color: black;">倘若</span><span style="color: black;">运用</span>移动设备就<span style="color: black;">能够</span><span style="color: black;">没法</span><span style="color: black;">运用</span>。<span style="color: black;">因此呢</span>这个<span style="color: black;">状况</span>下，就必须做出抉择，放弃<span style="color: black;">运用</span>Responsive Web Design，或是修改游戏。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">写在最后：</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">从今年<span style="color: black;">起始</span>，响应式网页设计<span style="color: black;">逐步</span>流行开来，虽然很热门，<span style="color: black;">然则</span>并<span style="color: black;">无</span>太多网站采用这类的设计方式。</p>
</div>
页:
[1]