Meta Tags

Meta Tags

Description

  • Meta tags are important pieces of “meta data” found in the HTML code for all of your webpages.
  • Meta tags are not visible to users, but they are used by search engines (e.g., Google, Yahoo, Edge, etc.) and social media platforms (e.g., Facebook, Twitter, etc.) to gather and display important information.
  • Default meta tags have been configured for all KU CMS sites.
  • You have the option to override the default meta tags on each webpage of your site to control the metadata search engines and social media platforms can use.

NOTE: Meta tags are not currently available on the News Article content type. KU IT is working to resolve the issue. (9/14/21)

Benefits of Meta Tags for Search Results and Social Media

When your pages are found in organic searches on search engines (e.g., Google, Yahoo, Bing), meta tags allow you to control:

  • What image is displayed
    • For the image to display properly you must first create an appropriately sized image.
  • What page title is displayed
    • Page title and header classes are important for your SEO. See Headers for info, including guidelines and best practices.
    • By default, the page title on each page includes the page title followed by the pipe symbol and the site title (e.g., About | CMS Guide).
  • What description is displayed
    • By default, the description for each of your webpages is comprised of the first few sentences.
    • By adding a description for each page, you take control over the description that is displayed in search results.

Configure Global Image Meta Tags

  1. Navigate to Configuration > Search and metadata > Metatag > Settings
  2. Select the Metatag defaults tab (top of page to the left of Settings tab)
  3. Select Edit from the Operations columns for the Global type
  4. Under Basic Tags
    • There are no image meta tags in the Basic Tags section.
    • Leave all other defaults in place.
  5. Under Open Graph (Used by Facebook, LinkedIn, Pinterest, and other social media sites)
    • Enter the URL to your preferred image in the Image URL field
    • Recommended image size: 1200px by 630px
    • Recommend image file type: PNG
    • Leave all other defaults in place.
  6. Under Twitter Cards
    • Leave Twitter card type set to Summary Card with large image
    • Enter the URL to your preferred image in the Image URL field
    • Recommended image file size: 506px by 253px
    • Recommended image file type: PNG
    • Leave all other defaults in place.

Configure Meta Tags on Individual Pages

  1. Upload image files
    1. Before you edit the meta tags, be sure to upload your preferred images to your IMCE file browser.
    2. Recommendation: Create a folder in your IMCE File Browser specifically for images used in social media meta tags, so you can find all your meta tag images easily.
    3. Important Note: If you are working on a development site (i.e., sitename.cms-dev…), you will need to remove “.cms-dev” from the image URL path when you place it in a meta tag field. If you do not remove the “.cms-dev” your image URL will break when your site goes live.
       
  2. Edit a given page
    1. NOTE: Currently meta tags are not available on pages created using the News Article content type
       
  3. From the actions menu on the right select Meta Tags
     
  4. Configure Basic Tags
    1. Update the Page title field as needed
    2. Update the Description field as needed
       
  5. Configure Open Graph
    1. Leave the default value for Page URL
    2. Update the Title field as needed
      1. A clear title without branding or mentioning the domain itself. 25 characters or less to optimize the content for mobile.
    3. Update the Description field as needed
      1. A clear description of your page between 100 - 150 characters.
        1. For thoughts on meta tag descriptions see:
          1.  Meta Description Optimization (The Hoth)
          2. A Quick and Easy Guide to Meta Tags in SEO (Search Engine Watch)
    4. Enter the URL to your preferred image in the Image URL field
      1. Recommended image size: 1200px by 630px
        1. Minimum image size: 600px x 315px
      2. Recommend image file type: PNG
      3. Recommended file size: 100 KB (8 MB max.)
    5. Except for advanced users, leave all other fields blank
       
  6. Configure Twitter Cards
    1. Leave Twitter card type set to Summary Card with large image
    2. Update the Description field as needed
      1. A clear description, concisely summarizing the content as appropriate for presentation within a Tweet. You should not re-use the title as the description or use this field to describe the general services provided by the website. Platform specific behaviors:
        1. iOS, Android: Not displayed
        2. Web: Truncated to three lines in timeline and expanded Tweet
    3. Update the Title field as needed
      1. A clear title without branding or mentioning the domain itself. 25 characters or less to optimize for mobile.
    4. Leave the default value for Page URL
    5. Enter the URL to your preferred image in the Image URL field
      1. A URL to a unique image representing the content of the page.
      2. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages.
      3. Recommended image size: 506px by 253px
      4. Recommended image file type: PNG
      5. NOTE: Only the first frame of an animated GIF will be used.
    6. Except for advanced users, leave all other fields blank
    7. Critical Last Step
      1. When content is shared for the first time, the social crawler will scrape and cache the metadata from the URL shared.
      2. The crawler has to see an image at least once before it can be rendered.
      3. To prevent the wrong meta data from being rendered, pre-cache your meta tags with the Facebook Sharing Debugger and Twitter Card Validator.
        1. Simply run the site’s URL through each URL debugger to pre-fetch metadata for the page.
        2. You should also do this if you update the image for a piece of content.
        3. Note: You may need to select “scrape again” on Facebook’s Sharing Debugger to collect new information, especially if a URL has been shared previously.

Support