Jeremy Morgan

Mostly Coherent Ramblings of a Silicon Forest Software Developer

Open Graph Tags Are Terribly Important

Today I want to talk about something that’s pretty important for your blog, even if it’s a tech blog. It’s Open Graph tags, and it’s a fairly easy way to get more people to your site, and get it noticed. I haven’t done an SEO or Marketing type article on this site in two years, but I think this is pretty fitting for anyone working on websites. Is your company doing this? They should be.

What are Open Graph Tags?

The Open Graph Protocol was originally developed for representation on social sites. There has been a lot of shuffling around standards, but for the most part you can easily set up something that will work well with 3 major social media sites:

There are many uses with these tags when it comes to applications and mobile use, but we’re going to focus on another benefit: making your links on these sites more informative. Here is the basic information needed:

  • Title (usually the title tag of your page)
  • Image (This is what will display in your link)
  • Description (This is a description)

This is what I would consider the bare minimum for a decent webpage. Here is what one of my links looks like from this site:

Open Graph Tags for SEO

Chances are you’ve seen tons of these types of links and thought nothing of it. Facebook and Google both try to make a best effort to find a large image, your title and description on it’s own. Most of the time it’s ok, even the space jam site has something showing up and it hasn’t been updated since the 90s.

Open Graph Tags for SEO

But you’ve also probably seen ones like this:

Open Graph Tags for SEO

This is what happens when there is no Open Graph data and the site can’t be crawled properly. It makes for an unattractive link with little or no information. Not just on Facebook, but all the major social media sites.

The Open Graph tags are essential to getting you more clicks, and more shares. Your site needs them. Period.

Even if your site isn’t one that gets shared socially much it still provides a more professional appearance. Not to mention sites like LinkedIn are now using them as well.

Implementing Open Graph Tags

There are a myriad of ways to implement these, depending on your CMS. WordPress has several plugins and other ways to get them into your pages. Any CMS should be able to implement them because they’re only meta tags. How smoothly you can get the data to dynamically populate it might be trickier. Since that’s out of the scope of this article instead I’ll show you what tags you should have on all your pages:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<meta itemprop="name" content="[ TITLE ]" />
<meta itemprop="image" content="[ LISTING IMAGE ]" />
<meta itemprop="description" content="[ ARTICLE DESCRIPTION ]" />

<meta name="description" content="[ ARTICLE DESCRIPTION ]" />
<meta name="author" content="[ AUTHOR FULL NAME ]" />

<meta property="article:author" content="[ GOOGLE+ AUTHOR URL ]" />
<meta property="article:published_time" content="[ PUBLISHED TIMESTAMP ]" />
<meta property="article:section" content="[ CATEGORY ]" />

<meta property="og:title" content="[ TITLE ]" />
<meta property="og:type" content="article" />
<meta property="og:description" content="[ ARTICLE DESCRIPTION ]" />
<meta property="og:image" content="[ LISTING IMAGE ]" />
<meta property="og:url" content="[ CANONICAL URL OF ITEM ]" />
<meta property="og:site_name" content="[ WEBSITE NAME ]" />

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="[ TITLE ]">
<meta name="twitter:description" content="[ ARTICLE DESCRIPTION ]">
<meta name="twitter:image" content="[ LISTING IMAGE ]">
<meta name="twitter:url" content="[ CANONICAL URL OF ITEM ]">

These are the tags I have implemented on my site. You may notice this violates DRY (Don’t Repeat Yourself) but the reason we repeat the information is because each service has their own name for the tags. These tags cover what’s needed for great presentation on Facebook, Google+, Twitter and LinkedIn.

If you can edit HTML in your CMS and put in dynamic values this should be fairly easy. In Octopress (what I use for this site) it only took a few minutes to implement. If you have a self built CMS I would highly reccomend putting it in.

Summary

Open Graph tags are definitely a “quick win”. They’re quickly implemented with a large benefit. Your links when posted on social media will be more attractive and professional. People will be much more likely to share the link because it will look good on their timeline.

It’s not something programmers generally think about, but it could give your blog a great boost, or get some extra traffic and customers for your company, for a small investment.

How to Blink an LED on a Raspberry Pi 2

The blinking LED is the “hello world” of the maker community, and today I’ll show you how easy it is to do with the Raspberry Pi 2 (or Model B)! We’re going to use Python and WiringPi for this project.

What you’ll need

For this article I’m using a Raspberry Pi 2, but you can also use a Raspberry Pi Model B. You will also need:

"Blink an LED Raspberry Pi 2"

  • A GPIO Adapter
  • Breadboard
  • Resistor
  • LED

What I am using for this project is highly recommended the Canakit for Raspberry Pi which contains everything in the list above. (This is an Amazon affiliate link).

Any decent breadboard or even a set of jumpers will work for this project.

How to Blink an LED with Python

The quickest way to get that LED to blink is to take a look at the pins of the GPIO and decide which one to tie to. Then you can use Python and the Raspberry Pi GPIO Library to create a script to light it up.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import RPi.GPIO as gpio             ## Import GPIO Library
import time                         ## Import 'time' library (for 'sleep')

blue = 7                            ## These are our LEDs
ourdelay = 1                        ## Delay
# pins 4,17,18,21,22,23,24,25

GPIO.setmode(GPIO.BOARD)            ## Use BOARD pin numbering

## function to save code

def activateLED( pin, delay ):
  GPIO.setup(pin, GPIO.OUT)        ## set output
  GPIO.output(pin, GPIO.HIGH)      ## set HIGH (LED ON)
  time.sleep(delay)                ## wait
  GPIO.output(pin, GPIO.LOW)       ## set LOW (LED OFF)
  return;

activateLED(blue,ourdelay)

GPIO.cleanup()                      ## close down library

As you can see in the code above, it doesn’t take much to get things working. But I’ll explain the code a little deeper.

1
2
import RPi.GPIO as gpio
import time

The following code imports the Python GPIO library, and the time library. The GPIO library, as you probably guessed is the library for interacting with the GPIO in Python. It does an amazing job of simplifying the process. The time library is there so we can put a delay in, otherwise the blink might be too fast to notice.

1
2
blue = 7
ourdelay = 1

Here I created a variable named “blue” (the color of the LED) and assigned it “7” which is the pin number we want. If I wanted to add multiple LEDs I could name it something like:

1
2
3
blue = 7
red = 13
green 14

I then created a “delay” variable of one second. This way I can change the delay of the lights blinking however I want.

You can name the variables anything you want, but this was just to make it easy to see which LED is which if I wanted to do some fancy light show.

1
GPIO.setmode(GPIO.BOARD)

Then, we set the GPIO mode to “Board” which means we’ll use the numbering of the pin by board instead of GPIO. This makes it a little easier to understand when using a bread board.

The next part I abstracted into a function. There are 3 main commands to turn the LED on then off:

1
2
3
GPIO.setup(pin, GPIO.OUT)
GPIO.output(pin, GPIO.HIGH)
GPIO.output(pin, GPIO.LOW)

If you wanted to blink an LED twice you would have to repeat these lines each time. So I decided to put this in a function and put the pin as a parameter, and delay as another. This way making a particular LED blink is as simple as:

1
activateLED(blue,ourdelay)

To close everything down, we need to run the following:

1
GPIO.cleanup()

It’s that easy! You could easily write a nice Python script that do some pretty cool stuff with just a few lines of code.

How to Blink an LED with WiringPi

For this step we’ll install WiringPi for the libraries to interact with the GPIO. This allows us to do what we just did, but from the command line. We’ll need to install WiringPi:

1
2
3
4
5
cd ~/sources
git clone git://git.drogon.net/wiringPi
cd wiringPi
git pull origin
./build

If successful you should see a screen like this:

"Blink an LED Raspberry Pi 2"

Now we can light up the LED from the command line. Remember the pin 7 in the example above? We can now light up like so:

1
2
gpio mode 7 out
gpio mode 7 1

This will light up the LED. You can turn it off by entering:

1
gpio mode 7 0

"Blink an LED Raspberry Pi 2"

This makes it super easy to light up LEDs from the command line. You could create a pretty neat BASH script to do this, and do some neat things, or call this from other languages.

Summary

I hope this has helped in showing how easy it is to blink an LED on the Raspberry Pi 2/B. Of course as you progress on you’ll want to do far more than just blink an LED, but the GPIO libraries make it very easy to create some neat stuff. If you’ve experimented with this and done something cool, leave me a comment!!


Do you like my Rasbperry Pi Tutorials?

I’m constantly hacking on stuff with the Raspberry Pi. If you want to get notified every time I post a new article subscribe to my Raspberry Pi feed here, or you can Sign up for the Raspberry Pi Newsletter spam free!

Raspberry Pi 2 Has Arrived!

So my Raspberry Pi 2 has finally arrived, and I got to take a quick look at it. Pretty impressive so far, though I haven’t done much with it. If you don’t know what’s so great about the Raspberry Pi 2 I’ll give you a quick rundown by comparing it to the others.

Developer Predictions for 2015

Here I will outline my tech predictions for 2015. Specifically in the developer world. While I would never call myself an “authority” or “expert” on development trends I am passionate about this stuff and to my credit I do read Hacker News, Lobsters and Proggit every day. Yes, even on weekends and holidays. So there’s that.

Building C#/ASP.NET Apps on a Mac With vNext

In case you’ve been away from the internet for the last week, you’ve probably heard the big news from the ASP.Net team. They’re embracing open source in a major way. Scott Hanselman wrote a fantastic post about the news that nearly broke the internet (and certainly tested his hosting provider). Microsoft is really backing up their claims that they are committed to Open Source in a major way.

How to Set Up the MEAN Stack on Digital Ocean

If you haven’t heard of the MEAN stack, it’s a combination of technologies for serving up fast websites, using a set of technologies paired very well together. They consist of MongoDB, Express.JS, Angular.JS, and Node.JS. For more information check out MeanJS website for more details.

The Great Unicorn Hunt

When talking with people in the Portland, Oregon tech scene I hear the same thing all the time. “We are always looking for developers. We are hiring and can’t find anyone. If you know anyone looking….”. Folks claim there are more jobs than developers in this town, but is that entirely accurate? Is it as bad as it seems?