More share buttons
Share on Pinterest
There are no images.

Social Meta Tags on WordPress for Regular People

Mack Web is now Genuinely. Learn more.

– –

I’m no expert at SEO, but I do know enough about the subject to not make a fool of myself. So when I read Cyrus Shepard’s recent post about incorporating meta tags to optimize content for social media, I had conflicting reactions. On one hand, I knew we had to put that into practice for ourselves and all of our clients. On the other, I felt anxious because it looked like alien speak to me. I didn’t even know where to start with putting the code templates into place on our own site using WordPress.

The first thing I did was seek the advice and help of someone who was much more knowledgeable about SEO: Mack Web’s own Tyler Brooks. If he hadn’t helped, I probably would have been stuck in the “crying and pulling out my hair” phase.

If you’re anything like me, keep reading – this post will help you immensely by giving you a step-by-step guide to implementing social media meta tags into your WordPress site. If you’re a full-fledged SEO, go and read Cyrus’s post instead. 


Why are social media meta tags so important?

Social media meta tags make your content look better on social media. You can control how your post or update shows up in news feeds. And handsome social media updates make your content more appealing.

[box]

Before:

Mack Web Tweet - Before

After:

Mack Web Tweet - After[/box]

Meta data allows you to tell social media platforms how titles, images, and more should show up in the newsfeeds on those sites. Rel=publisher and rel=author also are on this list because those two tell Google+ to link your site to your company page and your posts to your profile, respectively. Using meta data on social media (which also shows up in searches) shows potential readers more information such as author byline, description, and images so they are more apt to click on your content.

Another example of social media tags in the wild.

Another example of social media tags in the wild.


What you need

The first thing is to download the Yoast plugin – this plugin made everything easier. Also, I’m talking here about doing this with a WordPress backend (so you’ll need admin access). Without this plugin or WordPress, you’ll need to go to Cyrus’s post, with its assumed coding knowledge, to do any of this.


How-to: rel=publisher

First a word on why having Google+ links to your site are important. These links will help you get indexed more quickly and establish your company’s online authority. This can only help boost reach and search rankings for your company.

Now on to the actual tutorial:

  1. Go to SEO in the left-hand navigation on your WordPress site’s backend.
  2. Click Social under SEO.
  3. Go to the Google+ tab and you’ll see where you can put in the right information.

There is another way to add the rel=publisher code by adding it directly into the site theme. Yoast should work fine, but in our case, the plugin didn’t work. If Yoast works for you, do it that way because it will be loads easier.

This is the rel=publisher code you need to put in in your site’s header if you’re doing it manually:

[box]<a href=”https://plus.google.com/yourpageID” rel=”publisher”></a>[/box]

Now you need to point your Google+ company page to your site as well. This one is decidedly easier than adding code:

  1. Go to your G+ page. Click the Manage Page button if you’re logged in on your personal account.
  2. Go to Edit Page, then About.
  3. Go down to Add Your Website and put in your website URL there.

Once you’ve added the code in and updated your G+ page, test it with Google’s structured data testing tool. You should see the magic words, “Publisher markup is verified for this page” if it worked. If it didn’t work, the best advice I can give you is to remove all the code and start again.

[box][/box]

How-to: rel=author

Before I get too far into rel=author, I must mention there’s been threat of an authorshipocalypse recently. More data needs to be reviewed before anything conclusive can be said about whether it’s related to authors themselves or is site-specific. For now, I’d recommend adding authorship to your content, as like rel=publisher, it also adds to your social authority and reach.

[box][/box]

To connect the individual G+ pages of your contributors (e.g. your employees) to their content on your site, here’s what you do:

    1. Go to the backend of WordPress.
    2. Find Users in the left-hand navigation and select that.[box]wordpress-users tab[/box]
    3. Click on each individual user and scroll down to the Contact Info section.
[box][/box] 4. Copy the person’s G+ profile page link – it’ll look like this example link: http://plus.google.com/+AyeletGolz.
5. Paste the link into the Contact Info’s Google+ line on WordPress. [box]

[/box] 6. Save and you’re done with that part.
[box]

[/box]7. Make sure to test it with Google’s testing tool again, but this time plug in the link to one of your blog posts and then your Google+ page link in the author verification box. This is what success looks like:


How-to: social media meta tags

Yoast will be your best friend for this next part. To add the rest of the social media meta tags, you can either watch this handy video or follow the written instructions below the video:

1. Go to the left navigation and click on SEO and then Social under that.

[box] [/box]2. In the Facebook tab, check the checkbox “Add Open Graph meta data.”

[box][/box]

3. Select Save Changes.
4. Now move on to the Twitter tab and check the checkbox “Add Twitter card meta data” and save changes.
5. You will already have updated the Google+ tab with the rel=publisher information.


How-to: Twitter Cards

Twitter cards allow you to add media (such as images or video) to your content links and those bits of media show up then on Twitter.

[box][/box]

Now that you’ve got the social meta tags up on your site, you have a few final steps to do:

1. Go to the Twitter validator site and validate the meta tags you placed on your site.
2. First log in with the Twitter profile connected to your site.

[box][/box]

3. Decide on which Twitter card you’d like to validate. You can pick more than one, but you’ll have to go through this process each time to validate the different type of cards. Here are the cards you can validate:

  • Summary: This is what you’ll want to validate first, especially if you have a blog or lots of written content on your site that you plan to share. This card offers readers a preview of your content before they click on the link.
  • Product: This card is specifically for highlighting products and providing details about those products.
  • Photo: This gives a preview of an image.
  • Summary Large Image: This is a mix of the Summary and Photo card – it shows a summary and a large image (see screenshot to get an idea of what this will look like).
  • Player: This is for video and audio playback within the tweet.
  • App: This card is relevant for mobile apps.

In this example, I’ll show you how to validate a Summary Twitter card. Once you’ve selected the Twitter card you want to validate, click on the Validate & Apply tab.

[box][/box]

1. You’ll be asked to enter your URL – pick any random post from your blog and enter that URL into the field.

[box][/box]

2. On the next screen, select the Request Approval button.
3. All done!

Your approval should be done quickly and an approval confirmation will be sent to the email associated with that Twitter account. If you get a screen that says you’ve timed out, go back to the Validate & Apply screen and apply again. Sometimes it’s just finicky.


How-to: Pinterest Rich Pins

If you use Pinterest a lot, you need to validate your rich pins. Here’s how you do it:

1. Go to the rich pin validator page.
2. Grab a link to a random blog post on your site and plug that in the field on the validator screen.

[box][/box]

Validate your rich pins on Pinterest.

3.Click the Validate button.
4. On the next screen, click Apply Now.
5. You’ll get a screen that shows you your URL – you’ll want to make sure you select HTML tags here.
6. Click Apply again.
7. Pinterest also will send you an email to the Pinterest account holder’s email when your application has been approved, which should be in a few days.


Test, Test, Test

The last thing you’ll want to do once you have all of your applications approved is test. The different platforms have different testing sites.

For Facebook, test using the Facebook debugger. It’ll look like this when it’s integrated successfully:

[box][/box]

On Twitter, you’ll want to go to the validator site and use the Try Cards tab. It’ll look like this when you’ve done everything right:

[box][/box]

And lastly, you can test Google+ with the rich snippets tester. Plug in a link from a random blog post on your blog and see what happens. At the very least, it’ll show you if authorship and publisher status are working for the blog. Plus, it’s preview feature is nice to see how your post will look like on Google search results. Tweak as needed.

[box][/box]

You now have all the tools to rock social media meta tags (without touching coding at all) and make sure your content looks amazing on social media.

Are you ready to put social media meta tags into play on your site? Let us know your thoughts on social media meta tags in the comments below.

Author Ayelet Golz

More posts by Ayelet Golz

Join the discussion 3 Comments

Leave a Reply