What's inside this article:
- Basic information
- How teasers are generated
- Website teaser settings
- Frequently asked
- Website teaser: Elements
- Work with images
Basic information
This article explains how to set up the website teaser for a story from Pangea CMS.
What is a website teaser?
A website teaser is like a rich link or preview, displayed when a story is shared on your website. Visitors can tap or click the teaser to open the content page.
Different teasers show different elements (title, image, and so on), depending on the location. For one story, the Pangea system can generate multiple teaser variants that appear on different pages. This is shown in the image below:
How teasers are generated
The elements in the website teaser (title, image, and so on) come from the edit page for the story in Pangea CMS. The Pangea system selects each element as follows:
- Website teaser settings: If the element is filled in the Website teaser settings, the data from the Website teaser settings is used in the teaser.
- General settings: If the element is not filled in the Website teaser settings, the relevant data from the General settings is used in the teaser (if available).
For example, the title in the website teaser is selected as follows (if 1 is not filled, the data is taken from 2):
- Website teaser > Title
- General > Title
Website teaser settings
When you create a story in Pangea CMS, you can add Website teaser settings. Your Website teaser settings are a pool of resources, which the Pangea system can use to build teasers for the story.
You might optimize the website teaser as follows:
- Add shorter texts to ensure scanability, while still telling visitors what to expect from the story.
- Provide a hook to encourage curiosity and engagement with your content.
- Add a striking visual (image or Loop video) to grab the attention of visitors.
For an overview of the available elements in the Website teaser settings, go to the following chapter in this article:
Frequently asked
We suggest optimizing the Vertical image in the following cases:
- If the story will be shared on a vertical widget.
- When you are working with a vertical video.
To learn about vertical videos, see the alternative article below:
Website teaser: Elements
A website teaser always includes a clickable title (or headline). Depending on the location, a website teaser might also include:
- An introduction
- A label
- A horizontal image
- A vertical image
- A Loop video
Add some or all of these elements in the Website teaser settings. For details about where each element might be used, review the sections below:
Via Website teaser > Title, optionally provide a title or headline to use in the website teaser. This title might be displayed:
- On widgets
- On Category pages
- In Related content and 'See also' links
Via Website teaser > Introduction, optionally provide a brief introductory text to use in the website teaser. This text might be displayed:
- On widgets that show introductions
- On Category pages that use the 'List with images' layout
If set, the teaser introduction is also used as the meta description for the page. This is important for SEO (Search Engine Optimization). For details, see the following article:
Via Website teaser > Label, optionally add one custom label to use in the website teaser.
Labels can be shown on some widgets. A widget only shows labels if Label is manually selected in the widget layout settings. Labels are commonly topics that categorize the content on a widget (such as 'Politics' or 'Sport').
Via Website teaser > Horizontal image, optionally customize the horizontal version of the teaser image. This image might be displayed:
- On widgets that show horizontal images (almost all widgets on the Pangea platform)
- In the search results on the public site
- On Category pages
- In Related content and 'See also' links
The Main visual is automatically added as the Horizontal image in the Website teaser settings. To learn more, go to the following chapter in this article:
Via Website teaser > Vertical image, optionally customize the vertical version of the teaser image.
Vertical images are displayed on vertical widgets. Pangea offers the following vertical widget layouts that show vertical images:
- Vertical image
- Media slider vertical
- Top story package with vertical carousel on mobile
The Main visual is automatically added as the Vertical image in the Website teaser settings. Default cropping is applied. To learn more, go to the following chapter in this article:
If the story will be shared on a vertical widget, it is important to optimize the Vertical image. The following options are available:
- (A): Replace: Choose a custom image.
- (B): Crop: Adjust the default cropping.
If you are adding Website teaser settings for a vertical video, we suggest adding a custom Vertical image. For details, see the alternative article below:
Via Website teaser > Horizontal image alt text / Vertical image alt text, optionally add alt text for each teaser image.
The following rules apply for alt text for teaser images:
- If the teaser image matches the Main visual, the Main visual alt text is also applied for the teaser image. You do not need to add the same alt text separately for the teaser image.
- If you add a custom teaser image, the alt text is managed separately from the Main visual.
To learn more about the connection between the Main visual and the teaser images, go to the following chapter in this article:
To learn more about alt text, see the alternative article below:
Via Website teaser > Loop video, optionally select a Loop video to use in the website teaser.
Loop videos can be shown on some widgets instead of images. A widget will show the dynamic (moving) version of the Loop video if the following conditions are met:
- The widget layout supports Loop videos.
- Display Loop video is enabled in the widget Layout settings.
Pangea offers the following widget layouts that support Loop videos:
- Big image + thumbnails
- Big images
- Top story
- Top story package
A Loop video is a short video that plays on repeat with no sound. For more details, see the following article:
Work with images
The Main visual is automatically added as both the Horizontal and Vertical image in the Website teaser settings. For the Vertical image, automatic cropping is applied.
The following rules apply:
- If you leave an automatic teaser image, the image stays connected to the Main visual. This means that if the Main visual is updated, the teaser image will inherit the changes.
- If you replace or crop an automatic teaser image, the connection with the Main visual is lost. This means that if the Main visual is updated, the teaser image will not inherit the changes.
When you replace or crop a teaser image, the Restore button appears on the image selector in Pangea CMS. If you hit this button, the connection with the Main visual is restored. The teaser image immediately updates to match the current Main visual.
