You will have probably noticed that Google added a new addition to their search results a little while back. Verified content creators can now have a headshot and byline displayed alongside their links in the search results.

In this blog post you’re going to learn how to set up Google Authorship so that you too can start appearing in search results.

Why is Google Authorship Important?

Search Result with Author Headshot

Google Authorship is important for a number of reasons. The simplest being that it helps to make your content stand-out amongst the other links in the search results. Displaying the author’s picture helps to create an emotional connection with the searcher, increasing the likelihood that your links will be clicked on.

Google Authorship works by creating a link between your content and your Google+ profile. The image that is displayed in the search results is taken from your Google+ profile picture. If the searcher clicks on your picture in the search results they are taken to your Google+ profile. Your name and current Google+ follower count is also displayed alongside the search result. This all helps to build credibility with the searcher and increases the visibility of your personal profile.

Linking Your Content to Your Google+ Profile

There are two different ways to set up Google Authorship for your content. Authorship is assigned on a per-page basis. If you have a blog with multiple authors (such as the Treehouse Blog) you can therefore connect the Google+ profiles of each of the authors to their own content.

Option One: Verified Email

Your first option is to use an email address to verify that you are a contributor to a site. Google will then look for a byline on the page to make the link to your Google+ profile.

For this to work your email address will need to be on the same domain as your content (e.g. “matt@mattwest.io”). If you can’t meet this requirement you will need to use option two.

To get set up using the verified email strategy follow these steps:

1. Make sure that you have a Google+ profile with a recognisable headshot set as your profile photo.
2. Ensure that the page you wish to claim ownership of contains a byline with your name as it appears on your Google+ profile (e.g. “By Matt West”).
3. You now need to add your email address and website domain to your Google+ profile. Google has a little tool that will do this for you. Visit https://plus.google.com/authorship and submit your email address.

Your content will now be linked to your Google+ profile. Remember to repeat this process for any other sites that you contribute to.

Option Two: Links

If you don’t have an email address on the same domain as your content, you can set up Google Authorship by adding a special link to your page. This method will require some minor changes to your HTML.

To use this method add a link to your Google+ profile somewhere on the page. The byline is usually a good location, but it can appear anywhere.

<a href=“http://plus.google.com/103780700566333678292?rel=author”>Matt West</a>

The key here is to add the ?rel=author parameter to the end of your Google+ profile URL.

Note: If you use WordPress, there is a plugin available for managing this process. Once installed, all you need to do is add your Google+ URL to your user profile. ***

Once you’ve placed the link on your pages you need to add the site domain to the Contributor to list on your Google+ profile. This can be accessed by editing the Links section. You don’t need to add the individual URLs for each piece of content, the main domain will do just fine.

Testing Authorship

Google’s Rich Snippets Testing Tool

It might take a little while before your headshot starts appearing in search results. To test that you have set up authorship correctly you can use Google’s Structured Data Testing Tool.

Enter the URL for one of your pages and click Preview. If authorship is set up correctly you should see your headshot and byline in the result preview.

If you used the verified email method, the Authorship Email Verification tool will confirm that your Google+ profile has been linked to the domain.

A Note For Publishers

Publishers can connect a website to their Google+ brand page by adding a link to their site’s home page. This time the URL parameters should be set to ?rel=publisher.

<a href="https://plus.google.com/+gotreehouse?rel=publisher">Treehouse</a&gt;

Next you need to make sure that the Website field on your Google+ brand page is set to your website’s home page. You can use the Structured Data Testing Tool to check that everything is set up correctly.

Connecting your website to your brand page will make your site eligible for Google+ Direct Connect.

Final Thoughts

Google Authorship is so simple to set up that there’s really no reason why webmasters shouldn’t be taking advantage this. The visibility boost in search results can drive more traffic to your site, and help to raise the profile of both authors and publishers.

I’m interested to see how other search engines will adopt similar authorship features. Relying on Google+ profiles to verify content creators keeps the current implementation firmly within Google’s walled garden. Perhaps we will see the introduction of a standardized verification strategy that would allow other search engines to implement similar features.

Useful Links

• Link your Google+ profile to the content that you create
• Google: Structured Data Testing Tool
• Google: Author information in search results

The post Setting up Google Authorship for Your Website appeared first on Treehouse Blog.

I've met many web developers over the years and the common theme is that they tend to specialize in a specific aspect of web development. They're either designers, JavaScript coders, server-side experts or perhaps a tiny bit of all of them. Rarely do I meet someone who is incredibly well-versed in the full-stack having an amazing design acumen and being able to take a vision and bring it to life, front to back.

Jonathan Snook is one of those rare breeds and also an influencer in the web development world. His skills have made him a sought after speaker and writer and afforded great opportunities at companies like Yahoo! and Shopify. He's now venturing into product management and we catch up with him to see how that's going and his advice for anyone looking to jump into that role.

Sure thing. My name is Jonathan Snook and I'm a web developer based in Ottawa, Canada. I've been developing on the web since before Netscape hit 1.0. I've had the pleasure of working on hundreds of projects both professionally and personally. I also speak at conferences and put on workshops and have authored or co-authored three books to date, the most recent of which is Scalable and Modular Architecture for CSS (or SMACSS for short). These days, I'm a product manager at Shopify based here in Ottawa.

Opportunity and misunderstanding! Until earlier this year, Shopify never had a product team. I was working on the design team focused on our core product. As a company, we have traditionally had a very egalitarian approach that allowed anybody to work on an idea. Shopify was growing quickly and really needed product ownership to keep the team and product focused. A product team was being assembled. If you're picturing it being like the Justice League, it's just like that.

The role, as it was described to me, sounded much like the work I was doing as a designer. Talk to customers, the support team, and other stakeholders to evaluate which problems we should be solving and testing our work to ensure that we were solving our problems well. This sounded fantastic and I jumped at the opportunity. I misunderstood just how much work it really was to define a solid product direction and be able to communicate that effectively both within the company and out. As a result, I've not done nearly as much hands-on development as I expected I'd be able to continue to do.

Shifting into product management has meant learning new skills. I've been doing a lot of reading. I've been researching what makes a good product manager. I've been researching what needs to happen for a team (or multiple teams, really) to build a good product. It's been a great opportunity for me to grow and has been very exciting.

I'm still coding when I can but not nearly as much as I used to. However, I still read the blogs and twitter posts. I try to stay on top of the industry, and I still get to speak and attend great conferences where I can expand my knowledge. I still participate on pull requests and technical discussions. I still feel like I've "got it", at least from a technical conceptual level. Actually spending a day writing code, on the other hand, might prove a little harder. Just don't tell anybody that!

I've been fortunate to have a well-rounded career having done design, front-end development, and back-end development. One of the advantages to having this breadth of skills is the ability to deeply understand the requirements at all levels. I'd be lost without the ability to understand the design and technical hurdles. I wouldn't be able to engage my co-workers on the same level. They're very smart people that can code circles around me but at least I can understand what they're doing and why they're doing it the way they are. I think this is very helpful.

On the bad side, it's not anything you don't see come out of any team. People have different ideas of what we should be focusing on. Sometimes I don't communicate the vision and direction well enough and that can create confusion and conflict. Those are skills I'm working to improve upon.

At Shopify, we're dealing with a 7 year old codebase. The team often wants to work on refactoring things instead of the shiny new features. I'm the one who wants to implement the new shiny features.

Of course, with all things, balance is key. One of the things that I liked when I worked on the design team at Yahoo! was the regular maintenance cycle that was built into their process. Clean up files, fix naming, get rid of cruft. As Shopify grows, we know we need to continue to keep this balance. I think we're on the right track, even if sometimes we disagree when we should be doing feature development or should be doing refactoring and maintenance.

Even though we had product managers at Yahoo!, I rarely interacted with them. The role was largely foreign to me until I decided to jump in head first.

If you want to be a good product manager for a technology company then I think a well-rounded background is good to have. Then again, I think that for nearly any role you might take. (And I believe that working for a web agency is a great way to gain that experience. Although, I'm probably biased since that is the path I took.) A good product manager needs to be able to communicate well. A good product manager needs to have empathy. At Shopify, for example, I run a store. In fact, I sell my book, SMACSS, on Shopify. This helps me understand some of the problems that our customers face every day. I don't think I could manage a product I didn't believe in.

For those looking to transition from development to product management, having that passion for the product is going to be key. For me, it was an opportunity to have a bigger picture of the entire ecosystem and to have more sway on the direction across the entire system. I wanted this because I want Shopify to be amazing. I want it to be something that people enjoy using every day.

If you want to become a product manager, don't let the word "manager" scare you. Don't worry about losing your skills. The industry changes fast but not that fast. It just feels like it does. If I decide that I want to leave product management and get back into coding full-time, I feel confident that it would be a reasonable easy transition back in. (Then again, it's only been 6 months. We'll see if I think the same thing in 2 years.)

Frameworks don't code your entire site. Take any framework and you still have to add your code on top of it. This was the problem I was trying to solve. What problems are the frameworks trying to solve and how is the code you're writing going to fit in with everything else.

That's why SMACSS is written the way it is: it's not a framework. It's meant to describe a process. It describes a way of architecting a site. It's a documentation of the learning process I went through in building large projects with large teams.

SMACSS came out of real-world development. It's not pie-in-the-sky thinking and it's not a lone wolf approach. It's an amalgamation of many ideas that were already floating around.

As an industry, we've been seeing more and more designers and developers approach site design as a modular system instead of as a series of brochure-style pages that don't change. The modular approach means that parts can be moved around. The more autonomous the parts, the easier it is to move them and add new ones or remove others.

SMACSS, being a scalable and modular architecture for CSS, is catered to the dynamic needs of UI and UX development.

Of course, it's always easier to be able to write everything from scratch but that doesn't always happen. I had that privilege at Yahoo!. But coming into Shopify, I was contributing to an existing project that had already been under development for some time. "If it ain't broke, don't fix it" is a familiar mantra but refactoring should be something that projects make time for. Refactoring removes the technical debt that has built up allowing for faster development for new features. As they say, "there's no time like the present" to begin implementing a modular approach to a project. Just do it one piece at a time. That's the approach we took at Shopify and one we continue to take.

It depends on the process! When I wrote SMACSS, I wanted to present a number of concepts that could be taken in part or as a whole since that's the way I am when it comes to development. I'm unlikely to take someone else's project wholesale. I'm going to take the pieces that work for me and leave the rest.

Have you seen the Twitter client ecosystem?! Yeah, I think I'm okay having let it die. I'm happy with the small success it had (which wasn't really that much to begin with) and enjoyed the process of building the app. Alas, my time was better focused on other projects.

Thank You Jonathan

Jonathan, thank you for taking the time to chat with us and for your great advice on transitioning to product management. If you'd like to learn more about Jonathan be sure to visit his blog and follow him on Twitter. You can also find out more about SMACSS at the project site.

Another chance to catch the most interesting, and important, articles from the previous week on MIT Technology Review.

We’re really excited to announce our new course on Sass! Sass is a powerful language that extends CSS with handy features like nesting, variables, mixins, math operations, and more, in a CSS-compatible syntax. Because of this, many of today’s popular websites, applications, and frameworks are built using this amazing CSS preprocessor.

If you have yet to give Sass a try, Sass Basics is the perfect course to get started. And what better way to learn than from Hampton Catlin, the creator of Sass! After he walks you through the simple installation process you’ll get coding right away, uncovering all of Sass’ super powers.

Have fun, and as Hampton says, “Once you feel the power of Sass pulsing through your veins, you won’t be able to control yourself!”

Sass Basics

The post Learn Sass on Treehouse appeared first on Treehouse Blog.

There are very few icon sets as comprehensive as PictoFoundry’s Elite Pro. With over 850 unique vector icons, Elite Pro should be your first stop when hunting for that unique combination of icons you need for your project. So we’re delighted that our sister-site, MightyDeals.com, has been able to arrange a huge 85% discount on the package.

A mixture of filled and outline icons, covering everything from travel to technology, sports to fashion, Elite Pro has an icon for just about anything you could need.

Need to tweak them a bit? No problem, the icons are supplied in AI, EPS and PDF formats so you can customize to your heart’s content. On top of this, you’ll also get PNG files in the most popular sizes: 24×24, 32×32, 48×48, 64×64, 80×80, 128×128, 256×256, and 512×512 pixels.

But that’s not all! The icons are also supplied as a set of 13 webfonts, which means you can run them on your site as scaleable fonts and color and resize them in your CSS; perfect for responsive sites where the icon scheme needs to be modified on the fly.

Free updates are included, so you’ll receive periodic updates, with new icons being added regularly.

Particular favorites are the apple, the globe and the ghost; but take a look for yourself, there are hundreds to choose from.

The usual retail price of this icon set is $199, but for a limited time, you can get them from MightyDeals.com for just $29, that’s an amazing $170 saving!

Have you used PictoFoundry’s Elite Pro in a project? Which is your favorite icon? Let us know in the comments.

Merry Christmas Music Bundle from LuckStock – only $14!

As seen in Rob Gravelle's Referencing WordPress's Native Ajax Handler in JavaScript article, Ajax requests go through the wp-admin/admin-ajax.php script. That article presented how to add our JavaScript files to the page using the wp_enqueue_script() and wp_localize_script() functions. Today's follow-up will describe how to hook your server-side callbacks to the admin-ajax.php script.