Hey folks! My name is Chris (the formal version, Christopher, is reserved for my parents & professors when I get in trouble) and I’m the newest addition to the SEOgadget family in the San Francisco office. I’ve optimized for huge, complex websites like Macy’s and CafePress where I built enterprise-class reporting systems. I’m not much of a programmer but I do love hacking things together and just learning stuff in general.
With that said, I’d like to share something very cool I found recently that may help your SEO site auditing and tracking purposes.
Display Webpages for Site Audits
I frequently find myself in a position where I need the image of an entire webpage to drive home my argument for a site change. However, the final product may vary depending on the size of my monitor because I’ll have to take multiple screenshots by scrolling up and down. For example, below is my feeble attempt to capture the entire SEOmoz home page.
This is great when I’m highlighting above-the-fold concerns but things can get archaic pretty quickly when our team is proposing conversion rate optimization initiatives.
The solution to my graphical woes come in the form of webkit2png, a Python based command line tool that creates a .PNG for webpages. With just a single (and super simple) line of code you can make an image out of any website on the internet! Thus, my previous attempt has been refined to an individual file.
The image is no longer butchered into different parts and you won’t have to put them back together like a jigsaw puzzle. It now looks worthy enough to be included in a SEO site audit if I may say so myself. =P
Website Monitoring (a.k.a. Stalking)
The use of webkit2png isn’t limited to just site audits but can be extended to monitoring website changes. This is particularly useful for difficult clients who seldom keep you in the loop…such as an entire site redesign that obliterates all organic search traffic! If you run this every week you’ll be on top of your game when you have files to refer back to when disaster strikes.
Taking this a step further, it’s highly instrumental for competitive site stalking when you need to quickly identify any on-site changes to track positive or negative outcomes. Did they switch up their internal anchor text, re-organize their global navigation or remove a ton of ads and replace them with unique content?
The example below is from the Macy’s home page for the last three weeks. It’s immediately apparent they routinely test the effectiveness of their product assortments, images, marketing copy and links on the page. Now try running the same thing for different page types and you’ll get some insight on which pages are the most important from a business standpoint.
Regardless of how you decide to use webkit2png it will be a great addition to your proverbial SEO toolbox.
Gimme Gimme Gimme!
Everything you need should already be installed so just find your Terminal and plug away by entering the following command to download the required files (you can just copy and paste)…
git clone https://github.com/paulhammond/webkit2png.git
Although you won’t have the pre-requisites available at your finger tips, the setup process is easy and well worth it in the end. That being said, you’ll need to download Cygwin – make sure you extract the Python interpreter and Git packages when prompted! Once that’s completed you can obtain the required files with the command above as well.
Assuming everything is setup properly just type the following into your command line (replace URL with your website of choice)…
python webkit2png http://www.URL.com/
Wait a few seconds for it to run…
…and then check your directory where a total of three .PNG’s should be waiting for you like presents on Christmas morning. You did it – congratulations! =]
Need Help? Check out this guide from Distilled on how to navigate your folders.
I’ve shown you how to run webkit2png thus far for a single URL but that doesn’t do it any justice. Its real power comes into play when you can automate everything and capture screenshots for dozens if not hundreds of webpages in a single run. Below is the exact script I use on a daily basis to grab a bunch of images first thing in the morning.
python webkit2png -F -D ~/Desktop/chrisyee –delay=5 -do chrisyee http://www.christopheryee.org
To break it down: -F only creates the full-size version (excludes clipped and thumbnail), -D saves the .PNG into a directory on my Desktop named “chrisyee”, –delay=5 rests the script for 5 seconds (just to be nice), -d appends the current date to the file and -o does the same with “chrisyee”.
Here comes the fun part – create multiple lines of code like the one below or more…
python webkit2png -F -D ~/Desktop/google –delay=5 -do google http://www.google.com
python webkit2png -F -D ~/Desktop/bing –delay=5 -do bing http://www.bing.com
python webkit2png -F -D ~/Desktop/yahoo –delay=5 -do yahoo http://www.yahoo.com
…and save it as webcapture.sh. Then execute it with bash webcapture.sh and enjoy your morning coffee like I do.
Don’t be afraid to get creative and try new things with it. For example, here is a 15-second video of the Yahoo home page for the first 31 days of 2013.
I would love to hear your thoughts on this and how you use webkit2png for your SEO projects in the comments below!
Photo Credit: br1dotcom