Category: Web World

Google Targeting Content Farms

Last Thursday, Google released a new update to their search engine aimed at knocking scrapers and content farms down in the rankings. Unlike most of their changes, which make minor tweaks and are rolled out with little fanfare, this one is major, affecting the results of nearly 12% of all queries. The change is currently live only on the US servers, but will likely be rolled out to the rest of the world in the near future. So what is a content farm, and how does this affect you?

A scraper site is one that (usually automatically) copies content off of other people’s sites for display, while a content farm generally has a large number of people rewriting content from other sites (usually badly); as such, it will have a lot of original content (helping it to rank highly with Google) without providing much value to users who would generally be better served by going to more authoritative websites.

Think back to the last time you tried to look up something technical with Google. Chances are, the first page had a number of spam sites that pulled in a lot of content (either word for word or rewritten) from legitimate sites, but didn’t do a very good job of answering your question. Google doesn’t like this – it makes them look stupid.

Unfortunately, the new tweaks aren’t quite precise enough yet, so while they have gotten some of the really bad sites, they’ve also hit some more legitimate sites. For example, Hubpages has long been one of Google’s favorite sites, making it relatively easy to rank a page you put there; I know several people who’ve started making several hundred dollars per month within a few months of putting articles up there. Once the changes took effect, traffic to Hubpages dropped close to 90%.  Will it stay that way? Probably not – Google will keep tweaking – but the people making big money through hubs are going to be very annoyed for a month or two!

On the other hand, if you have a legitimate site with good, original content and a lot of incoming links that aren’t from content farms, there’s a fair chance that your site wasn’t affected by the change, and may even have improved in the rankings. At the moment, it’s mostly the really big sites that are benefiting from this – think Amazon, Home Depot, etc – but it shows that Google is having at least partial success in promoting legitimate sites; now they just need to figure out how to find smaller sites that are actually better matches than the big ones.

So what does this mean for you? If you’re working on building websites that are a legitimate resource and actually help people meet their needs, you may be seeing some fluctuation in your ratings but probably don’t have much to worry about. If you own scraper sites, on the other hand, it might be time to move into a more legitimate line of work!

Article Marketing

Have you ever wondered why there seem to be so many pages on the internet that have no point whatsoever, just a bunch of links? If you guessed it’s for the search engines, you’re right! Because Google gives a lot of weight to the incoming links that a site has, webmasters naturally want to get as many links as possible. Of course, many of them don’t know what they’re doing and either put up pages with several hundred links (which do basically nothing), pay someone to add their site to such a page (which both does little good and risks getting their site deindexed when Google finds out they were buying links), or buy software to spam millions of blogs with their links (which has the net result of annoying a lot of people and convincing them to install anti-spam plugins such as Askimet).

But then you have articles which are a reasonable size, readable, and have no more than two or three links. Sometimes they’re really good, sometimes they’re, shall we say, not so good. However, every page on the site will have a (usually short) article with exactly two to three links.

Welcome to the wonders of article marketing! You’ve likely stumbled across a site with contributions from a number of different people. Sites like this have two purposes. First, the site makes money for its owners through advertising, usually Google Adsense; a great example of this is ezine articlee, which Google seems to be quite fond of. The people writing the articles don’t get paid, at least not in money, but they get something else: several links to web pages of their choice, using anchor text of their choice.

As with any other tool, article marketing is often misused; many people throw out all kinds of crap onto the Internet with nary a care as to whether it will be useful for anyone. Indeed, once you start looking into this area, you’ll likely be bombarded with advertisements for “spinning” software that will take your article and swap out words to make a number of other poorly written articles that are just distinct enough to avoid being marked as duplicate content by the search engines; they suffice for links, but tend to read badly and are not useful for the user. The spinners don’t care; after all, these articles aren’t meant to be read, only to get links.

And then you have people who use article marketing the way Moonlight Designs Studio does. It’s quite possible that you first found this blog by reading an article we’ve played elsewhere on the web; while the primary purpose of these articles is still links, we still expect to get readers from them because they’re well written and informative. In short, they give the reader useful information and direct them to where they can find even more. Google approves of this, because it helps them to meet their core goal: giving the users what they want. And when Google and webmasters are working together towards a common goal – connecting searchers with high-quality information that is directly relevant to their search – everybody wins.

SEM and SEO: What’s the Difference?

Trying to promote a website? No double you’ve seen the terms SEM and SEO being thrown around. While similar, they are not interchangeable; SEM, or search engine marketing, properly contains SEO, search engine optimization.

Most people are largely concerned with SEO, which refers to measures taken to improve the visibility of a site in the organic results (in other words, the ones that come up naturally, not the results in the sidebar that you pay for). This encompasses a variety of techniques, from white hat methods such as building great content with proper keyword density and getting natural links, to black hat methods such as keyword spam, doorway pages, and comment spam. Google encourages webmasters to use white hat SEO techniques, but actively pursues and deindexes those using black hat techniques. There’s also grey hat: methods that aren’t exactly on Google’s list of spam indicators, but might not be the most ethical either. Here at One Ear Productions, we use white hat SEO only.

Notice how there are multiple links in this post to other articles on the One Ear blog. The anchor text, which is the words that you actually click on, tells both the user and the search engines what to expect from the page the link is going to. For the user, it makes it easier to find other posts that are relevant to what he or she is searching for. For Google, it makes it easier to decide exactly what the post is about and return it correctly. While we always prefer external links (that is, those coming from other websites, preferably in the same area), setting up a proper link net on our site helps improve its standing with Google.

Search engine marketing, on the other hand, is concerned with making sure that a website is getting traffic from search engines, and SEO is just one method that someone using SEM might be using. It also includes paid advertising, such as the contextual ads that show up next to the Google results and the targeted ads that show up in Facebook and GMail. Some search engines (not including Google) allow webmasters to pay a fee to be included in the search listings. While an effective SEO campaign is the most efficient way to build up traffic in the long run (as the improved search engine visibility will continue after the campaign has concluded), many companies prefer to use paid advertising as it can lead to immediate results. Generally, the advertiser has a choice of paying for ads either by CPC (cost per click), where they pay a certain amount of money for each click, or CPM, where they pay a certain amount for every thousand times the ad is displayed.

Is one strictly better than the other? No. While we believe that SEO is more cost effective in the long run, and have run some small SEO campaigns to get this blog to position #1 for certain keywords, we’ve also used paid advertising to get the word out about limited time special offers, targeted at the people we wanted to see them. When those campaigns ended, however, there was no longer-term effect. The SEO should keep growing our traffic indefinitely.

Advanced CSS: Adjacent Sibling Selectors

In my web articles thus far, when I’ve talked about CSS it’s been in terms of the basics: the box model,relative positioningpage flow, etc. In the Advanced CSS articles, I’ll be talking about aspects the you wouldn’t normally find on every page. This isn’t necessarily new stuff from CSS3, just things that you wouldn’t normally need to know to do CSS design, but can come in handy sometimes.

Generally with CSS, we select an element based on its class or ID and on its ancestors. However, sometimes we need to be a little more specific. For example, suppose that every paragraph in each section, starting with the third paragraph, should have special formatting. (Why that might be, I don’t know…but CSS is very flexible!) The adjacent sibling selector will let us do this! We simply write:

p + p + p {

rules go here

}

This says that the style only applies to paragraphs which have two preceding siblings, where a sibling is another child of the same parent.

This example was a little contrived; how about another one? Suppose that we have a page with a number of h2 and h3 headers, and we want the first h3 header in each section to have special formatting. We can’t use the :first-child psuedo-class because the h3 we want is not actually a child of any h2; it simply appears immediately after it. As such, we’ll use the following code:

h2 + h3 {

font-color: #6CFF0A;

}

Now every h3 tag which immediately follows an h2 tag is bright green, as desired.

Note: the adjacent sibling selector does not work…wait for it…in IE6 and below.

Keyword Stuffing

Earlier today, I was working on an article for another site and needed some anecdotal statistics, which I obtained by taking a look at the computer services section on craigslist.  I noticed that a lot of the website designers and so-called SEO experts advertising there are still trying to get away with keyword stuffing.

Keyword stuffing is a spam method that was employed in the 90s and the first half of the past decade; unethical web designers would fill their keyword meta tags with a huge number of unrelated keywords in an attempt to get their page to show up at the top of the search results; this is why many search engines no longer use that tag. Another common technique was to simply put a big list of keywords at the bottom of the page, possibly using cloaking techniques to make them visible to search engines but not to the users.

One thing many people are not aware of is that Google actually does employ human beings to check websites that are flagged by its software and see whether they’re legitimate or spam; as you can imaging, sites that are marked as spam don’t have much luck getting Google traffic after that! Keyword stuffing is one of the main things that these people are instructed to look for.

So noticing that a number of the craigslist posts had keyword stuffing in them, I checked out the webpages they were linking to and found the same thing: keyword stuffing in the meta keyword tag, in the body of the page, or both. Shouldn’t a “professional web designer” know better than to use SEO techniques that Google has been penalizing for half a decade?

Now, don’t take this to mean that you shouldn’t use relevant terms on your own site! This post contains a number of terms that we’d probably like to rank for – professional web designer, SEO, etc. But notice that they’re not in a list at the bottom of the post and they’re not repeated over and over; rather, they’re being used naturally. If a Google engineer was to come check out this page, it would get an easy “not spam” classification, because everything on it is legitimately there for the purpose of providing useful information to the reader. We also use tags on many posts; if you look down a bit, you’ll see that this post is tagged with several terms to help Google (and our on-site search) tell what this page is about. The difference is largely in scale, as well as intent: we’ve added a small number of terms relevant to this page, rather than pulling out the thesaurus and emptying it out!

Cross-Browser Compatibility

One thing that causes a lot of headaches for web developers is getting sites to look good in every browser.

Notice that I did not say, getting a site to look the same in every browser. While it’s possible to get a site to look more or less the same, there are always going to be minor differences and it’s generally more trouble than it’s worth. As long as the site looks good and has consistent branding, there’s no reason that it needs to look identical on every computer.

Once you realize that, web design becomes much less of a hassle. One method is to build out a basic site that will work in every browser, then add flourishes that will improve the viewing experience for people with modern browsers, without taking anything away from those who are still using older browsers.

HTML5 and CSS3 offer some great examples.  Suppose you want to have some really nice-looking buttons. You can put in rounded corners and add a background gradient to make the buttons stand out.  Visitors running Internet Explorer won’t be able to see this, and will just get the regular old buttons, so to them it’s the same as if you didn’t make any changes at all, but other visitors get an enhanced browsing experience.

Or consider HTML forms. The new input types in HTML5 degrade gracefully; any browser that doesn’t know how to handle them simply treats them as text inputs instead. As a result, older browsers get the same experience they always have, but more modern browsers get a better presentation.

In short: design your sites to look good on every major browser. Then, if you like, use modern tools such as HTML5 and CSS3 so that, on modern browsers, the sites look even better.

Pagerank, Relevance, and the SERPs

We’ve previously talked about why pagerank doesn’t matter, but a number of people still attach a great deal of importance to it. It’s easy to see their point: plug pretty much any search term with any competition into Google, and the top results are likely to be mostly high-PR sites.

What many people don’t realize is that the high PR is a symptom of what’s making the page rank well, not a cause.

What does that mean? Well, suppose I have a website talking about topic X. This is a really good site, so I get a lot of links to it, many of which will have anchor text that says “X”, “page about X”, etc. All of these links are telling Google that my page is about X; additionally, each one is also a vote for the page. Thus, when somebody searches for X, Google sees that my page is both relevant and popular, and thus returns it close to the top of the search engines.

However, all these pages that are linking to me are also passing on link juice, especially if some of them have a high page rank. As a result, the PR on my page goes up!

Just as one example, go to Google and search for the term pagerank doesn’t matter. I did that just now and looked at the top five results. (Granted, this isn’t a particularly competitive term). Three are PR0 (including the page on this site, which in spite of being fairly new comes up second), one is PR3, and one is PR5. The PR5 page is in 5th place, behind the three PR0 pages! Interestingly enough, that PR5 site is actuall Matt Cutts (who heads the Google webspam team). Why is our page beating his? Because even though his has better page rank (due largely to being on a PR7 site), it’s talking about PageRank sculpting; our site is more relevant to the search term.

Would that page show up in the top five if it didn’t have PR5? Probably not; the PR does elevate the page’s importance over other pages with similar relevance but less link juice. This is, however, a good example of how relevance trumps pagerank.

Page Flow, Inline and Block Elements, and Relative Positioning

The HTML flow model is pretty simple: every element goes in a box, and the web browser stacks up those boxes when you view the page. Block boxes, which are generated by tags such as <p> and <h1>, get stacked on top of each other, while inline elements stay (surprise, surprise) in a line (unless the line reaches the edge of the container, in which case it runs over to the next line). Easy enough, right? Although elements have a default type (block or inline), you can change this in your CSS with the display: property. You can also set display: none, which keeps the element from being displayed on the page at all. All of these elements, whether block or inline, are considered to have static positioning.

However, when you use relative positioning, this actually removes an element from the flow. Your browser will render the page as if the relatively positioned element is where it’s “supposed” to be, but you can actually move it around; this may result in it covering up other elements. Absolutely positioned elements are also removed from the flow; as previously discussed, they’re placed relative to the closest ancestor which is relatively positioned (this may be the html element). While other elements behave as if relatively positioned elements are still at their normal location, they act as if absolutely positioned elements do not exist. Every absolutely-positioned element has its own z-index level, so that it will appear above or below anything it overlaps with (even other absolutely positioned elements); while these are set by default (with elements that appear later in the file getting larger z-numbers and appearing on top), you can override them using the z-index property.

Tip: Ever end up with an unclickable link on your webpage? This may be caused by a transparent, absolutely positioned element which is covering up the link. IE7 and below have a bug that allows you to click through the above element, so you’ll actually see the behavior you want (a clickable link) in IE6 and IE7, but not in modern browsers.

CSS Programming and IE6, Part 1: Checking Compatibility

Like nearly all web designers, I detest making sites work in IE6. The browser is ancient; it released in 2001! There is absolutely no reason for anybody to still be using it.

Unfortunately, for some reason, people still do. This means we have to make our websites accessible to IE6 or lose a  fairly sizable minority of our users. With plain HTML, this generally isn’t a big issue, but IE6 understandably has somewhat limited CSS support (it is, after all, over nine years old!) This naturally leads to websites that are essentially unreadable to users who’ve never upgraded. In the near future, as computers running Windows XP (which shipped with IE6) reach the end of their lives, it should become irrelevant, but for now there are a few things you can watch for to keep your sites accessible.

First off, of course, is to check how the site currently looks. Chances are, you don’t have IE6 installed on your computer, but there are sites that will show you how it looks; I use netrenderer. It won’t look the same as it does in other browsers, but if it reads reasonably well, you probably want to just call it good.

But suppose it’s totally screwed up. In that case, you probably want to import an IE6-specific stylesheet that fixes the major issues; you can do so using the following code. (Remember to put this after your other style sheets are imported so that it overrides them).

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

If you want to target every version of IE from six on down, you can instead use [if lte IE 6]. Throwing in an if statement like this allows you to serve up a simple stripped-down stylesheet that early browsers can understand, while keeping the extra code out of the main style sheet that everyone else will download.

Creating Equal (Fixed Width) Columns With CSS

Suppose you’re designing a webpage where content is in multiple columns, each of thich has a different background. It looks pretty stupid if the columns end in different places, doesn’t it? If you program WordPress themes or similar, it can look REALLY bad. So how can you make sure the columns line up?

If each column has a fixed width, it’s actually pretty easy.  Put all of the columns inside a fixed-width container, and set the background for that container to be a repeat-y image that has the appropriate background color for each part of the row. This technique was popularized by Dan Cederholm in 2004, in his article on Faux Columns.

When the columns have variable widths, it’s a bit more difficult. But that’s an issue for another post.