耀华博客

您现在的位置是:网站首页 > 个人博客 > 设计心得 >

设计心得

我的个人博客网站设计心得(站内优化案例)

2019-08-08 14:57:23 耀华博客 admin
我的个人博客网站从购买域名到搭建站点将近两个月的时间里,我都在思考如何做一个从网站本身优化及结构代码的角度出发能更快的让网站收录?桂耀华从事网络推广(SEO+SEM)至今已

  我的个人博客网站从购买域名到搭建站点将近两个月的时间里,我都在思考如何做一个从网站本身优化及结构代码的角度出发能更快的让网站收录?桂耀华从事网络推广(SEO+SEM)至今已有6个年头,做过很多企业的优化案例,在这些成功的优化案例中其优化难度都是比较大,耗时长,(在网站开发中代码结构及布局上前辈留下的坑,我都要一个一个的去踩,去填补),从网站优化的角度出发,我一直想对网站开发的程序员写一篇关于程序员开发网站时的代码书写规范,虽然我不是码农,但在优化网站中摸爬打滚的这些年,加上对自己的要求也是挺高的,所以练就了一身武艺(编程开发、美工、设计等等)。

  21世纪,在互联网的时代,或者准确的说已是移动互联网的时代下,要是作为程序员的你还是不懂网站SEO或具有优化意识的话,终将被后浪拍死在沙滩上。这里提个问题,对于程序员可以反思下,一个公司或企业做网站的目的是什么?可能你会说,做推广啊、宣传啊啥的。然,这只是中间环节的一点皮毛!为什么这么说呢?下面就本人的拙见,一一分析。

 

 

  对于网站优化我是比较喜欢从两大方向去分析思考执行的,一是站内优化,而是站外优化。这里我只讲站内优化中的网站结构优化。在SEO行业内有这样一句话:“内容为王,外链为皇,内链为妃,代码为将,关键词为相,结构为城,更新为太子”,所以这里我只讲其中两点,你应该猜到了,对,就是“结构为城,代码为将”!下面正式回到主题:


  首先,对于这些代码你需要知道怎么用(位置)以及用在网页中的含义(于优化而言),h1、h2、h3、li、i、em、strong。本文先说这7个标签吧,其他待后续更新,不然讲多了又是长篇大论(耀华博客的博文都是偏技术性的,上次写的一篇技术性博文被网友@巴郎这样点评:1、SEO写这样的文章很少有人看,文章太长;2、偏理论技术性太强,不如做视频实操讲解。),这里我会已耀华博客网站做案例实操讲解。

  h1,这个标签等同于网站的标题title;h2副标题;h3副
标题,这样理解就可以了。Li,li标签一般用于网站导航、菜单、文章列表等;i和em标签一般用于网站的矢量图标,用得较多的是i标签。strong标签多用于文章内容页(不超过5对)。

  案例实操之网站首页代码结构布局:

  一、网站头部logo

  优化前:


  <div class="logo">

  <a href="/"><img src="/images/logo.png" width="70" height="70" alt="耀华博客专注个人博客及中小企业网站优化排名技术建站">

  </a>

  </div>

  分析:

  1、一般程序员在编写网站头部logo部分的代码时,logo图片不会再其属性宽width、高height上标明图片的尺寸,常常只是在css样式上限定;
  2、LOGO图片的alt属性缺失;
  3、LOGO图直接放一张图片没有文字,只用一个按标签包含img标签完事。

  优化后:

  1、规定LOGO图片的宽高尺寸并添加alt属性用于说明图片或站点文字名称;
  2、增加h2标签,(切记勿用H1标签,任何页面有且只有一个h1标签),用于标明这是需要优化且参与权重分配的;3、在LOGO旁增加站点标识或广告语slogan,加强用户记忆(营销思维)。

  <div class="logo">

  <a href="/"><img src="/images/logo.png" width="70" height="70" alt="耀华博客专注个人博客及中小企业网站优化排名技术建站">

  <h2 class="logo-title">耀华博客</h2>

  <p class="logo-text">排名技术建站,让你对手追赶</p>

  </a>

  </div>

  二、导航

  导航代码语义化,简化蜘蛛读取自动识别,直接告诉蜘蛛这个是导航<nav></nav>,li是导航里面的菜单列表,理解其含义即可,这点没什么好说的。

  三、首页文章标题代码用法

  网站首页上的内容都是调用各栏目下发布的文章,且也是需要优化排名的,所以我们不管是在首页还是列表栏目页,在调用内容页文章标题时直接给个H2标签,突出重点优化的对象,如下图:


 

  三、nofollow的使用

  而对于部分网站首页或列表页面,在调用文章的描述时,代码规定显示不全或超出时,显示省略号,有些为了页面美观,会给个阅读全文的字样,像这样的字眼我们需要添加nofollow,限制参与权限分配,写法:<a href='#' rel='nofollow'></a>。类似这样的还有像更多、上一页、下一页、网站底部导航的首页字样等等,都是需要添加nofollow属性值的,尽量减少网页权重的分散,也就是同一页面参与分配权重的越少,则需参加权重分配的就分得越多,就好比一个西瓜十个人参与分与5个人参与分,所得分到的份量就不一样。

  为避免内容太多太长,不易吸收暂只讲这些,只要理解了,其他页面的结构布局也是一样的,只有懂得了方法任何页面都可以灵活的运用。

文章评论

说点什么吧
  • 人参与, 1条评论
隐藏伊斯特瓦尔,希望隐藏后我们还能再见面!