Facebook & Links: Customizing the Appearance of Shared Links

The Goodness that is Meta Tags

Ever wonder where Facebook grabs the title, description, and image for the links you post? Want to make sure the right information appears when people share content from your blog or website? If you already know how to do this, then this article isn’t for you. The rest of you…check this out:

The answer to our question? Meta Tags!

What are Meta Tags?

All the content you see on a website is written using HTML code. You can use CSS to adjust how that content looks, or PHP to generate that content, but HTML is the meat (or Tofu if you’re Vegan). Every website must have a “head” and a “body.” The body holds the content you see on the page. The head holds the Meta tags (and a bunch of other stuff we’re not going to talk about). Using Meta tags we can define the Title, Description, and even the Image we want Facebook (or any other application) to use when someone shares your article or website as a link.

The meta tags that define the Title, Description, and Image look like this:

If that looks scary to you, don’t be afraid!

Defining Meta Tags with Wordpress (Custom Fields)

If you’re using Wordpress, they have a cool form that allows you to easily define the Title, Description, and Image meta tags without know a scrap of code. Let’s take a look at that:

When editing a post or page, scroll down to the “Custom Fields” section:

Select the Meta tag from the drop down menu you wish to define:

In the Value field:

• If you selected Title, enter the Title you want to appear when someone shares the link on Facebook
• If you selected Description, enter the Description you want to appear
• If you selected Image, enter the URL to the image (don’t forget http://) you want to appear when someone shares a link to your page or article on Facebook.

Click the “Add Custom Field” button after each tag.

Save your work.

That’s it! So simple! I love it!

Defining Meta Tags Manually (Straight-Up, Hard Code it)

Other blog software and Content Management Systems usually allow the user to define Meta tags too. The CMS for my organization gives users the option of adding Meta tags to the head, but you have to use straight-up HTML, which is when knowing how to add Meta tags manually comes in handy.

But that’s a post for another day…