Thursday, September 11, 2014

Adding Open Graph Protocol (OGP) tags to your Blogger Blog

The Open Graph Protocol is a relatively new way to turn any web page into a sharable social object by adding tags to identify key attributes for that page when shared on a social network like Facebook.  Before we look at these OGP tags and how to integrate them into your Blogger blog, let's take a look at how website links are shared on social networks.

Sharing Links on Facebook
When you share a URL while creating a Facebook status update, Facebook scans that webpage and automatically generates a preview of that content which includes some useful information in addition to the URL you typed:

  • A TITLE for the web page you are sharing
  • A brief DESCRIPTION of the content on that page
  • An IMAGE from the page



Once you publish your status, these extra bits of information become very important, as they will likely influence whether one of your friends will click on the link.  If the image looks intriguing, or if the copy seems interesting, your shared URL will likely be clicked on.

However, sometimes when you share a link, Facebook's automatically generated image, title, and description are either missing entirely or not very compelling. In the post below, notice that there is no associated image or description - just a title and url.



As digital content publishers who want to make our content as sharable and clickable as possible, this can be a real issue.  Fortunately, Facebook provides a number of sharing best practices that can help.

First Step: Learn about the Open Graph Protocol
Facebook describes several open graph tags that it recommends integrating into your site to help Facebook generate previews.  The main tags which Facebook uses when generating previews are:

  • og:title - the title of the page you are sharing
  • og:description - a detailed description of the content on the page
  • og:url - the URL of the web page
  • og:image - the URL of the image you want shown
  • og:site_name - the name of the website you are sharing
  • og:type - the type of content you are sharing (blog, website, article, etc)
The syntax for an open graph tag is similar to other meta tags used in HTML.  For example, the og:title tag can be written as:

<meta property="og:title" content="Title of your Page">

Open graph tags are placed in the <head> section of your HTML file. For a complete description of each tag, visit the Open Graph Protocol website.

How Facebook "Sees" your Page
To understand how Facebook ingests a webpage to generate a preview, use Facebook's Open Graph Debugger.  This helpful tool will allow you to enter any URL and get a "scrape" of what Facebook finds when it scans the page.  It will alert you when there are issues that need to be addressed. 



 It will also generate a preview to show you how your page will appear if a Facebook user shares it on their timeline.

Time to Fix your Blogger Blog, OG style
In a previous post, I discussed the use of Title and Meta Description tags, which are very important for your blog's SEO.  I also described a method of optimizing how Blogger generates title tags to improve your blog's SEO.  Read these posts before you go any further!

Because Blogger dynamically generates the pages in our blog based on templates, we thankfully do not need to manually add OG tags to every blog page/post.  That would be a major headache!  Fortunately for us, we can update a few lines of HTML code in our blog's template that will automatically update all our pages and posts - including any new pages and posts we create in the future.

What we'll be doing is telling Blogger exactly how to handle the TITLE, META DESCRIPTION, and OG tags on 1. your blog's home page and 2. your blog's various posts and pages.  We will do this by using IF statements. 

Here is the code you will insert into the <HEAD> section of your Blogger template:

<!--START CUSTOM CODE-->

<meta property='og:url' expr:content='data:blog.canonicalUrl'/>
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<meta property='og:site_name' expr:content='data:blog.title'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta property='og:image' expr:content='data:blog.postImageUrl'/>
<meta property='og:type' content='article'/>

<b:else/>
<title><data:blog.pageTitle/> - PUT ANY ADDITIONAL TITLE COPY HERE</title>
<meta property='og:image' content='PUT YOUR IMAGE URL HERE'/>
<meta property='og:type' content='blog'/>
</b:if>

<b:if cond='data:blog.metaDescription'>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
</b:if>


<!--END CUSTOM CODE-->

Select this code and COPY it.  Then read on.

Important note: before you start editing your blog's HTML code, you'll want to make sure that you are happy with the template you are using.  Because we're going to customize the code associated with a specific instance of a template, it is important to realize that if you ever change your template for any reason, you will lose the work you're about to do!

Time to Get Geeky: Come Edit Your Template's HTML with Me
Ready? Let's do this. Go to Blogger and click on your blog.  Click on the "Template" button on the left hand menu. 
Click on the "Edit HTML" button and be prepared to feel a surge of geeky neuronic energy course throughout the synapses of your brain.



Take a deep breath.  Repeat to yourself: "It's just a text file.  It's just a text file.  I can handle this!"

Now very carefully find the <title> tag that exists in the code.  Select the title tag code and everything inside it.



Delete it.  Then replace it with the code I gave you earlier in this post.  



Be sure to carefully EDIT the parts of the code marked "PUT ANY ADDITIONAL TITLE COPY HERE" and "PUT YOUR IMAGE URL HERE".

This code creates og:url, og:title, and og:site_name tags that are dynamically generated from Blogger's page url, Blogger's page title, and your blog's title. It then creates og:image and og:type tags (IF the page is a normal post or page).  Otherwise, it creates og:image and og:type tags for your home page which are different.  Finally, it creates an og:description tag that is populated from the meta descriptions that you create for your pages.

Once you are done, click "Preview template".  If you have made any errors or broken any of the code - it should give you an error message and tell you what the issue is.  If your preview looks good, then click "Save Template".

You're Not Done Until You Test Your Pages!
To test your pages, go back to Facebook's Open Graph Debugger and try your pages out. It will give you a preview of how each page will look when shared.



Yeah! That's what I'm talkin' about!

Acknowledgements
I'd like to acknowledge the help of the following two blog posts which helped me greatly in patching together the above code that both improves SEO and adds OG tags to Blogger posts and pages:

Adjust Blogger Title Tags to Improve SEO by Muhammad Faisal
and
How to Add Open Graph Protocol in Blogger Blogs by Muntasir Minhaz

Thanks guys!




Tuesday, March 11, 2014

Linking Google AdWords and Google Analytics accounts

I had a few questions asked about how you can link your Google Analytics account to your new Google AdWords account as required by your new assignment, so I put together a short video walkthrough to show you how to do this:

   

Mentioned in the video is a promotional offer that Google is running where you can get a coupon code for $75 of free advertising on AdWords for spending $25 on any AdWords campaign.  This offer only applies to new AdWords users, so if you already have an AdWords account, you may not be able to take advantage of it.  The details of this offer can be found here.

Also mentioned in the video is this AdWords Help page that has a step-by-step walkthrough of how to link the two accounts.  Analytics Help also has a walkthrough available with screenshots.  

Good luck!

Wednesday, February 5, 2014

Are Blog Posts Read via RSS Feed Readers Tracked by Google Analytics?

A great question came up in class today: If someone reads your blog post through an RSS reader, will their activity be tracked by Google Analytics?

Photo by Robert Scoble


First of all, let's be sure you understand what an RSS feed is and how it is "read" by RSS readers.



This is the icon for an RSS Feed
(design by Stephen Horlander)
.

An RSS feed is an XML document that contains the raw data contained in your blog posts in a structured format that can be easily read and displayed in other applications.  The default setting on Blogger blog is to allow RSS feeds, so there is nothing special you need to set up.  

You can view the RSS file for the class blog at: http://unidigadv.blogspot.com/feeds/posts/default?alt=rss

Note that this text file contains tags to describe the blog:
<title> The title of the blog
<description> The blog description
<link> The blog URL
<managingEditor> The editor of the blog's content
It also includes each blog post that has been published on your blog enclosed in <item> tags. 
<title> The title of your post
<description> The body text of your post (including HTML tags and links)
<link> The URL of your blog post
<author> The author of the blog's content 
This allows other applications (like Feedly) to download the RSS file and "re-publish" the posts.  But does Google Analytics track the user activity of viewers who are viewing the site via a Feed Reader?  The answer, according to Google, is unfortunately no.

Google's Analytics support page states:
Tracking visits from RSS feeds
In order for Google Analytics to track data, it is necessary that the Google Analytics tracking code gets executed. Since most RSS/atom readers cannot execute JavaScript, Analytics will not count pageviews that are loaded through an RSS reader. Analytics requires that the visitor execute a JavaScript file on Google's servers in order to track that pageview.
Since an RSS feed reader only downloads and displays the contents of the RSS file, and not the actual HTML and JavaScript code of the blog itself, Google Analytics cannot track pageviews of blog posts read in RSS feed readers.

Tuesday, January 14, 2014

Social Media Project Roundup, Fall 2013: Part 2

In my last post, I gave you a roundup of the collective social media stats of my Fall 2013 #unidigadv classes and highlighted some of their standout achievements on Twitter, Klout, and LinkedIn.  Now I'm going to showcase the blogs that were created as part of these projects.

Most Visited Blogs

Blogs are not a "build it and they will come" kind of deal.  It is very difficult and time consuming to attract traffic willing to read about what you have to say (and come back again for more).  Creating great content is only the first step - promoting the content so that it is seen is the really tough part.  

We had NINE students who earned over 1,000 pageviews to their blog during the course of the semester - they did a fantastic job attracting and engaging their visitors.  Browse through their blogs and see what they came up with:
  1. Adonica Hennessy - Indi Indie Art - 1,627 pageviews
  2. Bailey Anderson - Travel MerIT - 1,620 pageviews
  3. Maria Mickelson - Spotlight On.. - 1,362 pageviews
  4. Courtney Nagle - High-End Fashion in the World of Social Media - 1,341 pageviews
  5. Janey Meyer - Fashion Flashback - 1,322 pageviews
  6. Shauna Happel - Sports Psychology of Athletic Injuries - 1,275 pageviews
  7. Amanda Vrieze - MarketSolarNRG - 1,223 pageviews
  8. Grace Kammeyer - GracieKEvents - 1,187 pageviews
  9. Kayla Wolthoff - Social Indulgence - 1,089 pageviews

Selected Student Blogs

I really enjoyed reading all of your blogs and presentations. Here are a few that I thought were strong:

Adonica Hennessy - Indi Indie Art

Adonica did a fantastic job finding independent indigenous artists from all around the world to write about.  She personally interviewed a wide range of "Indi Indie artists" such as musician Storm Seymour, beadwork artist Melissa Buffalo, and artist Edwin Conway.




Becca Flynn - A Touchdown on Digital Sports Advertising

Sports marketing is a topic that a lot of students are interested in - but few get beyond writing about favorite teams or players.  Becca did a great job looking at sports from the perspective of a marketer.  She focused on key corporate sponsors such as Gatorade and Under Armour and examined how they are utilizing social media and advertising.



Lindsay Hotze - Pinch Marketing
It's easy to get attention if you have a $100 million dollar budget - but what if you're a small business with a very limited marketing budget?  That's what Lindsay calls "Pinch Marketing" - and she blogs about the ways in which small businesses can take advantage of cost effective marketing techniques to stretch their budget.




Shane Rumpza - A Look at the World of Brand Characters and Ad Stories

Shane is a creative writer who looks at how ad agencies have created brand mascots with elaborate back stories as a way to foster engagement with the brand.  If characters like Mayhem (from Allstate Insurance) and Lucky the Leprechaun interest you - you'll love this blog!



Grace Kammeyer - Gracie K Events
Event planning and flowers with a good dose of Instagram and Pinterest integration.  Grace even created her own infographic!




Maria Mickelson - Spotlight On..

A fun introduction to the Christian music industry, complete with playlists, videos, and concert reviews (including this Switchfoot concert in Des Moines where Maria got to meet the band backstage).


Courtney Nagle - High-End Fashion in the World of Social Media
Courtney did a great job finding influential fashion bloggers, trending colors, and fashionable scarves




Clay Swanson - Major Trendage
Gets my vote for best blog name.  A blog about what's hot in the entertainment world - including a fun post on Bitstrips and one of the most honest excuses for not blogging I've read (that also made for great reading): a review of Grand Theft Auto V.




Taylor Henrichs - 1,000 Reasons Why the Minnesota Twins Suck will be Great Again
Taylor created a blog title that was both provocative and optimistic that resonated with Twins fans. It cut through the clutter and seemed to get attention very quickly. He also had some good engagement through his blog posts with fans on other forums.

Melissa Fager - Online Marketing - A Focus on the Midwest Travel Industry
Informative posts on digital marketing in the travel industry, 




Bailey Anderson - Travel MerIT
Travel and technology go together very well - think of all the ways mobile apps can enhance a visit to a new place. This blog also has the alltime #unidigadv record for MOST COMMENTS in a single project.  There were 52 comments on Bailey's blog - I definitely think she's onto something here!


Megan Buman - Marketing Socially Responsible Organizations
If your organization or business is interested in social responsibility and sustainability in your marketing - this is a great blog to take a look at!



There were many more I enjoyed as well - but I'm running out of time and space here! 

Thanks again for a great semester - if you get nostalgic you can always tune into #unidigadv on Twitter and help the newbies out!

Did you have a favorite blog this semester that I didn't mention?  Tell me about it in the comments!



 

Wednesday, January 1, 2014

Social Media Project Roundup, Fall 2013: Part 1

Every semester, my Digital Advertising students work very hard on a massive project: To develop a professional brand using social media. 

I just finished looking through all of the projects and wanted to take a moment to praise their work and note a few special honors.

The Big Picture

From August 30 - November 15, 2013, my 42 #unidigadv students accomplished the following:
  • Posted a total of 13,184 tweets on Twitter
  • Gained a total of 3,382 followers on Twitter
  • Earned an average score of 45 on Klout
  • Added 3,023 connections on LinkedIn
  • Published 383 blog posts on Blogger
  • Earned 28,625 pageviews from visitors to their blogs
Impressive numbers.  Tweet volume topped my Spring classes by nearly 60% and blog pageviews were up over 20%.  This is a class that has something to say - and has successfully connected with an audience.
 

TWITTER

Top 5 Most Voracious Tweeters
Tweeting is one of those things that seems very easy at first glance - until you do it every day in support of a professional brand.  That's hard work!  Here are the top five #unidigadv Tweeps by Tweet volume:
  1. @flynn_becca - 2,580 Tweets
  2. @kwolthoff - 1,792 Tweets
  3. @ZachHanood - 1,173 Tweets
  4. @Indi_indie_art - 1,018 Tweets
  5. @allyswinton - 794 Tweets
     
Top 5 Most Added Followers
If you want to wield influence on Twitter, you need followers.  Here are the students who added the most followers during the semester.
  1. @Indi_indie_art - added 303 followers
  2. @NFLFantasyHub - added 253 followers
  3. @flynn_becca - added 236 followers
  4. @SchoolComes2nd - added 218 followers
  5. @FroYoAndCardio - added 184 followers
     

KLOUT

Who has the most Klout?
Klout is not a perfect measure of social media influence (sometimes it seems to have a mind of its own), but for what it's worth, here are our five most influential class members according to Klout:  

(Note: Current scores are shown, but students are ranked in the order of their scores as of Nov 15, 2013)
 








LINKEDIN

Most Connected on LinkedIn
When job hunting, who you know is often as important as who you are.  Here are the top five most connected class members on LinkedIn:
  1. Mandy Vrieze - 309 Connections
  2. Adam VanDooren - 276 Connections
  3. Shauna Happel - 219 Connections
  4. Bailey Anderson - 211 Connections
  5. Sarah Ormsby - 202 Connections
Most Skilled
Anyone can SAY that they are skilled in "Social Media Marketing", but an endorsed skill on LInkedIn means that another professional has vouched for you to confirm that you know your stuff. These four had the most number of skills that gained endorsements:
Most Recommended
These three had the greatest number of recommendations by others on LinkedIn:


Did you have any favorite Tweeps or Linkedin connections that deserve special mention?  Tell me about why they're awesome in the comments!

Up next: A post on the best student blogs of Fall semester, 2013.  Stay tuned.