Skip navigation links
Michigan State University
Michigan State University

University Communications
University Communications > Resources > MSU Web Standards >

Social Media and Meta Tags

Social Media and Meta Tags

Social media networks and search engines use a web page’s Open Graph, Twitter Card, and meta tags when displaying summaries of and links to individual web pages.

Links to institutional web pages encountered via social media and search are easier for potential visitors to understand and evaluate when well-written Open Graph, Twitter Card, and meta tags have been included.

  • Include the Open Graph and meta tags on every institutional web page.
  • Include Twitter Card meta tags on featured/important MSU articles, media releases, multimedia elements, and information pages.
  • Place Open Graph and meta tags between HTML <head></head> tags.

 

9.1 Open Graph (OG)

Open Graph is a standard commonly used by Facebook.

 

Sample of Open Graph link shared on Facebook 
Figure 9-1. Sample of Open Graph link shared on Facebook

 

9.1.1 OG: Title Tag

Include the text that should appear by default when a link to a web page is shared via social media.

9.1.2 OG: Description

Include a one to two sentence summary describing the contents of your web page.

9.1.3 OG: Type Tag

Specify the kind of object/content being linked. For example, <meta property=“og:type” content=“website”/> is used when linking to a website.

9.1.4 OG: Image Tag

Include a URL for the graphic to be used when displaying a thumbnail preview along with a link to the web page via social media.

9.1.5 OG: URL Tag

Include the URL of the web page being linked. The URL serves as the permanent link to the content (i.e., link directly to a story, not a home page featuring a link to the story).

9.1.6 Additional Information

Visit Open Graph: ogp.me

 

9.2 Basic Summary Twitter Card

A Twitter Card makes it possible to attach media experiences to tweets that link to content. Simply add a few lines of HTML to web pages and users who tweet links to content will have a "card" added to their tweet that is visible to all of their followers.

 

Sample of a "basic summary" Twitter Card 
Figure 9-2. Sample of a "basic summary" Twitter Card

 

9.2.1 Twitter: Card

Set to a value of “summary.”

9.2.2 Twitter: Title

Be concise. Use 70 characters or fewer.

9.2.3 Twitter: Site

Include the Twitter @username used by the website.

9.2.4 Twitter: Creator

Include the @username of the content creator.

9.2.5 Twitter: Description

Summarize the content of the page. Use 200 or fewer characters.

Do not reuse the title or use this field to describe the general services provided by the website.

9.2.6 Twitter: Image

Include a URL for a unique image representing the content of the page that uses a square aspect ratio of 120 pixels x 120 pixels minimum and is less than 1MB in size.

Do not use a generic graphic or image used as the Twitter image for other pages in your website.

9.2.7 Validating a Twitter Card

Validate a Twitter Card prior to use.

To test a Twitter Card, visit dev.twitter.com/docs/cards/validation/validator.

9.2.8 Twitter Card Analytics

Measure the performance and results of each Twitter Card. For full details, visit developer.twitter.com/en/docs/tutorials/measure-tweet-performance.

9.2.9 Additional Twitter Card Information

For complete details on the seven Twitter Card types that can be attached to tweets, visit dev.twitter.com/docs/cards.

 

9.3 Meta Tags

 

Sample search engine result screens with title and description text 
Figure 9-3. Sample search engine result screens with title and description text

 

9.3.1 Title Tag

Well-written titles can generate more visits to a web page and improve search engine visibility.

  • Clearly summarize the content or benefit of the web page.
  • Include key words and phrases that visitors would use when searching for information contained within the web page.
  • Use 70 characters or fewer.

9.3.2 Description Tag

The content of the description tag should contain an abstract of what information is contained on an individual web page.

  • Use text that is easy to read.
  • Include important keywords related to the content on the page.
  • Provide context for the information the visitor will find by following the link to the page.
  • Use 155 characters or fewer.

9.3.3 Thumbnail

 

Sample search results screen with thumbnails 
Figure 9-4. Sample search results screen with thumbnails

 

A thumbnail image for a page can be manually specified.

Add a thumbnail meta tag to the <head> section of your web page (replace the URL with the path to your thumbnail image):


<meta name="thumbnail content="http://url.msu.edu/thumbnail.jpg" />

 

9.3.4 Additional Information

 


MSU Web Standards