discuz网站前端代码优化思路
一、head标签中的局部
1.URL设计
URL尽量含有通用已成趋向的移动命名,例如“m./wap./3g./mobi./mobile./mob/wml/”,能够在子域名等方面表现
2.页面顶部的doctype标签
作为协议的重要局部,doctype中能否移动化也很重要,检查能否存在与移动相关的声明,如这些关键词,openmobilealliance, xhtml-mobile, xhtml-basic,wapforum,dtd compact html
3.meta标签中的viewport属性和x-ua-compatible 属性
viewport,移动前端开发中最重要的标签,响应式设计的根基,假如你的页面是恪守响应式设计的,那么阐明这些页面对移动设备有友好的输出。
典型的的viewport代码是这样的,,判别移动与否的关键属性值为width,假如width=device-width这是典型的移动友好的设计,增加断定为移动页面的砝码,假如width有详细值,且值大于典型的移动屏幕(应该小于600),那么该页面被断定为PC页面的几率大大增加。
但,META中还有一个很共同的属性作为SEO人员应该很少接触到,那就是x-ua-compatible 属性,该属性是PC意味十分激烈的功用性代码。示例代码如此,,从百度工程师处得知,该代码会有较强暗示当前页面为PC页面的功用,需选择性运用。
4.title中的移动暗示
制造移动页面时,在title标签中写明:“移动版”、“手机版”、“WAP版”、“触屏版”不只是照顾用户体验的计划,也利于页面的移动辨认,反之PC页面要慎重运用这些文案。
5.链接link标签的media和href属性中需求留意的细节(多为款式文件)
media属性值为screen时,表示屏幕中的显现款式,link的href所填写的URL(根本为款式文件的URL)就比拟重要了,一定水平加大不同设备的侧重。此时URL中尽量呈现/wap,/mobile/这样的命名,同URL设计一样,用于进步页面辨认为移动的效率和概率。
如URL中含有pc字样则加大辨认为PC页面的几率。
6.一些通用的PC类辨认HTML代码
embed:经常用于嵌入多媒体
object:用于嵌入对象
marquee:老旧的滚动特效完成代码
iframe:想必网站优化人员很熟习了,典型的PC常用标签
这些典型的用于PC或者老旧的、HTML5曾经有更高效替代计划的旧标签,意味着运用它们将增加页面的PC属性,需求有目的地取舍。
7.一些javascript中典型的PC特征
加载swfobject、含有activexobject语句:移动页面基本不会运用如此重的多媒体援用计划(不信你问问你的前端工程师)
含有netscape(网景)、msie(IE)、firefox(火狐)、browser.msie(IE)这些典型的非移动端阅读器兼容代码的
设置了timer的 ,以及JS代码含有settimeout,的(此处不晓得为什么设置timer还有辨认的问题)
均大幅增加辨认为PC页面的可能性
以上这些中呈现的内容,
二、正文body中需求留意的局部
链接和文本遵照的准绳根本与head中一样——多呈现移动相关的字眼;页面设置的宽度不要超越常规移动设备的大小;那些常识中(除非招错前端工程师)绝对只用于PC的一些兼容性代码。
此外div块的个数也值得留意,没有哪家移动页面会过量运用div块;还有典型的只用于适配PC机器的HTML代码,例如:accesskey(假如移动页面用,要不前端招错人了,要不产品招错人了,应该惹起警惕)head和正文两大局部,根本涵盖了一张页面最主要的局部。
网站优化人员一定要把握这些运用细节,辅佐前端工程师从正反方向将公司的PC和手机页面泾渭清楚地呈现给搜索引擎。试想假如你每日被抓取页面到达90%的辨认率,而普通程度是70%,这种优化增量是十分显著的。
discuz网站前端代码优化思路的更多相关文章
- 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践
目 录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...
- GitHub 上一份很受欢迎的前端代码优化指南
http://segmentfault.com/a/1190000002587334?utm_source=weekly&utm_medium=email&utm_campaign=e ...
- 为什么大型网站前端使用PHP后台逻辑用Java
前两周参加完 ThinkInLamp 的 PHP 架构师大会,听鸟哥一上午的分享,感慨很多,PHP 业界虽然方向不明荒废了两三年的时间,终究还是又重新崛起了. 其实包括 Java 的重启问题,现在也已 ...
- 移动平台3G手机网站前端开发布局技巧
本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许 ...
- Discuz建站教程:本地安装discuz网站
网站建目前都很简单,建站容易,管理难,网站做大优化更难.本人有建站经验,目前给大家分享一下如何建站,当然,目前使用的是本地建站,因为非本地建站需要购买域名和网站空间,当然,朋友们想真正建站的,对于一些 ...
- 网站前端优化 -saveForSelf
九.网站前端优化 – IMG 9.1.可以优化的图片 图片总共可以分为两类,一个是CSS IMAGES,另一个是产品图片. 9.2.CSS IMAGES CSS图片现在采用的方式是图片合并的方式,这样 ...
- 移动平台3G手机网站前端开发布局技巧汇总
移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博 发布:2011-05-10 09:11 分类:移动开发 阅读:120,618 views 7条评论 您或许正在 ...
- discuz网站数据库迁移
你的discuz网站数据库迁移,或者修改过改密码后,还要以下相关配置文件修改,才能不会出现1045错误 以windows系统为例:首先登陆远程桌面,在运行中输入cmd,单开命令模式,再输入 net ...
- [转]为什么大型网站前端使用 PHP 后台逻辑用 Java?
最近纠结了一下,如果开发一个大型的网站,我到底应该使用php还是jsp,后台到底使用php还是用java,我的选择要么是php要么是java,因为我喜欢linux.unix,当然window平台也必须 ...
随机推荐
- 安装gerrit服务器
一.环境准备 1.Java环境 gerrit依赖,用于安装gerrit环境. 下载:jdk-7u79-linux-x64.tar.gz http://www.oracle.com/technetwor ...
- ASP.NET Core WebApi构建API接口服务实战演练
一.ASP.NET Core WebApi课程介绍 人生苦短,我用.NET Core!提到Api接口,一般会想到以前用到的WebService和WCF服务,这三个技术都是用来创建服务接口,只不过Web ...
- FPFA学习笔记的系列
1.Zynq 学习裸跑系列 学会Zynq(1)搭建Zynq-7000 AP SoC处理器 作者:FPGADesigner 学会Zynq(2)Zynq-7000处理器的配置详解 作者:FPGADesig ...
- c++ builder调用sql server的存储过程进行数据的下载和上传
小小的几行代码,在这里搞了一天.好好的一个周六过的无比的难受.代码很简单,但是主要原因是因为在用合作商的软件上传数据的时候有些框框没有勾选. come on....... 1.用两个控件ADOConn ...
- @AspectJ注解的value属性
@Component @Scope("prototype") @Aspect(value="perthis(execution(* com.helius.service. ...
- Jenkins-slave 镜像集成 docker 和 kubectl
1.说明 对官方的 jenkins/jnlp-slave 镜像集成 docker 和 kubectl 命令. 2.Dockerfile 文件 该镜像底层采用的是 Debian 系统,先更改下载源,然后 ...
- php 求商数和余数 的函数
//返回两数相除之商和余数function get_div_and_mod($left_operand, $right_operand){ $div = intval($left_operand / ...
- DDR3(2):初始化
调取 DDR3 IP核后,是不能直接进行读写测试的,必须先进行初始化操作,对 IP 核进行校验.本篇采用 Modelsim 软件配合 DDR3 IP核生成的仿真模型,搭建出 IP核的初始化过程. 一. ...
- 如何删除docker镜像中已配置的volume
场景: 有个同学不知道因为啥,将容器内部的 /sys/fs/cgroup 挂载到了外面的某个目录: 但是这个目录是很有用的,不想随便被挂载,如何从image中去掉呢? docker没有给出一个方便的方 ...
- 【LeetCode】48. Rotate Image
Difficulty:medium More:[目录]LeetCode Java实现 Description https://leetcode.com/problems/rotate-image/ ...