SMX East Liveblog: Twitter Cards & Facebook’s Open Graph
Take your social game to the next level by implementing Twitter Cards and Open Graph tags. The speakers in this panel assert that social strategy means thinking about social posts as if they were ads (and therefore crafting them with the same amount of care and creativity). Learn how to wield OG tags, discover the nine different types of Twitter Cards and how to best utilize them, and find out what unique project The New York Times is using Twitter Cards to promote.
Speakers:
- Merry Morud, Social Advertising Director, aimClear (@MerryMorud)
- Evan Sandhaus, Lead Architect, Semantic Platforms, NY Times (@kansandhaus)
- Courtney Seiter, Head of Content Marketing, Buffer (@courtneyseiter)
Merry Morud: Essential Knowledge Open Graph Social Markup
“Content is king, but strategic content markup for distribution for social is everything,” Morud says.
Social markup makes it easier for users to share your content, and therefore more likely. When you share a link and it looks really poor, the user is going to rethink even posting it. Investing in social markup improves the health of your content in the long term.
(For Twitter Card beginners, Facebook Open Graph is an integration between Facebook and the internet at large).
Smart brands, like the NY Times, The Huffington Post and the Washington Post, take control of how content is displayed via strategic social markup.
Morud shares some quick tips:
- 1200 x 627 pixels is the recommended image size for Facebook — but that ratio is always subject to change. Make sure the image is no smaller than 400 x 209 or the image will revert to a thumbnail.
- Make it engaging – keep the character count to 200 and the most important message within the first 100 characters.
- Check your work: Use https://developers.facebook.com/tools/debug/ This clears the cache and lets you see what your latest post version looks like.
No HTML Skills?
Try using Google Structured Data Markup Helper (within webmaster tools). Highlight the headline and author easily and avoid confusion for HTML novices.
Approach Social Markup like Ad Creative
No one else is (probably) going to edit the post — you need to treat the post like an ad and make it awesome and accurate. This is essential for increased content sharing. And note that OG tags are also read by LinkedIn, Google+ and Twitter.
Courtney Seiter: The Everything Guide to Twitter Cards
View Seiter’s slide deck: bit.ly.com/cards-guide
Seiter opens by quoting Michael Sippey, of Twitter: “Twitter cards are an important step toward … creating new opportunities to build engaging experiences into Twitter.”
Twitter Cards, Seiter asserts, allow Internet marketers to expand Twitter into a rich multimedia experience by including videos, pictures and so much more.
What’s so great about Twitter Cards? They’re:
- Familiar
- Contained
- Portable (easily transported from person to person)
- Tactile
- Consistent
9 Types of Twitter Cards
- Summary (Headlines and description)
- Photo Summary (includes small picture)
- Photo Card (includes large picture)
- Gallery Card (includes three pictures)
- Product Card (fast facts about product – sizes, price, etc.)
- Player Card (play video, play song or view slides)
- App Card (shows app rating and on a mobile device, you can download app directly)
- Lead Generation Card (when you click the Call-To-Action, such as sign up for email list, the action automatically happens).
- Website Card (everything you click takes your user to your site. This is the only Twitter Card that can never be truncated).
You create Twitter Lead Generation Cards and Website Cards via Twitter Advertising (for free).
For all other Twitter Cards, you need to edit the HTML on your site (via hand coding, a Yoast plugin on WordPress, etc.).
Twitter Card Strategies
Make the images large and beautiful.
Make the text engaging – have the user want to click on it. This is particularly important because your gorgeous Twitter Cards can be truncated, and then the user needs to click on the link to get the photo to appear. You must make the text extremely clickable.
Test images, languages and offers. Do different images, headlines, etc. and see what works. Post at different times and with different hashtags to find the sweet spot.
Twitter Card Measurement
Twitter Card Analytics show data for anyone who has shared your Twitter Cards, not your brand’s account alone. View:
- Change over time
- Card Types (compares your cards to other Twitter Cards)
- Top Links
- Top Tweets
- Influencers (see the most influential people sharing your Twitter Cards – Seiter suggests using this as a place to find people you can reach out to in the future)
Evan Sandhaus: 19th and 20th Century Social Media Optimization
Sandhaus is tasked with optimizing The New York Times archives, which date back to 1851. Articles appearing before 1981 are categorized as the Deep Archive. Via the TimesMachine, users can find the 11.3 million articles as they appeared originally via PDFs that show the entirety of the page that article appeared on. This was a conscious choice by the NY Times, as they believe showing the article in its original context alongside the other articles of the day and ads serves to position the article in history. Sandhaus calls this a more immersive and accessible experience of the deep archive.
Because this TimesMachine content is only available to subscribers, the NY Times doesn’t want TimesMachine content showing up in search … so they block it from search via noindex. They want traffic showing up from the NY Times site search, direct traffic, third-party content sites, and social media.
Via @NYTArchives Sandhaus uses Twitter Cards to share a lot of interesting TimesMachine content.
One Reply to “SMX East Liveblog: Twitter Cards & Facebook’s Open Graph”
Be sure to test schema.org, OGP and Twitter card code before deploying site-wide: the tech specs are not always accurate. Though in theory (according to Google and FB postings…) schema.org and OGP are “either/or” (e.g. both platforms accept and display either markup accurately) this is not always true. We found that we ultimately had to add all three markups in order get the best result on each platform. This is especially true for the “controlled image”. We had to test multiple image sizes in order to ensure that they show up properly sized, and ultimately had to refer to three separately sized images, one for each markup.
So, test and test again!