Image Management Tutorial

How to...Optimize Pages and News Items for Social Sharing

Kelly Hansen — Thu, 10 Mar 2022 22:58:20 +0000

How to...Optimize Pages and News Items for Social Sharing Kelly Hansen Thu, 03/10/2022 - 17:58

View a Sample Optimized News Article

Use Correct Image Sizes

More About News Items

How to... Login to Content Hub
May 8, 2023
How to...Create a News Item - Legacy
July 26, 2022
How to...Optimize Pages and News Items for Social Sharing
April 28, 2022
How to...Use the Blockquote Style to Format a Fact Box
April 8, 2022
How to...Topic Tag and Share a News Item
March 10, 2022

Always expect news items to be shared on social media.

Add a custom summary text and a thumbnail to every page, profile, and news item to improve brand impact, social engagement, as well both external and internal search engine ranking (SEO). The thumbnail and summary text display as the page's social media card and search result preview snippet.

This page's thumbnail and summary text in action.

Guide to Adding Summary Text and Thumbnail

Summary text and thumbnail images are added on the ‘Edit Settings’ screen
The thumbnail and summary text combine to become the page's search result and social media card preview snippet
The summary text should be a one-sentence highlight of the article
The thumbnail image should be an informative visual illustration of the summary text
Thumbnail images should be square (1:1 ratio) images, with minimum dimensions of 300x300 pixels and maximum dimensions of 600x600 pixels
Use a social media previewer such as OpenGraph

Even if you have no distribution plans of your own, web content is highly shareable. One can’t predict which stories will be shared by your readers.

Dr. Washington avidly promotes Mason on social media, he may be sharing your story!

Topics

Content Hub

Best Practices Tutorial

News Item Tutorial

Image Management Tutorial

Content Hub News Items

How to... Embed an Image with Expressive Image Alt Text

Kelly Hansen — Mon, 13 Dec 2021 21:51:40 +0000

How to... Embed an Image with Expressive Image Alt Text Kelly Hansen Mon, 12/13/2021 - 16:51

Mason prides itself on its dedication to inclusivity. As such, every member of the SiteMasonry ecosystem is expected to support digital inclusion by adding alt text to the images they use on their sites.

What is Alt Text and Why is Alt Text Important?

Also known as an alt attribute, alt description, or alt tag, alt text is a written description of an image placed on the web. It is intended to help non-visual users (i.e. those who use screen readers) when they come across an image that they could not otherwise interpret. Describing images accurately in alt text ensures those who need it get an equivalent, accessible experience.

Meeting Standards for Accessibility

As a publically-funded institution, ��AV is required to meet WCAG 2.0 web accessibility standards. Adding alt text to images helps meet the WCAG 2.0 image description requirement, as well as supports Mason's dedication to inclusivity.

Mason’s Assistive Technology Initiative (ATI) office monitors Mason’s sites for Section 508 and WCAG 2.0 compliance - including the use of image alt text. ATI’s website lists information, resources, and tools to help web content editors keep their content accessible to everyone, regardless of their sight, hearing, or mobility status.

Add Alt Text, Boost Page SEO

Did you know that search engines deprioritize pages without alt text on images? If your images don't have alt text, your page will rank lower than a page with alt text on its images. Adding alt text is therefore an easy way to ensure your page stays high in the rankings.

Writing Good Alt Text

Good descriptive alt text should accurately and concisely describe the content and function of an image, without relying on visual cues. Alt text is primarily used to provide context and accessibility for individuals who are visually impaired or using assistive technologies like screen readers.

Here are some tips for writing good descriptive alt text:

Be specific: Use descriptive words to convey as much information as possible about the image.
Be concise: Keep your alt text short and to the point. Avoid overly long descriptions that may be overwhelming or distracting.
Focus on the content: Identify the main elements of the image that are relevant to its function and convey that information in the alt text.
Consider the context: Think about where the image is being used and how it fits into the overall content. The alt text should provide context and complement the surrounding text.
Avoid unnecessary details: Stick to the most important information and avoid including irrelevant details that may clutter the alt text.
Use appropriate language: Use language that is appropriate for the audience and the context. Avoid technical jargon or overly complex language that may be difficult to understand.

If the image contains text that is key information not provided elsewhere on the site, you should include all that text in the alt text. This ensures that individuals who are visually impaired or using assistive technologies like screen readers can access all the information in the image. If the text is formatted in a specific way, include that information in the alt text. For example, you might say "Bold text reads..." or "Italicized text reads..."

Ask yourself if the image adds any important information or function to the content. If not, it's likely that the image is decorative. If the image is decorative only and does not convey any important information or function, you should use null or empty alt text. This means leaving the alt attribute empty or using alt="". This tells screen readers to skip over the image and focus on the surrounding text instead.

Adding Alt Text in SiteMasonry

There are two occasions where you might be asked to add alt text to an image. One is when uploading an image that is going to be used in a Featured Image position or similar. The other is when adding an embedded image into a text box.

Adding an image via the Feature Image block asks you to add alt text for your image when you upload it. Embedded images do not, as they show up. You need to click "edit media" to see the setting to add alt text to an image.

If you are using an image that was already uploaded the alt text may or may not be set already, depending on how it was uploaded. You can always check by searching the image file name in the Media area, then editing the image's settings.

Additional Resources

Please read these excellent articles on how to correctly write alt text:

Topics

Image Management Tutorial

Accessibility Tutorial

Best Practices Tutorial

Content Hub

SiteMasonry Tutorial

SiteMasonry

How to...Embed an Image

Kelly Hansen — Tue, 16 Mar 2021 18:14:27 +0000

How to...Embed an Image Kelly Hansen Tue, 03/16/2021 - 14:14

Embedded images are secondary supporting images within the text of a news story. The June 2021 update to the embed feature changed the icon in the WYSIWYG toolbar and smoothed out the embed process.

Create your content item (page or content type - news, faculty profile, program)

Click the 'Customize Page' tab
Add a 'Basic Text' block to a section
Title the block
Add text content (I used cupcake Ipsum to generate filler text - http://www.cupcakeipsum.com/)
put your cursor in the top left corner of the block editing window, ahead of the text you pasted in
Click the embed icon (it looks like an image with musical notes on top of it)
Upload an image to embed - I chose a 6 KB cupcake image
Click Save and Insert

After inserting the image in the block, you will need to add the alt text, set the alignment, opt to use a caption, and choose the display size. From the text block:

Click the small 'edit' button next to the image in the text block
Add alt text
Select the alignment (none, left, center, right)
If a caption is needed, click the caption box (you will add the caption after the image is placed)
Select the desired display size (extra large, large, medium, small)
Click 'save'

View a sample page with image embed sizes and descriptions.

Commit your work by clicking 'save layout' on the Customize Page screen

Remember to publish!

View a sample page with image embed sizes and descriptions.

Topics

Page Basics

Image Management Tutorial

Image Management Tutorial

How to...Optimize Pages and News Items for Social Sharing

View a Sample Optimized News Article

Use Correct Image Sizes

More About News Items

Guide to Adding Summary Text and Thumbnail

Topics

How to... Embed an Image with Expressive Image Alt Text

What is Alt Text and Why is Alt Text Important?

Meeting Standards for Accessibility

Add Alt Text, Boost Page SEO

Writing Good Alt Text

Adding Alt Text in SiteMasonry

Additional Resources

Related Tutorials

Topics

How to...Embed an Image

Create your content item (page or content type - news, faculty profile, program)

After inserting the image in the block, you will need to add the alt text, set the alignment, opt to use a caption, and choose the display size. From the text block:

Commit your work by clicking 'save layout' on the Customize Page screen

Topics