Office of Marketing and Communications

Office of Marketing and Communications

Editing Meta Tags

Meta Tag Elements

You will want to have the following elements on hand while editing each meta tag section:

  • Title Tag
  • Meta Description
  • Canonical URL
  • Page URL
  • Image URL
  • Image Alt Text
  • Image Width x Height

Title Tag

Title tags should be no longer than 60 characters.

  • Format: Page Title | Saint Joseph’s University

Meta Description

Meta descriptions should be between 55-160 characters.

  • Use snippet optimizer to preview your title tag and meta description and to make sure you are hitting the correct character count.

Canonical URL

The Canonical URL is the same as the Page URL. To fill in the Canonical URL field, copy the URL of the page and paste it into the Canonical URL field. For example, to fill in the Canonical URL field for this page, copy the page URL: https://www.sju.edu/offices/marcomm/web/meta-tags and paste it into the Canonical URL field (be sure to include https://) 

Canonical URL field in metatag Drupal form

 

Page URL

When creating a new URL: 

  1. Uncheck “Generate URL Alias”.
  2. Make sure the slug matches your mini-site. Examples:
    1. /alumni
    2. /departments/biology
    3. /offices/human-resources
    4. /centers/faithjustice

Screenshot of the field in Drupal that allows you to modify a URL alias

Image URL

Go to the ‘Feature/Teaser image’ section at the top of the page and click ‘Edit’:

Screenshot of the field in Drupal that allows you to add an image to your content

Click the blue link to the image (here it is titled ‘sju.teachinginnovation.jpg’):

Screenshot of the field in Drupal that allows you to upload an image and set different properties

Copy the URL above the image (here it is titled sju.edu/sites/default/files/sju.teachinginnovation.jpg):

Screenshot of an image inside a web browser

Image Alt Text

Every image uploaded to sju.edu must have alt text. Follow the same steps above to add and copy alt text for reference.

Meta Tag Sections

  1. Basic Tags
  2. Advanced
  3. Open Graph
  4. Twitter Card

Basic Tags 

  1. Page Title: Title Tag
  2. Description: Meta Description
  3. Abstract Meta Description

Screenshot of the field in Drupal that allows you to set meta tags

Advanced Tags 

  1. Canonical URL: Page URL
  2. Robots: Check off “index” and “follow”. 
  3. Image: Image URL

Screenshot of the field in Drupal that allows you to modify the URL of a webpage

Screenshot of the field in Drupal that allows you to modify the image search engines associate with your webpage

Open Graph

  1. Site Name: Saint Joseph’s University
  2. Content type: Webpage
  3. Page URL
  4. Title: First half of title tag
  5. Description: Meta Description
  6. Image URL

Screenshot of the field in Drupal that allows you to modify Open Graph tags of your webpage

  1. Image Secure URL
  2. Image Type: Check if image is .jpg or .png
    1. image/jpeg
    2. image/png

Screenshot of the field in Drupal that allows you to modify additional Open Graph image parameters

  1. Image width
  2. Image height
  3. Image ‘alt’: Image alt text

Screenshot of the field in Drupal that allows you to modify display settings for the image you've associated with your webpage

Twitter Cards

  1. Twitter Card Type: Select “Summary Card with Large Image”
  2. Description: Meta Description
  3. Site’s Twitter Account: @saintjosephs
  4. Title: Title Tag

Screenshot of the field in Drupal that allows you to modify Twitter Card tags

  1. Page URL
  2. Image URL
  3. Image Alternative Text
  4. Image Height (Note--these numbers are reversed!)
  5. Image Width

Screenshot of the field in Drupal that allows you to modify additional Twitter Card settings such as image