A while back, I started thinking about how the different status codes and redirects (301s, 302s, etc.) might look visually. I started drawing up some ideas for what was going to be an illustrated blog post, but then it suddenly dawned on me that I was slowly creating an infographic. I then proceeded to have a conversation with myself about how I could never create an infographic and was probably doomed. Depression turned into mania which turned into depression - this happened about 47 times between 9:00 and 9:14am. Actually, that's the start of my typical day.
I could go on, but I'll just cut to the chase. I took the most useful HTTP status codes, from an SEO perspective, and illustrated how they work. It's half cheat-sheet, half-infographic, and mostly just an excuse for me to have some fun. Hopefully, somebody learns something. This is completely my fault, so if you gouge your own eyes out with a spork to escape the horror, don't sue SEOmoz.
Click the image to see the full-sized version. A few technical notes:
- As I mention about 301/302, I've abbreviated some of the official names for design purposes.
- The visual format required a black-and-white interpretation. Search-engines handle 302s inconsistently.
- Rel-canonical is obviously not a status code, but it's a functional relative that I felt should be included.
Comments are welcome. Did I miss any of your favorites? There are dozens, of course, but many are similar or almost never used. The 400-series alone has dozens of status codes, actually, most of which I had honestly never heard of in 13 years of full-time web work.
When I was about 90% done with this infographic, I found out that fellow SEO and Moz friend Richard Baxter created a status code diagram earlier this year. It's pretty cool, too, and you should check it out.
BTW - I've been running some tests on the meta refresh, and it functions essentially like a 301 in the search engines' eyes, with some weird differences. For example, Google seems to not show the page with the meta refresh unless it has substantial content (and even then, sometimes not). Bing, however, seems to show it regardless.
e.g. Compare https://www.bing.com/search?q=randfishkin.com to https://www.google.com/search?q=randfishkin.com
Rand,
We have some Russian (.ru) URLs that meta refresh over to a .com page.
The Russian search engine Yandex treats meta refreshs differently than Google or Bing. To deal with this, we're going to essentually duplicate our own content so Yandex has something to look at. In theory, Google and Bing will treat the Meta as a 301 and never notice the duplicate content, while Yandex will index it.
Just thought I'd share, not sure if whatever you're working is looking at international stuff at all.
Confirmed - my Dad had a lot of trouble creating a 301 redirect on his old domain / hosting (one of those old subdomain.hostcompany.com style sites) - so we left a 0 second meta refresh in the header redirecting to the new domain. It worked - at least as well as a 301.
I suspect that as long as the behaviour isn't suspicious (redirect to same theme, similar / same content etc) then there would be no reason to disregard the link value during the transition. That's my guess anyway.
I ran similar tests as well and got similar strange results, espesially with Google. It is known that Google grabs meta description from 3 differnt sources and three different meta descriptions might be shown for different search queries, so the source of meta description probably depends on it (search query, I mean). Google prooves all the time that it is more flexible and unprediscable than other search engines.
P.S. As you know, page title tags sometimes are also shown in different way in Google search results. :)
I know they're trying to establish best practices, but Google's official advice on META refresh and Rel-canonical just don't seem to match reality, most days. I don't think I'd use META refresh in place of a 301 unless I had to, but it definitely seems like it's effective in many cases.
Is there not something about the time of the meta refresh dictating how it will be treated by Google? If refresh happens within a few seconds its treated as a 301, else may be treated differently. Can't remember where I saw that, perhaps a GWT video.
Good job Peter... a very clear infographic.
Am i wrong or you did an homenage to Rand designing the man wearing yellow shoes? Loved it :)
Wow, I've seen this infographic in various stages of development and never realized the homage of the yellow shoes. Nice!
Where are my sunglasses?!
Glad I wasn't the only one that noticed those yellow shoes... ;)Nice job, Pete. I tip my sombrero to ya!
Nice avatar!!!
Great infographics by Dr. Pete!
Well, you have a great eye sir nice change in the avatar!
Good catch - that was indeed an homage to Rand.
Love it Dr. Pete! I'm kind of thinking we should add this as a downloadable resource for consultants (half kidding...). They can print out and insert as an add on for clients...whitelabel even ;) Thomas is right its obviously the first crucial piece to check when there are ranking issues.p.s. love the visitor's shoes. you know...cuz he HAS to have shoes. :)
I agree with Joanna's thoughts of making this downloadable, 1/2 of her half-kidding.
IMPRESSIVE, Pete! More importantly, it's a darn good and informative graphic!
My whole office thanks you for this!
The Link Juice debate has been a big discussion internally especially with some projects we're working on that are coming up, maaan this was perfect timing.
MY whole office thanks you for the nice comment. Granted, that's just me and the cat. The cat didn't actually thank you out loud, but I could see it in her eyes.
Nice job for your first infographic!
Yes these are the standard ones that I go by.
Instead of Fiddler, I use HttpFox (FF plugin) nowadays to do my HTTP status testing which I actually do a lot.I would recommend it.
On member Q&A, it's amazing how often I end up checking page headers. It can be incredibly dangerous to assume that your site is working the way you think it's working.
Very nice infographic - will be added at the pin board for sure!
It would be really a comprehensive graphic if there were meta tags (noindex/index, nofollow/follow), robots.txt and x-robots tag informations included, too. Like you added the rel canonical tag. In my opinion they all kind of belong together.
Strongly agreed! Let me add one more! "Meta Refresh tag" and how search engine treats it!
Ahh, you forgot my favorite status code.
418 I'm a teapot
Any attempt to brew coffee with a teapot should result in the error code "418 I'm a teapot". The resulting entity body MAY be short and stout.
https://tools.ietf.org/html/rfc2324
Well done.
Great infographic - will make a nice addition to my wall of cheat-sheets.
This is more of a joke than a proper reccomendation, but you could have perhaps come up with a single graphic element to illustrate each status code. For example, the 302 redirect could be a set of dripping fangs (Because of the way it sucks away link juice. Hilarity ensues.)Come to think of it, it's probably a good thing I didn't make this infographic. There would have been way too many zombies and vampires.
My design talents rest solidly on drawing a couple of elements and then re-using them gratuitously. I believe the technical term is "cheating" ;)
Ha, excellent. Fake it 'till you make it. Never truer words spoken.
It's less cheating, more being smart. ;)
No zombies here, but we did just come out with a funny version of HTTP Status codes. Check out the picture for a 402 error, it's our favorite.
Great infographic, it reminds me of this one: https://sixrevisions.com/infographs/server-headers-101/
But more detail from an SEO perspective is always helpful. - Jenni
Jenni you rock. This was the good work of my particularly stellar SEO team. Love those guys :-)
https://sixrevisions.com/infographics/server-headers-101/
It did exactly what we meant it to do...
There were a few very minor errors (highlighted by the SIXrevisions crowd) - but it's ok not to be perfect with an infographic. The real trick is to tell a story and put it right in front of an appropriate audience. That's why I like Pete's work, he's taken an interesting, but oft misunderstood topic, and translated it into a language tailored for the Moz audience. Kudos!
Aargh... I knew I forgot something - meant to link to your infographic at the end of the post. Correcting that now...
Great job! We tweeted your link a while back, and it got one of our highest CTRs for tweets for the month, so it shows there's a demand for the information. One of the strongest points - aside from the design and content naturally - is that people are more likely to link to the page rather than the image itself because of the way you presented it. There's definite value in a post about getting people to link to a page rather than the infographic itself. - Jenni
This graph is fun :).
But where is the 410 ?
Gone ;-) Although the 404 Description seems to give the impression that they're the same thing.
In retrospect, "Gone" was a poor choice of word for my description. I should've probably said "missing".
It's cute & very easy to understand. Easy to glance through in case of confusion.
Very useful information. It would be help to have information on implementation for CMS or hosting providers. Thanks.
You can find a complete list of http codes at:
https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
If you're interested in a complete list. However, you've coverted the errors most often seen.
I originally was going to put a "Family Tree" with the full list at the bottom, but then it ended up being 4-point font that I had to squint to read :) The 400 Series alone gets a bit ridiculous.
Excellent graphics you got there. Cannot recall I've seen a 503 though..
It is a misleading guide.
Those are HTTP 1.0 status codes not HTTP 1.1 , which vary.
So you need to know what is your server using because in example HTTP 1.0 Code 302 = HTTP 1.1 Code 307 Temporary redirect (HTTP 1.1 302 is Found)
While that's technically correct, I think it generally helps to keep the language consistent. While the 303/307 were intended to replace the 302 (which we all officially use incorrectly), virtually no one has adopted those changes. I debated go into those technical details, but ultimately felt the debate served very little practical value.
Very nice and helpful infographic! It's certainly good for someone like me who doesn't quite remember what each code means all of the time.
Perfect! Have been putting together a deck for internal purposes. :)
This is perfect to share with one of our designers who continually asks the same questions about these. :) Thanks for the .gif
Nice Infographic! The http staus codes guides shown above was designed greatly . The above http codes help us to boost rank in google.The description shown above was quie impressive & help graphically to understand the http codes.
Timeless post, am stealing for my offline doc :)
Cool. Great to look at if you need a quick check! Thanks, Dr Pete!
Good job! I was planning to create something like this only but came across to this from Distilled blog!
Great! This was really helpfull! Thanks.
I am getting 301 message. Is this causing my site not to get indexed? Please help noob.
Awesome infographic!! Thank you for sharing!!
Slow to the party here - only just noticed this. But great job on the infographic, and summarizing the resulting behaviors!
This is so excellent
if the rel canonical is an alternative to the 301 redirect, it means that the rel canonical can pass link juice (like 301)?
While they do technically have different uses, rel-canonical does seem to pass link-juice in most cases.
Awesome infographic! But, if you hadan 500 server error, probably you will not have link juice and a lot of bounce rate.
Am I correct?
Well I understand that even pages with 500's can get links but, what's the chance?!
A green-to-red gradient from 200 to 500 would have had added a finishing touch methinks.
Great designed guide, love how the rel canonical tag is there as a lot of new HTML5 features boost SEO rankings
Love the tiny little Roger graphic.
Great infographic. Certainly info that anyone involved in SEO should know.
Nice Infographic......:)
I was nice read indeed! I most of things you discussed were not clear to me earlier.
I've always thought the 301 redirect lost some link juice similar to the 302.. thoughts?
https://www.searchenginejournal.com/google-301-policy-update-from-matt-cutts/29911/
301 do not pass the link juice from the old to the new page in 1:1 ratio; something gets lost in the redirection.
302 simply do not pass link juice (logical being it a "temporary" redirection).
In my experience - yes, it definitely loses something. In some cases even removing an entire search result until the redirect was removed (after several months). - Jenni
There's a small amount of loss, maybe up to a few percent, depending on the situation. Recent comments from Google suggest it could be close to zero in some cases (when used sparingly and appropriately). Of course, it's very difficult to measure.
In all of these cases, I had to make the diagrams a bit more black-and-white than the reality. The 302 is probably the grayest example, though. How search engines handle indexing 302s and passing link-juice isn't really consistent.
Perhaps you can show the amount of 'juice' being just a little lower in the pitcher for 301 redirects. From my experience it's definitely not passed along fully. I think there's a Matt Cutts video out there somewhere where he talks about this.
-B
nice post & image lot of
I like it a lot!
The "cast of characters" works. It makes it easy to understand. People should print this out and pin it to the wall.
we just did ;)
Good info graphic hope it gets some traction in the web dev and SEO world =)
Wow this is great, Pete!
Checking http status is always the first thing I check when there is ranking problems.
Definitely going to have it printed in A3 format and put it on the office wall for everyones pleasure.
Nice infographic. Are you going to expand it at all in the future to include more status codes?
Perfect timing, just yesterday we were moving one our customer website from one domain to another, this great chart to stick up on our office wall as a reference.
Hi,
Nice graphical representation of http status code. It could be even helpful to optimisers if you have included META refresh, JavaScript and other redirections aswell in this infographic.
I would also include the status code 410 (Gone). This should be used for pages that have been purposefully removed (ie: Blog Spam, etc.)
Here's a Google webmaster help article that explains it in more detail:
https://www.google.com/support/forum/p/Webmasters/thread?tid=1bc5206b5e0fac47&hl=en#all
Agreed - 410 is great for indicating a permanent removal of content rather than just a temporary state of content unavailability.
Great Infograph Dr. Pete!
Great infographic! Seriously, for your first one you did a great job. This would be a really handy cheat sheet for newbies.
Everyone's been so nice that I think I'm just going to claim that EVERY infographic is my first one ;)
I just have to say +1 for Manbearpig reference.
Http Live Headers is also a nice Firefox plugin that allows you to see what header status codes your page is returning.
BTW, loving the simplicity of this diagram. I'm sending it along to my developers :)
Ha, great diagram. I particularly like the juice jug, it made me thirsty even.
Hey, it looks nice, and you have just given away some secrets about infographics... you don't have to have lots of statistics and pie or flow charts to work. You just need a colored background, big sans serif fonts, and a few icons! (Assuming, of course, that you've already boiled down your information into a basic presentable format :)
Cheat Sheet works better for me, but whatever you call it this is a good, simple resource.
Nice idea, simple but funny presented infographic. Nice mania you have going for you there, go create a few more :)
Thanks for this infographic guide to http statua codes, actually I was aware of these codes but I was confused about passing out of link juice. But now you have cleared my doubt...........Thanks again
Your infographic horror turns in to great source for SEO guys.