SEO Warp Blog

Return to SEO Warp

Web Tips

...now browsing by category

 

Will The Google +1 Button Survive?

Saturday, July 9th, 2011
Google's +1 Button, Activated

Google's +1 Button. It's +1'icious!

At the end of April, 2011, Google rolled out the +1 button and included it on their search results for users who are logged into their website. Two months later, the social networking service Google+ was introduced to the web in beta to let people get a taste of what the search engine giant has to offer next.

The +1 button and Google+ project are both a response to the major success of Facebook. +1 was integrated into Google’s search engine before their social network to make a transition from Facebook as familiar as possible. If webpages have “Like” buttons on them, why can’t they have +1 buttons as well?

Here are the features of the +1 button:

  • +1 will bias search results toward your interests and help return relevant pages based on what it knows that you like
  • It may be a minor SEO ranking factor, giving more strength to sites that have been given more +1 clicks
  • Any +1 clicks can be shared on Google’s social network to let your friends know what you like

Now we can take a look at why these features won’t save the button.

(Wow. I’m about three paragraphs into this post and there’s so much “plus” that it’s positively overwhelming!)

 

A self-aware +1 button

:/

Why Google’s +1 Button Won’t Survive

Each of the features listed above won’t be enough to make this button work. Let’s break down each of these benefits and see why they won’t keep users interested for very long:

 

Biasing and Personalizing Search Results

+1 will bias search results toward your interests and help return relevant pages based on what it knows that you like

Biasing search results is something that Google does already. There are several factors that the search engine takes into account that come from the user which are used to refine the results. Previous searches, cookies set by Google, and geographic location will change the results that a user sees.

If Google wanted to see which pages were the most useful in their search results, they could observe each individual user’s behavior.

For example, they could monitor a search, watch someone click through to another site from the search engine results page, and then see if that same person returns to the same results page and clicks on a different link in a short time frame. This would indicate that the user may not have found what they were looking for on their first try and that the one they finally exited out of had what they were looking for. Google could also track which sites are the most important by watching users type in the same queries and click on the exact same results consistently over time.

Tracking user behavior would be a much more dependable way of determining useful pages, too. +1 expects the user to find and click on a button for the useful resources that they come across, something that very few people would be willing to do even for some of the time.

The search engine personalization would only start to work noticeably after the user clicked on a truckload of +1 buttons. Because of the virtually limitless possibilities of queries and results returned, a user would have to have a lot of favorite resources and have to have a pretty limited scope of search queries for anything to be influenced by a +1 personalization. Most users won’t have the patience to do this and few will even see the point.

If someone’s going to personalize their search results anyways, it would make more sense for them to just bookmark the pages that they find useful so that they can quickly access them later. And why shouldn’t they? At that point, the resource has been found. There’s no need to bias toward that resource since the user already came across it without explicitly personalizing for it.

 

+1 as a Search Engine Ranking Factor

It may be a minor SEO ranking factor, giving more strength to sites that have been given more +1 clicks

Search engines are all about pointing people to the resources that they’re looking for. Once that resource is found, there is no incentive to go back to the results page. Unfortunately, the search results page is where the user would most often give a page a +1 since that’s where Google has their new buttons consistently displayed. Nobody wants to backtrack to rank a resource. They want to stay on the page that they found and actually use that page’s content.

Considering +1 scores as a ranking factor would also be silly for another reason. I’m not sure of exactly how many people do this, but when a lot of users don’t see a result that they like on the first page or two of the results, they refine their search by modifying or adding keywords to the query. So basically, whatever page the user finally lands on is going to be at or near the top of the SERPs to begin with. Giving it a +1 probably isn’t going to help it be any more relevant.

But you can also include a +1 button inside of a webpage! People can click it there, so it doesn’t matter if you’re seeing it on the search engine’s results page, right?

That actually complicates things a bit and makes it unreliable, if not completely useless as a possible ranking factor. Here’s why:

If the +1 only existed on the search results, it might make more sense. There, a +1 would likely be used as a way to tell Google that a particular page was useful when searching for that particular phrase. But because it can exist within pages as well, it can’t be as reliably used as a way to boost rankings within certain queries because people can reach any page without using a search engine and still give it a +1.

My guess is that giving a page a +1 would be virtually the same as giving the page a link on Twitter. Depending who on Google+ gives it, it may be worth slightly more, but it will mostly be a way to break any ties between pages in the search engine results pages.

So what happens if I give a +1 to a webpage that changes or gets sold to someone else? Or if it disappears? Will Google remove my +1? Will I have to give a page another +1 if the page comes back? Do +1’s follow 301 redirects, and if so, would multiple 301’s with their own +1’s be summed together if they all point to the same page? I haven’t come across any answers for these either because the button is still new (unlikely) or because +1 is just a novelty and isn’t anything that we should be making a big deal over.

 

Google and Facebook search results

Can these two search results really be the same? Google seems to think so.

Sharing Your Interests and Resources with Your Friends

Any +1 clicks can be shared on Google’s social network to let your friends know what you like

Here is where the Facebook influence really shines through. On Facebook, when you Like a page, you are showing that you have an interest in what that page is about, allowing discussions on that page’s subject and possibly making connections based on it.

Google, on the other hand, is treating its entire index of web pages as if it can be used for social networking. But instead of showing interests where people can talk about them, it shows useful resources, which really isn’t useful to anyone other than the person searching for those terms.

“But you’re wrong!” I can hear the Google fans yelling. “+1 is meant to make it easier for you and your friends to be virtual tour guides for one another so you can see which pages they like!”

Again, that makes sense on Facebook where pages are much more generalized. On Facebook, I can see that 40 of my friends like “Music”, 18 of my friends like the band “Skinny Puppy”, 7 of my friends like the synthesizer manufacturer “Korg”, and so on. These are all things, concepts, ideas, broad generalizations.

Google as a search engine is much different. It is meant to return particular information contained on specific webpages, not to list interests. Given the diversity of pages and searches, I seriously doubt that I’d even come across any recommendations from my friends on Google since we search for very different things. I’m not going to see that recommendation for the page “Joe Mauer » Statistics » Batting | FanGraphs Baseball” at fangraphs.com, just like how nobody I know is going to see my +1’d page of “Word-Wrap: Force Text to Wrap” at webdesignerwall.com. The chances of me searching for “Joe Mauer’s stats” are equal to my friends searching for “forcing text wrap in css table”.

 

The +1 Button’s Name and Usage

Finally, another reason why Google’s +1 button won’t succeed is because of its name. It’s obvious that they wanted to use a term that easily conveyed the idea of positivity, and for that, something like +1 isn’t too bad. How can you get simpler than two characters?

The problem comes when you try to talk about it or use it in a sentence.

“I just plus-one’d this page. It’s a good resource.”

“I’m going to start plus-one’ing my own webpages so my friends can see it on Google Plus.”

“This page used to rock, but now it sucks! I’m un-plus-one’ing it.”

What a hideous load of verbal spew. If it was really so simple, Google wouldn’t need to make a page explaining how to use +1 in everyday English.

Facebook's Like Button

Facebook's Like Button. Simple and straightforward.

Compare this to Facebook’s “Like” button. You don’t need to translate what “liking” something is, let alone explain how to conjugate it as a verb, because there is no translation required.

For example, I like coffee. I can find a page for coffee on Facebook and click the Like button. Then my friends could easily see that, surprise, I like coffee! I can also see which of my friends like coffee as well and maybe start a conversation with people on the coffee page about it if I really wanted to.

With Google+ and the +1 button, my friends would be able to see that I +1’d a page titled “Dunn Bros – 20% Off Dark Roasts” at http://www.example.com/whatever/blahblah?id=5329523&kid=606. This way, my friends could easily see that I am possibly a robot.

 

Conclusion

Despite Google’s good intentions with the +1 button, the implementation is really just a shortsighted way to try to make Google more like the social network that it isn’t. It is unlikely that the button will last for long because it feels unnatural and is largely just a pointless widget meant to force Google to feel more like Facebook. Maybe we can hope that it will vanish soon so that it reduces the clutter on Google’s search results pages and takes yet another untouched social media sharing button off of random blogs everywhere.

Writing Content For Your Site

Saturday, June 25th, 2011

I recently got into a discussion with an owner of site who sold bottles of steak sauce. He was wondering why he wasn’t getting any more attention to his pages despite having spent money on a fancy new layout. Unsurprisingly, he had almost no content; his blog was empty, the product pages listed little more than the names of each item, and the front page had less than 100 words total (which is less than this entire first paragraph). I asked him when he’ll start adding information and writing some pages for his blog. His response: he’d get around to it when he could think of something to actually write.

This story is all too common among many site owners. Writer’s block hits early and it hits hard. But the truth is, writing doesn’t have to be a chore. If you know how to approach it, it can be a fun and creative process that can bring your site together and benefit your site’s visitors by providing them with something of value.

In the following sections, we are going to target the problem, set up a game plan, and attack it.

 

1. You Can’t Optimize Content When You Have No Content

This is probably a no-brainer for you if you are reading this, but it’s critical for anyone who is starting or updating a website to have textual content on the site’s pages. In fact, if you’re new to SEO or are just starting up a website, make this your mantra for any new optimization project: You can’t optimize content when you have no content!

Search engines are the bridges that connect users to the information that they are looking for on the World Wide Web. Because the Web is about communication and the exchange of ideas, the content is almost always textual; ideas, concepts, and information are abstract, so they are only able to be expressed in words, not in the pictures of a site’s layout, its extra navigational features, or anything else. People search with words to match documents that have those words associated with them, so if you have no text, you aren’t going to be found because you won’t have any information that a user is looking for.

Fixing this problem doesn’t have to be a huge challenge. In fact…

 

2. Creating Content Might Be Easier Than You Think

In my talk with the steak sauce site owner, he mentioned that he wasn’t sure if he even could write. After all, he isn’t a writer, so he wouldn’t know where to begin, what to say, or how to say it. Though, he’s been in the business for years and could talk all day about sauces, grilling, the different kinds of meat, and all kinds of things that someone like me wouldn’t even know about when it comes to making a meal.

One of the product pages was for chimichurri sauce. I didn’t have any idea what this type of topping was and the product page certainly wasn’t helping me out, so I asked the owner what I’d use chimichurri for. He told me that this was a sauce that was rich in a variety of herbs, including garlic and parsley. This particular kind was a bit too mild for him because it didn’t have as much hot pepper blended in like in some of the other brands he sold, but it was sweet and good on a tender steak.

Before my hunger started to kick in, I had to point out that he just came up with the basis of a pretty good product description. He could easily put something similar to what he just said on his product’s page and suddenly have more useful content on his site.

After some refining (which we’ll get into further), we might have a decent description like the following for our sauce:

Jack’s Chimichurri Sauce
With its rich garlic flavor and hints of a red pepper seasoning, our specialty Chimichurri sauce will put a mild twist on your taste buds. Use it to compliment the taste of a tender sirloin or use it as a glaze on grilled ground beef to make a satiating chimichurri burger.

So how did this “non-writer” come up with a description? Simple. Someone asked him a question about it.

Writing becomes really easy when we give ourselves prompts to start from. It’s even easier still when someone else provides those prompts for us. Sometimes, just asking a friend what they think about a page or a site will be enough to generate a few questions for us to answer. But if those questions don’t come from someone else, it isn’t impossible to come up with some on our own.

One way to invent our own prompts is to pretend as if we are a visitor who has never seen our site before and assume that we don’t know anything about it. In this example of the steak sauce site, we’ve asked what the sauces are used for. Is this particular sauce hot or mild? Are there any recipes that would benefit from using this sauce? Is it a popular item? Where are the ingredients from? Some of these questions might seem strangely specific, but their answers can be used to build a great textual product description.

Another way to come up with prompts is to visit sites both similar to your own and ones that are very different. While browsing these various types of sites, ask questions about what is being presented, starting with the basics:

  • Who are the people reading this site, and who are the ones writing it?
  • What are these individual pages about, and what do all of these pages have in common with one another?
  • Where and when were the things on these pages created or when did they happen?
  • Why should I or anyone else care?

Take note of the questions that you are asking and don’t be afraid to get specific (e.g. what was the magnification range of the telescope that Galileo used when he was discovering that the earth revolves around the sun? Was Galileo the only one with this kind of telescope at the time? Answering these questions could fill a paragraph or two and might even spark enough ideas to start a new page, assuming that it’s relevant to what your site is about).

Were your questions answered by the site? If so, were the answers helpful?

Now take those questions and try to fit them to your own site, asking similar things about your own pages and seeing if you’re finding clear answers. If you aren’t, it’s time to start answering your own questions.

 

3. Editing, Pruning, Building

After you take a short break from writing, come back ready to edit what you’ve just typed. Aside from checking for grammatical errors and spelling mistakes, make sure that your pages still maintain a certain level of focus and aren’t going off on any wild tangents. If you do stray into other topics that don’t belong on your page (for example, if you started writing about how photosynthesis works when your page is about putting ferns in your house), consider making a new page for that deviation and internally linking to it from any other parts of your site that may reference that subject.

Also, see if you can make connections between different pages with similar topics. In the example of the steak sauce website, the owner could use his blog to post recipes. Using what we’ve learned in section 2 of this article, the recipes could be descriptive and alluring:

Kickin’ Flank Steak

Want to add a little zest to your steak? This peppery flank is excellent for a cool evening of grilling and will exhilarate your more adventurous guests. Serve this with a brisk, mixed-leaf salad and a side of asparagus for a full and unforgettable meal.

 

2 Roma tomatoes, diced

3 avocados – peeled and diced

1/2 onion, minced

This short description didn’t add a whole lot of new words (only about 45 or so), but it makes this recipe much more interesting for a reader. Combine it with a link to your product page for the item you’re selling and leave the comments section open for your visitors. If someone has tried the recipe, they might come back to leave a comment about it which could further describe what’s on the page and would also help convince new visitors to try it for themselves.

 

4. Wrapping It All Up

Now that you’ve refined your content, check that your pages are internally linking to one another in ways that make sense. If you do this properly, it can help move a customer to make a sale, download software, listen to a song, or whatever it is that you want them to do on your pages.

Back at the steak sauce website, out of the content we’ve created, we have appetizing product descriptions and blog posts with illustrative recipes. The blog posts point to the pages of the products that are being used. But are our product pages pointing back to our blog posts?

Wait a minute. Do we really want to do that? Isn’t the point of the site to sell the sauce? You want to keep the visitor on the product page and make the sale.

Well, that’s true. We would like to make a sale. But not every customer who lands on a product page arrives with the intention of purchasing that item. For example, if the visitor really likes a particular steak sauce, they might be curious and explore what other sauces that the manufacturer offers to see how others compare. Instead of their usual tabasco-flavored sauce, they come upon a sweet honey barbecue sauce. It isn’t hot the way our shopper likes it, but they click on the recipe link to get an idea of what this sauce would work well with.

Soon, at the new page, their mouth is watering at our description and they’re convinced that this would sweeten up an otherwise bland meal. They hit the link that you included, hopping back to the product page, and then add the item to their cart.

But of course, that’s the best case scenario. Maybe we don’t get rewarded so easily this time; the visitor finds our site because they searched for the kind of sauce that they like and our page popped up because they wanted more information or a recipe. After they reach the recipe page, they leave our site.

If we were helpful to our visitor and gave them what they were looking for, they could have made the dish using the technique they found on our blog. Even if they were using a competitor’s ingredients, if they had a good experience, they will be likely to return and look for more meals to make and leave feedback. Or they’ll share our site with a friend who will look at it on their own time.

Either way, we have increased our chances of having returning visitors or having those visitors refer our page to other people. These visitors, both returning and new, may buy some of our products and walk away satisfied.

 

5. Conclusion

After looking at ways to figure out what sort of content to add and how to internally link our pages, we can spend more time on promoting our site and finding customers. A site’s storefront doesn’t have to (and often shouldn’t) be so cut-and-dry to the point where it assumes that our customers know everything about us and what we sell already. If we can educate or entertain our visitors with some relevant information as they’re shopping without being distracting or unnecessary, they’ll be much more confident in making a purchase. And if we write blog posts that we can casually tie in with what we sell, our site can now be more than just a store: it can be a resource of information for people to subscribe to and read, which will open up a whole bunch of other possibilities for sales and product promotions. But maybe we’ll get into that some other time.

SVG Scaling Problems in IE9 and Other Browsers

Wednesday, June 15th, 2011

SVG, or Scalable Vector Graphics, have been around since 1999, but are only recently becoming more widely supported in web browsers. Part of this is because of the anticipation for the HTML5 standard which allows for things like the <canvas> element, finally enabling website developers to draw using vector graphics directly on their web pages.

However, due to the number of variables that can alter the way an SVG file can be displayed, it’s no surprise that there can be inconsistencies between the way different browsers handle the images. Specifically in this post, I’m going to discuss SVG sizing on a page using HTML and how to fix a couple of common scaling problems between several popular browsers.

I’m basically writing this because I’m rather new to using SVG myself and made the decision to use SVG images for SEO Warp to maintain the quality of scaled images. I also wanted to practice using Inkscape, which is a fantastic tool, but at the time of this writing, many of the SVG files generated by it can lack certain parameters that browsers require in order to display images properly. So if you’ve been using Inkscape and are having problems with different browsers rendering your images correctly, this post can probably help you to solve your issues.

Before I begin, I’d just like to point out that on my test page, Internet Explorer 9 refused to display any of my SVG images on a basic HTML page until I declared the HTML4 strict or HTML5 doctypes. If you’re seeing the broken image icon in place of your images in Internet Explorer, consider adding the following to the top of your HTML document before the rest of your code:

<!doctype html>

I’m not sure why it’s necessary to do that in IE, but it’s not like declaring a doctype is a bad practice anyways.

The most common problems that I’ve seen with using SVG so far are that Internet Explorer tends to clip resized images rather than actually resizing them and that Webkit-based browsers such as Google Chrome and Safari will resize and stretch images in strange ways. Let’s take a look at both of these issues because they have similar underlying causes.

 

SVG Clipping Issue in Internet Explorer 9

Large HTTP 1.1 Icon

Large HTTP Icon for our SVG test

 

 

For this test, I edited the icon for my HTTP Viewer, making it four times as large as normal and adding a little green star to its top left corner.

This larger version of the icon is 256×256 pixels, but we’re going to use our HTML img tag to resize it to 64×64. Any standard browser can resize an image with the height and width attributes allowed in this tag, and since we’re dealing with SVG, this should be even less of an issue; SVG is meant to be scaled without having to lose any quality of the image.

Here’s what the SVG looks like scaled down to 64×64 in several different browsers:

SVG Sizing Comparison

Five popular browsers scaling our SVG image to 1/4th the size

It’s pretty obvious that one of these things is not like the other. So why did Internet Explorer 9 clip our image to 64×64 rather than just resize it? Let’s check out the SVG code using a text editor (my favorite by far is Notepad++):

 

SVG Code Header

SVG header for the image in this resizing test

What we can tell from this SVG header is that the image is clearly 256×256 pixels, as defined by the width and height attributes. But as it turns out, there’s another parameter that we’re missing that IE9 is looking for: viewBox.

While the width and height parameters set the size of the image, it is the viewBox that determines the viewport of the image, or what section of the image should be seen by the user at a given time. When this isn’t present for Internet Explorer 9, instead of resizing the image with the <img> tag, it will actually use the width and height to instead define the viewBox, thus clipping our image.

So let’s edit the code a little and include our viewBox:

SVG Header with viewBox

Our SVG header with the viewBox defined at the end

Here, you can see viewBox added. The parameters should be obvious to anyone familiar with plotting points on a graph:

viewBox="[Starting X Coordinate] [Starting Y Coordinate] [Ending X Coordinate] [Ending Y Coordinate]"

And in this case, it’s simply saying that the viewBox is the exact same size as the image. Now that we’ve added it, let’s take a look at how it renders in our browsers one more time:

Working SVG resizing comparison

Everything is looking good!

Great success!

Now that we have our Internet Explorer resizing issue out of the way, let’s see what can happen if we try rendering and resizing images with different SVG size parameters.

 

Common SVG Resizing Problems

Robot Icon

SEO Warp's robot icon

In this next test, we’re going to use modified versions of the robot icon that I created for in SEO Warp’s web crawler.

Here, we are going to take this image and plug in different values for our width, height, and viewBox parameters and see how the various browsers handle them.

The following two images have these different versions displayed at 64×64 pixels and 32×32 pixels with the HTML <img> tag’s height and width attributes respectively:

SVG Size Grid

SVG images scaled to 64x64 and rendered in different browsers

Smaller SVG Size Grid

SVG images scaled to 32x32 and rendered in different browsers

The SVG header parameters for these images are:

  1. height=”100%” width=”100%” … viewBox=”0 0 64 64″
  2. height=”100%” width=”100%”
  3. height=”64″ width=”64″ … viewBox=”0 0 64 64″
  4. height=”32″ width=”32″ … viewBox=”0 0 64 64″
  5. viewBox=”0 0 64 64″
  6. height=”64″ width=”64″
  7. height=”32″ width=”32″

It’s no surprise that Chrome and Safari display the images so similarly since they both use the Webkit rendering engine to draw their pages.

Here are a few things that we can tell from these tests:

How the SVG viewBox works

How the SVG viewBox works with your browser

The Webkit-based browsers Chrome and Safari require height, width, and the viewBox to display properly. If the width and height are either defined as something as useless as 100% or if they aren’t defined at all, these browsers will make a guess as to what the dimensions ought to be based on the points and shapes defined in the body of the SVG file. Because of this, images will tend to get squished as shown in tests #1 and #5 where the viewBox is defined, but the height and width are either useless or undefined.

Also in these Webkit browsers, if the width and height are set but the viewBox is not, the viewBox will be set to the width and height. This is why in test #2 the images are crammed into the upper left-hand corner: 100% gets converted to an actual number when the image is being rendered; we could have just told the rendering engine that the image is 4098×4098 pixels or something equally outrageous. In the SVG file, the plotted points are really small in comparison: the points for the corners that are drawing the robot’s head are defined somewhere around (16,55) (48,33). In this massive field that we’ve defined for our viewport, it’s no surprise that the image gets crammed into the upper left-hand corner.

Internet Explorer 9 seems to ignore the width and height in the SVG for the most part. It will start drawing out the image based on the plots of the shapes in the SVG’s body. The viewBox is used to define the boundaries of the image. Once IE has those, it will cut out the representation of the SVG and use that render for any HTML transformations.

The safest way to implement a basic SVG image is to set the height, width, and viewports explicitly and give them relevant dimensions, like in examples #3 and #4.

I hope this post has been helpful.