In an ideal world, every page on your website would have perfect metadata to feed the algorithms.
Since most of us are operating on limited time and resources, we need to be strategic about giving the royal treatment to pages based on how much they contribute to your website’s key strategies or if it will be promoted via social media. You can manually configure some settings while building the page to ensure that your webpage looks great when shared and ranks well in searches.
What is Metadata?
Metadata is code in the head of your webpage that tells search engines what your page contains. Metadata doesn’t show up on the visual webpage to regular visitors. It affects how your webpage looks when shared as a link on social media posts. Metadata also contributes to how high your website ranks when people search for your content on Google.
Key Metadata Attributes
There are others, but the Drupal defaults ensure that we follow best practices.
Note: It can take time for your changes to your metadata settings to show up in social media previews. This is because of the caching of OSU websites and the social media platform can sometimes take time to detect those changes. Be sure to flush the cache after you make a change and wait a few minutes. There are multiple systems that this information is flowing through and it isn’t always immediate. Twitter seems to take the longest to get the updated metadata.
Title
The title should be the page title, which should accurately reflect the contents of the page.
Most of the time you don’t have to worry about the title. The OSU Drupal defaults will automatically populate and update the metadata title for basic pageand book pages.
One exception for OSU Drupal 7 is that a top level page for an organic group is missing this metadata title. You need to go fill it out yourself and update it if you change the title of the page.
This is due to some limitations related to the functionality of our version of organic groups. This won’t be an issue in OSU Drupal 9.
You can check to see if the title metadata is correct by looking at the tab in your browser. If it has your page title, you’re good to go.
If it starts with a |Site Name, then you need to add the title manually.
Image
By default, search engines and social media platforms will read your page and find a photo. It may not be the one that you want them to pick as it is not necessarily the first or largest photo. You can manually set a specific photo to take full advantage of the most visual aspect of metadata.
Each platform has different image requirements. If you have a specific photo in mind, you need to size the photo for each platform and add a link to that image.
Images should be unique to each webpage and shouldn’t be a logo or generic photo.
Facebook images should be at least 1200×630 pixels. This will produce a large image with the title and description below. If it is smaller than 600×315 pixels, then it will display a much smaller photo. Facebook has written up a complete guide to their images in link shares that includes more information about how their images work and how to pre-cache them.
How to set the Facebook photo
When editing a Drupal page, scroll to the bottom and there is a vertical tab list. Click on the Meta Tags option.
There are a lot of fields in this section, so it’s easy to get overwhelmed. However, there is a lot that you can ignore. Let’s focus on just the images for now.
The OpenGraph section feeds what will display on Facebook.
You want to fill out the Image field under that OpenGraph section. You need the URL of the image.
If you are using a photo specifically sized for Facebook, you can get the URL with these steps:
- Go to the Admin menu > Content > Files
- Find the photo that you want to use and click on the title link
- This will display the image on its own page
- Right click on the image and select Copy Image URL
Preview Facebook posts
To test that your image is working you can use the Facebook’s Sharing Debugger. You need to log in with a Facebook account to use it.
It will give you a preview of your website when it is shared as a link on Facebook. It will also give you any errors or recommendations for fixes. Generally, a Google search of the exact error will provide you with a fix. You can always ignore the error for fb:app_id. It doesn’t do anything and isn’t necessary.
Twitter’s image size depends on the type of card that you select. There is either the Summary Card or Summary Card with Large Image.
Summary Card
The Summary Card will support a small square image, at least 144 x 144 pixels. Given how image and video heavy the internet has become, I don’t recommend using this option.
Summary Card with Large Image
The Summary Card with Large Image supports a larger photo with an aspect ratio of 2:1. The minimum size is 300×157 pixels, but I recommend using 1024×512. I recommend using this card style because it shows a larger picture, which may grab people’s attention more than small photo.
How to set a Twitter Photo
In the Twitter card section of the Meta Tag tab at the bottom of your page, there is a field for Image URL. You can copy and paste the image URL into this field to ensure that your Tweet looks great.
You can use the same images for Facebook and Twitter. However, it is best practice to size the photo for each platform to ensure they look their best and no critical part of the photo gets cut off.
Preview Tweet
To test how your website will look when shared on Twitter, you need to log into your account and draft a message. It will show you a preview of what your shared link will look like:
There is the Twitter Card Validator tool too, but that no longer renders a visual preview. It can be helpful to look at the logs to see what Twitter is able to read from your metadata.
Description
The meta description is the short amount of text that shows up below the title in social media posts and on search results.
The description is your elevator pitch to search engines and your potential site visitors. It has to quick, snappy, and engaging. Moz has a great long form article on how to write meta descriptions.
Cheat Sheet
- ~155-160 characters
- There isn’t a hard and fast cut off. Depending on the device, browser and user settings, there is no way to know exactly how many characters will show
- front load the most important points to ensure visibility
- succinctly describe what your page is about
- Bonus points for looking at Search Console to see what search terms people use to find your page adding those to your description
Drupal Defaults
Drupal automatically fill out the meta description field based on the content of the page. First, it looks at the summary field, which is attached to the body field. It is hidden by default.
If there is nothing in the summary field, it will look at the body field and take the first characters from there and put it in the meta description.
However, a lot of us build our webpages with paragraph bundles. There isn’t an option to tell Drupal “go look and find paragraph bundles, find the first one with text, and put that in the meta description.”
That doesn’t mean all is lost. I built the Paragraph page that I have been using as an example with paragraphs. In the search results screenshot above, there is a description for it. Search engines will look at the rest of the page to find information about it if there isn’t something in the meta description.
Note:
You can write a meta description and search engines can decide they don’t like it and will put what it thinks is more useful. That’s a good time to re-write your meta description.
How to add a Meta Description
Add your meta description by placing it in the Summary field attached to the Body field.
Click on Edit Summary to expand the field and then add your description.
The description will now populate in a Facebook post:
There is more to metadata, but these are the key aspects that can help your webpage the most.
