How We Used a Meta Tag Strategy and Drupal to Look Our Best on Social Media
The new princeton.edu uses big, beautiful images to tell our story, a substantial change from the walls of text we presented on the old site. Every news article can have a cover image that helps tell a story. We reuse this image in other places (for example, as a teaser in article lists), and we wondered how we can leverage this image and other important content in social media to make our posts look better and more consistent.
Home page teaser featuring an image which is also used as the article's cover.
The cover image used in an article.
Facebook and Twitter want us to give them images and descriptive text. They'll scrape the page for content if we don't tell them what to use. And while scraping works, it doesn’t always grab the best content.
We turned to meta tags for the solution. We use Drupal 8’s Metatag module to do the heavy lifting.
Choose the Right Metadata
Devising a good meta tag strategy helps assure content looks good everywhere it appears, including search engines and social media. We have options, but more is not better. (By the way, we are talking here about info commonly baked into the <meta> tag, not structured data we might use to describe a person's phone number and addresses. That's for another blog post.)
Some approaches are far too granular for our needs. Dublin Core is a good example. Dublin provides a lot of neato tags for machines to really get to know content of different types. That’s great for libraries but for run-of-the-mill publishing use it’s overuse. Other meta tags are like guests that have overstayed their welcome. The keywords tag is the most infamous. Before search engines really understood content, they needed clues in the form of keywords. That’s no longer the case (Google says it doesn’t read keywords), so we didn’t waste our time with them.
Where to start? Google. Specifically “Meta tags that Google understands." Google doesn’t want a lot. From their list here’s what we focused on:
- charset (the page’s character set)
- title (the page’s title or article’s headline)
- description (short blurb that describes the page)
- site verification (verifies our ownership of the site to Google so we can use search tools)
That’s it. The other meta tags Google understands are mostly a list of don’ts: Don’t index, don’t follow, don’t translate, don’t show the site links search box. We use a robots.txt file to restrict indexing and the rest we weren’t interested in.
Moving on to social media, both Facebook and Twitter clearly document their needs. (Facebook, with few exceptions, uses the Open Graph protocol.) We were interested in their default tags and a few extras to be sure our content appeared on their site in good shape.
For Facebook, we chose:
- fb:app_id (verifies our ownership to Facebook so we can access analytics)
- og:url (the canonical URL)
- og:title (the page’s title or article’s headline)
- og:description (short blurb that describes the page)
- og:image (the URL of the article’s cover image)
- og:type (describes the content, which is either "website" or "article" in our case)
- og:site_name (the site’s name)
There are a few things to note: We felt canonical URL was important because every node in Drupal has both an ID-based address and a readable alias (via the Pathauto module). We want Facebook to refer to the aliased address only. For image, we pointed to the article’s cover image or an iconic campus image as a fallback (not every page has a cover image). We used site name, though optional, to distinguish this site as distinct from the hundreds of other Princeton websites in our network.
For Twitter, we chose:
- twitter:site (the @username of our Twitter account)
- twitter:card (the card layout, we used “summary card with large image” most often)
- twitter: image (the URL of the article’s cover image)
- twitter:description (short blurb that describes the page)
- twitter:title (the page’s title or article’s headline)
Twitter replicates Facebook tags to some degree, and in fact Twitter can read Open Graph’s type, description, title and image tags as fallbacks. Even so, we decided to use Twitter’s tags to be sure we were successful.
Finally, HTML5 has tags it calls “standard.” I’m not certain what the W3C means by standard, so we went with generator (the CMS that powers the site, which we thought was good to use because Drupal is open source). The others were covered already or didn’t make a lot of sense for our needs.
Work with Drupal 8
Drupal did some of the work for us out of the box: charset and generator were done. The rest we did with the Metatag module. (It's included in the Lightning disto, which we're using.) It’s a great module but beware of gotchas:
- Metatag uses tokens to help you get the right content into it. The available tokens can be extensive, and finding the right tag can take some trial and error.
- The module uses inheritance to pass values from higher level pages to lower level ones. This can be really convenient, but be sure you are setting the right tags at the right level and over-riding the inherited content when it needs to change. Again, trial and error will come into play.
- You may need to identify pages that require some amount of custom meta tag data. For example, we have an article content type and an event content type that each need values different from the default content configuration and each other.
Metatag puts each metadata schema in a separate module. My advice is to start small: enable only the modules you need, adding more later if other tags become important to you. Along those lines, begin by entering the least amount of data you can and add more as needed (we continue to tweak). It can be frustrating untangling a knot of inherited and custom settings you don’t want. In Drupal 8, Metatag is exportable/importable as configuration, making managing settings easy. And once set, Metatag just works.
Now our presence on Facebook, Twitter and Google looks its best, our social media team no longer worries about what our posted articles will look like, and the work to get it all right is done once.
The resulting Facebook post
The resulting tweet