Confusion in Recent Google Updates

Google pushed out some updates recently which have had SEO experts and spammers, as well as the average web developer or content author, a bit confused. It seems that some sites have been losing traffic and attributing the change to the wrong update. It also seems that some of this has percolated up to my clients in the form of fear-mongering and misinformation, so I'll try to provide a quick overview of what has happened.

Exact Match Domains (EMD)

For years identifying a keyword-stuffed domain name for your product or service was considered the coup de grace of SEO. Frankly, on Google, this was true. For instance if my company, Algonquin Studios, wanted to rank highly for the search phrases web design buffalo or buffalo web design then I might register the domains WebDesignBuffalo.com and BuffaloWebDesign.com. I could even register nearby cities, like RochesterWebDesign.com, TorontoWebDesgin.com, ClevelandWebDesign.com, and so on, with the intent to drive traffic to my Buffalo-based business.

Google has finally taken steps to prevent that decidedly spammy user-unfriendly practice. With the EMD update, Google will look at the domain name and compare the rest of the site. If the site is a spammy, keyword-stuffing, redirection mess, then it will probably be penalized. If the domain name matches my company name, product or service and (for this example) is located in the area specified by the domain, then it will probably not experience any change.

In all, Google expects this will affect 0.6% of English-US queries.

Panda/Penguin

While spammers panicked about this change, some not spammy sites noticed a change at about the same time. This may have been due to Panda and Penguin updates that rolled out around the same time and have been rolling out all along.

Considering the Panda update was affecting 2.4% of English search queries, that's already a factor of four more of an impact than the EMD update. Considering that Google pushes out updates all the time, tracing one single update to any change in your Google result position is going to be tough.

A couple tweets from Matt Cutts, head of the web spam team at Google, help cut to the source instead of relying on SEO-middle-men to misrepresent the feedback:

New exact-match domain (EMD) algo affects 0.6% of English-US queries to a noticeable degree. Unrelated to Panda/Penguin.

— Matt Cutts (@mattcutts) September 28, 2012

This one details the number of algorithm changes that regularly happen:

@gregrysmith yes. 500+ algo launches/year mean 1-2 a day. I know of at least one other algo rolling out over same timeframe for example.

— Matt Cutts (@mattcutts) September 30, 2012

The trick is trying to recognize what on your site might have been read as spam and adjust it to be user-friendly, not to try to tweak your site to beat an ever-changing algorithm.

Disavowing Links

This one ranks as confusion for a web developer like me.

The only feature Google has added that I think takes potential fun away from blogs (or any site that allows commenting) is the tool to disavow links. This tool allows a site owner to essentially tell Google not to count links pointing at it when figuring PageRank.

One reason I don't like it is that it allows sites that have engaged in black-hat SEO tactics and have ultimately been penalized by Google to undo the now-negative effects of paid links, link exchanges and other link schemes that violate Google's terms. While this is good for sites that have been taken to the cleaners by SEO scammers, I still don't like how easily they could be excused.

Another reason I don't like it is that all those liars, cheaters, scammers, spammers, thieves and crooks who have spam-posted to my blog can go and disassociate those now-negative links to their sites. Sadly, associating their sites with filth of the lowest order by careful keyword linking (as I have done at the start of this paragaph) is the only ammo I have with which to take pot-shots at their spam juggernauts.

This new tool means you might not see spammers harassing you to remove their own spammy comments from your blogs. Which is unfortunate, because ignoring them seems only fair.

Just this morning Matt Cutts tweeted a link to a Q&A to answer some questions about the tool:

I did a Q&A with Danny Sullivan about the recent disavow links tool we launched: goo.gl/VtC4P

— Matt Cutts (@mattcutts) October 29, 2012

The post includes some answers intended to address concerns like mine.

Meta Keywords, Redux

As I have said again and again, the use of meta keywords is pointless in all search engines, but especially in Google. This doesn't stop SEO snake-oil salesmen from misrepresenting a recent Google update to their prospects.

Last month Google announced its news keywords meta tag, which does not follow the same syntax that traditional (and ignored) keyword meta tags follow. An example of the new syntax:

meta name="news_keywords" content="World Cup, Brazil 2014, Spain vs Netherlands"

From the announcement, you can see this is clearly targeted at news outlets and publishers that are picked up by Google News (your blog about cats or your drunk driving lawyer web site won't benefit):

The goal is simple: empower news writers to express their stories freely while helping Google News to properly understand and classify that content so that it’s discoverable by our wide audience of users.

For further proof, the documentation for this feature is in the Google News publishers help section.

In short, unless your site is a valid news site, don't get talked into using this feature and fire the SEO team that tries to sell you on it.

Related

• Cutts: Google Launched Another Update During The EMD Update (i.e. Panda 20), October 3, 2012 at Search Engine Roundtable.


• Google EMD Update: What Is Its Real Impact?, October 14, 2012 at WebProNews.


• Deconstructing The Google EMD Update, October 25, 2012 at Search Engine Land.


• Q&A With Google’s Matt Cutts On How To Use The Link Disavow Tool, October 29, 2012 at Search Engine Land.


• Members Library » Google: EMD Update at Search Engine Land.

Read More

My WordCamp Presentation: Content Strategy

On Saturday, October 20, 2012, I spoke at the first ever WordCamp Buffalo. I am a casual WordPress user, not a developer, though my decade-and-a-half experience with multiple blogs and content management systems (even writing our own CMS at Algonquin Studios) gives me plenty of insight into the overall process of blogs. I've also got the experience of helping clients who are not technical get past the mechanics of web sites and instead focus on the business and goals of their sites.

I figured this made me uniquely suited to discuss content strategy to a room full of WordPress authors (not developers). I suspected I'd be less likely to get bogged down in implementation discussions and lose attendees in the technical bits.

And I so set about creating the presentation you see here. I knew nothing of my audience — how many there would be, how technical they would be, what businesses they represented, if they were casual users, if they had simple blogs or full sites, if there were copywriters, and so on. Not knowing your audience is a huge problem when developing content (I even address that early on in my slides).

All that being said, please enjoy my presentation:

Content Strategy from Adrian Roselli

My presentation is now on WordPress.tv (as of Nov. 14, 2012). You can also enjoy the embedded version of it below.

Read More

SEO Isn't Just Google

This past weekend I had the pleasure of participating in Buffalo's first WordCamp for WordPress users. Before my presentation I made it a point to sit in on the other sessions that were in the same track as mine.

When discussing SEO, all the sessions I saw mentioned only Google. The Google logo appeared throughout, Google's PageRank was discussed, Google search result screen captures were used, and so on.

The presenters for an SEO-specific session even went so far as to embed a video of Matt Cutts (from Google) in their presentation and declare that Matt Cutts stated that WordPress is the best platform for SEO.

For context, Matt Cutts appeared at a WordCamp in May, 2009 to discuss his search engine (Google) for an audience using a particular platform (WordPress). Matt even said, WordPress automatically solves a ton of SEO issues. Instead of doing it yourself, you selected WordPress (at about 3:15 in the video). He's pitching his product to a particular audience to validate their technical decision (he's just saying they don't need to manually code these tweaks).

If while watching that video you heard Matt Cutts declare that WordPress is the best platform for SEO, then you are engaging in selection bias.

This same selection bias is also happening when developers work so hard to target Google and not any other search engines. If you convince yourself that Google is the only search engine because you don't see other search engines in your logs, then perhaps you are the reason you don't see those other search engines.

To provide context, this table shows the ratio of searches performed by different search engines in August 2012 in the United States. These are from comScore's August 2012 U.S. Search Engine Rankings report.

Google Sites	66.4%
Microsoft Sites	15.9%
Yahoo! Sites	12.8%
Ask Network	3.2%
AOL, Inc.	1.7%

It's easy to dismiss 16% when you don't know how many searches that translates to.

More than 17 billion searches were performed in August 2012. Google ranked at the top (as expected) with 11.3 billion, followed by Microsoft sites (Bing) at 2.7 billion. The breakdown of individual searches per engine follows:

Google Sites	11,317,000,000
Microsoft Sites	2,710,000,000
Yahoo! Sites	2,177,000,000
Ask Network	550,000,000
AOL, Inc.	292,000,000

To put this another way, for every four (ok, just over) searches using Google, there is another search done in Bing. For every five searches using Google, there is another one done using Yahoo.

If your logs don't reflect those ratios in search engines feeding your site, then you need to consider if you are focusing too hard on Google to the detriment of other search engines.

Now let's take this out of the United States.

Considering Bing's partnership with the Chinese search engine Baidu, contrasted with Google's battles with the Chinese government, it might be a matter of time before Bing tops Google for Asian searches. Given the size of the Asian market (over half a billion users), if you do any business there it might warrant paying attention to both Baidu and Bing.

Related

• Selection Bias When Reviewing Browser Stats, March 13, 2011.

Update: May 15, 2013

Bing is now up to 17%, having taken almost all of that extra point from Google.

Read More

Speaking at WordCamp Buffalo

Having returned late last night from a six-timezone jump and an almost complete disconnect from technology, in just two days I'll be back up to full strength as I speak at WordCamp Buffalo on Saturday, October 20, 2012. Some information about the event from the site:

WordCamp Buffalo is a one day conference held in Buffalo, NY focusing on WordPress. Our goal is to increase knowledge about WordPress for people who already are working with it, and show some benefits of using it for anyone who may be interested, but aren’t currently working with WordPress.

WordCamps are a bit different than your typical Conference. WordCamps are informal, community-organized events with information for anyone from a new user to a core developer.

While I am not a WordPress developer, I am a regular user and I also have over 15 years experience in content management as a concept and more than a decade experience having built our own multi-lingual enterprise web content management system (QuantumCMS) at Algonquin Studios. Having worked with clients directly as well as in the nuts-and-bolts of assorted platforms, I'll be bringing that experience to bear for a session on developing your content strategy.

You can learn more about the other sessions and speakers at the WordCamp Buffalo site. If you are lucky enough to have gotten a ticket before they sold out, here's a handy map:

View Larger Map

Read More

Chromatic Type with Pseudo Elements

Typography on the web has come a long way from the days of a handful of web-safe fonts, six sizes, and little other control. With the ability to embed custom typefaces in web pages and exert a great deal of control via CSS, it was a matter of time before old-world printing techniques for multi-colored text came to the web.

Over at Webfonts.info there is a tutorial, Layering type with CSS z-index, which shows how to achieve a multi-colored text effect by stacking the same piece of text on itself and applying a different font specifically meant for this kind of layering. The problem is that you have to duplicate the text for each layer, creating redundant text on the page that, without CSS, can look pretty odd (or sound pretty odd when read aloud by a screen reader). Discussing accessibility or SEO is outside of what I want to cover here, though.

The HTML

For my demo I am relying on CSS pseudo elements and generated content to duplicate the text for me up to two times. I also use the HTML5 data-* attribute to contain the same text value of the content itself. While I could use the title attribute, that would result in tool-tips appearing whenever you put your mouse over the text. For my demo I am using the following block of HTML:

<div>
<p class="chromatic" data-copy="Vote early &amp; vote often.">
Vote early &amp; vote often.
</p>
</div>

The CSS

I am using a new typeface family built from old wood type blocks and specifically built to be layered. More information on the typeface is at the end of this post.

Example 1: Strike Up the Band

Click/tap/select to see demo page.

This example is intended to sit on a background made up of a texture or color different than you want for the text. I use the white fill as the lowest layer, then stack the blue border on top to trap the white text and add the red stars on top from there.

div {
  position: relative;
  margin: 0; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: #fff;
  font-family: 'hwt_american_solidregular';  }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: #00f;
  font-family: 'hwt_american_outlineregular'; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: #f00;
  font-family: 'hwt_american_starsregular'; }

Example 2: That Old-Timey Feel

Click/tap/select to see demo page.

I am mimicking the mis-registration of old-timey print by off-setting the text and applying some transparency to show the texture underneath as well as the overlapping points of the "inks." I also use the distressed font for the letter fill.

When you hover over the text the alignment snaps into place, the letters become opaque, and I replace the distressed font with a solid fill.

div {
  position: relative;
  margin: 0; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: rgba(255,255,255,.85);
  font-family: 'hwt_american_shopwornregular'; }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: rgba(255,51,51,.9);
  font-family: 'hwt_american_starsregular';
  margin-left: -0.02em; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: rgba(0,0,0,.5);
  font-family: 'hwt_american_outlineregular';
  margin-top: 0.02em; }

div:hover p {
  color: rgba(255,255,255,1);
  font-family: 'hwt_american_solidregular'; }

div:hover p::before {
  color: rgba(255,0,0,1);
  margin-left: 0; }

div:hover p::after {
  color: rgba(0,0,0,1);
  margin-top: 0; }

Example 3: Accounting for Different Backgrounds

Click/tap/select to see demo page.

Here I want the text fill to be the same color as the background, which allows me to use three different colors (black for the 3D effect, blue and red). On hover I change the background color of the container, which requires me to swap the bottom layer to the fill font and set it to white.

div {
  position: relative;
  margin: 0;
  background-color: #fff; }

div:hover {
  background-color: #000; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: #000;
  font-family: 'hwt_american_outlineregular'; }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: #00f;
  font-family: 'hwt_american_stars_topregular'; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: #f00;
  font-family: 'hwt_american_stars_bottomRg'; }

div:hover p {
  color: #fff;
  font-family: 'hwt_american_solidregular'; }

Example 4: Using CSS for More Colors

Click/tap/select to see demo page.

Using some CSS drop shadows can help keep the text have more contrast with the background color or texture. On hover I turn the bottom stars red. While red usually looks terrible against blue, adding a white edge with CSS makes them stand out against the blue. It's a subtle effect that shows how you can use CSS in conjunction with chromatic typefaces to create even more effects.

div {
  position: relative;
  margin: 0; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: #44f;
  font-family: 'hwt_american_solidregular';
  text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 0 5px #fff; }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: #fff;
  font-family: 'hwt_american_stars_topregular';
  text-shadow: none; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: #fff;
  font-family: 'hwt_american_stars_bottomRg';
  text-shadow: none; }

div:hover p::after {
  color: #f00;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }

Example 5: Swap Fonts and CSS to Make It Pop

Click/tap/select to see demo page.

Using CSS to outline the text gives even more flexibility, so the hover effect with the 3D font and color swap makes the text pop.

div {
  position: relative;
  margin: 0; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: #fff;
  font-family: 'hwt_american_solidregular';
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

div:hover p {
  color: #000;
  font-family: 'hwt_american_outlineregular';
  text-shadow: none; }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: #f00;
  font-family: 'hwt_american_stars_topregular';
  text-shadow: none; }

div:hover .chromatic::before {
  color: #00f; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: #00f;
  font-family: 'hwt_american_stars_bottomRg';
  text-shadow: none; }

div:hover .chromatic::after {
  color: #f00; }

About American Chromatic

The typeface I used for this demo is HWT American Chromatic, a collaboration between the Hamilton Wood Type & Printing Museum in Two Rivers, Wisconsin and P22 Type Foundry in Buffalo, New York. Some detail about the typeface from the readme file:

The HWT American Chromatic set is a multilayered font set that will allow for thousands of possible color and pattern combinations. The original 19th Century Chromatic that this font set is based upon included 2 fonts. The HWT digital version includes 8. The alignment isconfigured to allow any combination of the 8 fonts to all align when identical text is set and arranged, one on top of the other.

American Chromatic was originally created by Wm. H. Page & Co. circa 1857-59. It was created as a two part chromatic where portions of each color would overlap to create a third color via the blending of semi-transparent inks. Chromatic wood type was an innovative approach to the limits of the technology of the time. To print them as shown in their specimen books required a highly skilled printer.

No, I wasn't paid or given a free font family to write this.

Read More