你好! 访客. 请先 登陆注册一个帐号.
十月 23, 2019, 01:28:56 am
论文答辩趣闻 新年祝福短信 淘淘成长日记 可爱发行全攻略 鬼故事一箩筐 杨柳青石家大院 淘淘成长日记
* 首页 说明 搜索 日历 登陆 注册
公告和新闻:原生态购物网沉香微店热卖 点击进入
原生态论坛  |  设计专版  |  网页/程序设计 (版主: tianya)  |  主题: Using XHTML/CSS for an Effective SEO Campaign 0 会员 以及 1 访客 正在阅读本篇主题. « 上一篇主题 下一篇主题 »
页: [1] 向下 打印
作者 主题: Using XHTML/CSS for an Effective SEO Campaign  (阅读 4436 次)

受欢迎度: 20
离线 离线

帖子: 971

Using XHTML/CSS for an Effective SEO Campaign
« 于: 十二月 22, 2005, 02:40:26 pm »

Published in: Business, CSS, HTML and XHTML, Politics and Money | Discussion is closed. 作者 Brandon Olejniczak

      Any internet marketing professional will tell you, just as we will, that an effective Search Engine Optimization campaign can generate more traffic than an expensive banner-ad program, or costly and time-consuming pay-per-click methods. Some of the best methods of optimizing a website are ensuring that a page is not overly heavy in file size, maintaining a good content to code ratio, using lots of relevant content, and filling the page with as much text and links as you can without “spamming” the search engine spiders.

      We’re not going to cover all of the basics of XHTML and CSS. We assume that you have a basic, working knowledge of the two languages and have some experience in utilizing them. We suggest reading ALA’s CSS articles, and Zeldman’s Better Living through XHTML if you need more on the basics or more reasons to switch over.

      We’re going to be focusing entirely on the benefits of using XHTML and CSS to show you how to improve the readability of your code for search engine spiders, maintain a good content-to-code ratio without going beyond file-size and word-count limits, and how to use CSS to mimic common image effects.

      There will be – in no way, shape or form – any unethical methods of SEO covered here. If you’re reading this article in the hopes of learning how to get an adult site listed in the “school supplies” category on Google, we kindly suggest you fall off the face of the earth. Any hate mail regarding this can be directed to It’s due time to pay her back for all those “petting zoo pictures” that manage to bypass my spam filtering system.

      File size and content ratios
The best way to begin an optimization project is to make sure that all your code is readable. Search engine spiders work much the same way that the human eye does, and if there’s too much “junk text” in your HTML, it’s going to be hard for spiders to know what is what and to be able to decide that a page is relevant to a particular category. Improving your structural organization will not only make it easier to read for you, but ensure that search engine spiders know what you’re trying to show them.

     Visually, a human reader sees the green Arial text set at 24px and bold green at the top of the page as the main title for your website. However, if you don’t have your markup implemented well enough, a search engine spider will not. Instead of using this to declare your title:

      <strong><font color="#00FF00" size="24px">Main
       Title of My Very First Website </font></strong>
       Put this in your XHTML:

      <h1>Main Title of My Very First Website</h1>
      ...And this in your CSS:

       H1 {font-family: Arial; size: 24px;
       color: #00FF00; font-weight: bold;}

      Using XHTML to declare your main heading as H1 will ensure that a search engine spider knows that the contained text is the title of the page, while styling it with CSS yields the desired design effect. Using H1 through H6 accordingly, you can use this methodology to style the sub-headings on your website and let the search engine spiders know they are of importance. But don’t forget to use one or two of your keywords in the title—otherwise it won’t make a difference either way.

Using Images Wisely

      An H1 tag placed directly after the <body> tag will be weighted heavily by many search engines, especially if it contains one or two of your keywords. But sometimes, putting a nice big heading tag after your body tag can detrimentally affect your masthead image placement. Using CSS, we can work around this little hang-up in some instances by placing our masthead logo as a background. To do so, the following code would be added to your BODY declaration in your CSS file:

background-image: url(../images/logo.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
Embedding a logo as a background instead of dropping it straight in to the HTML will make that piece of the puzzle fit together nicely. (Unless, of course, you don’t need the image to be presented before your H1 element.)

Pesky Javascript Rollovers
      Everyone loves rollover effects. Even my completely dimwitted grandmother likes it when an e-mail link rotates every time she hovers over it. Using CSS allows you to emulate rollover effects with grace and lower file size, but one of the greatest benefits is providing more textual content for spiders to “read.” Using CSS to dictate rollover effects instead of separate images will give you a marginal, yet effective advantage in the fight for search engine positioning, especially if the textual link is one of your keywords.

Tim Murtaugh’s Mo’ Betta Rollovers is a great guide on how to use HOVER states to emulate common image rollovers.

Wrapping it all up
      There are many ways to increase a website’s search engine positioning. Some of them are extremely effective while others are offensively unethical. Using standards compliant methods to create highly readable, content rich code with optimized content can aid in your campaign to dominate the search engine category. Every website has a place on the net, just make sure you know where your place is.

by Brandon Olejniczak
« 最后编辑时间: 十二月 22, 2005, 02:45:09 pm 由 admin » 已记录


原生态特色礼品:沉香 紫檀 黄花梨
页: [1] 向上 打印 
原生态论坛  |  设计专版  |  网页/程序设计 (版主: tianya)  |  主题: Using XHTML/CSS for an Effective SEO Campaign « 上一篇主题 下一篇主题 »

友情链接: 原生态购物网 原生态官方博客  佛珠网  搜狐社区 淑女情缘论坛 沉香
  原生态论坛© 2005~2017, 版权所有
Powered by SMF 1.1 RC1 Lewis Media.
Powered by MySQL  Powered by PHP  Valid XHTML 1.0!  Valid CSS!