Using Webkit2png for Audits, Stalking and More!

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

FOOD FOR THOUGHT: What happens when you run this on a site that uses Javascript?

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!

Mac Users

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

Windows Users

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.

Instructions

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.

Advanced Automation

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.

Be Creative

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



Stay Updated: Sign Up for Webinar & New Blog Alerts

16 thoughts on “Using Webkit2png for Audits, Stalking and More!

  1. Niladri says:

    Nice tips. For manual full page screenshots there is a very easy to use plugin called Webpage Screenshot. Try it.

    Best
    Niladri

  2. Amazing first post Chris! I’d love to see all of the different possibilities for automation with this :D

  3. Chris Yee says:

    Thanks for the props, Richard – I have more ideas down the pipeline so stay tuned!

  4. John Murch says:

    Great stuff! Already started to use this – great for cron client’s sites and pages to make sure they have/haven’t changed.

    Thanks :)

  5. Chris Le says:

    You just gained a new fan!! AWESOME post, dude! Command line FTW!!

  6. Chris Yee says:

    @ Chris Le & John Murch – glad you two love it! Plenty more of these geeky stuff coming soon. =]

  7. Adam Whittles says:

    Hi Chris, really interesting post!

    I had a similar issue when creating site audits and came across the Screen Capture (by Google) Chrome extension. It allows you to capture the whole page and even add annotations before saving it to your computer! Of course, not quite as cool as your method ;-)

    https://chrome.google.com/webstore/detail/screen-capture-by-google/cpngackimfmofbokmjmljamhdncknpmg

  8. Bruce Werdschinski says:

    Awesome stuff Chris, hadn’t thought of doing using this kind of tool for SEO and CRO before. We use screenshot tools in web development (for quality assurance and cross browser discrepancies) but you’re on a winner with using it for SEO audits and proposals.

    Looking forward to seeing what you come up with next :)

  9. Geoff says:

    Hey Chris, this is great. Thanks for the detailed instructions.

  10. Chris Yee says:

    @ Adam – thanks for the heads up! I do use Screen Capture but I got lazy after doing it everyday for 6+ websites and decided to find a workaround…haha.

    @ Bruce – appreciate the compliments, Bruce! I have a LOT more ideas coming soon so feel free to stick around. =]

  11. Sean Lade says:

    Hi, there’s a chrome extension for this that I use. I’ll have a look for the name when I get to work today

  12. Sean Lade says:

    But it can’t be automated. Your piece on automation is quite sexy, I should really read to the end of the post before I comment

  13. chris says:

    I’m using the terminal in Mac, and when I copy and paste the line you provided im getting a syntax error. Any ideas what could be causing that?

  14. Yasir says:

    This is great stuff. There is another command line tool for Windows that can be used CutyCapt. I does the same thing and by using it with Windows Scheduler, you can do screenshots on daily basis or whenever you desire.

  15. Barry says:

    Check out http://www.trackedcontent.com/ it does a great job of capturing what a page looks like and also the source code which you can compare with previous HTML markup.

  16. Matthew Brookes says:

    Hi Chris,

    i thought this was a great article when you wrote it, and then the other day discovered the BBC News team had a very similar issue but for different reasons. They essential need to test build changes at different resolutions and a lot of them. To save time and over come this they have built something called Wraith (https://github.com/BBC-News/wraith). The best bit about this tool is that it produces diffs although it does rely on another copy of the site (i am guessing you can customize how it works though) !

    Any how thought it might be of interest. I can think of a good few user cases it covers not least highlighting the experience someone gets on different screens.

Comments are closed.