Web

Guide to the Article Detail Page Template

Photographed at Canberra Botanical Gardens
Eastern Spinebill Photographed at Canberra Botanical Gardens © Anna Calvert Photography

Purpose

The Article Detail page template should be used for building all story pages and pages with detailed topic information with the exception of press releases and places we protect. Through site navigation, typically visitors will find articles through links from landing pages, including article aggregation pages and chapter/program and region landing pages. 

 

Examples from Nature.org: 

Our Insights section articles are written using the article detail page template, including the blog posts. Magazine article pages also uitilize this template. 

Structuring page content

Like a narrative, every story opens with a beginning (header) and closes with an end (footer). In between is the body that represents the main content of the page. To understand how to best construct a page, follow the inverted pyramid format: provide most important information at the top and increase in detail the further the story progresses.

1. THE HEAD - Most prominent information

Navigation header, hero, introductory messaging

2. THE BODY - Main content

Primary content relating to the topic of the page

3. THE DETAILS - Related information

Related articles, promotional content, learn more content

4. THE TAIL

Take away messages, download links, sign up, footer

Building a good article detail page

1. Break up the text with images

Adding visual breaks help tell a more compelling story. Try to use different image sizes across the feature to establish hierarchy. Large images could be used to introduce new sections of a story, and smaller images could be used to compliment the article’s content.

2. Use heading styles to add structure and hierarchy

If your feature article has multiple sections or is a long read, break the article up by using heading stylings.

3. Use side bar components (Text Assets: images, quotes, related links list) to break up content

Text Asset components allow for authors to embed assorted assets to the right or left of the body. The content within these text assets function as side bars to compliment the main article.

4. Add related links or related articles towards the end of the feature

Always consider what the takeaway for the user should be when they reach the bottom of the page. Consider adding a Related Articles component or related links to path users to other content pages across the TNC site.

Avoiding bad article feature page layouts

Try to avoid creating an article page with a long running block of text.

Insert in-text components, images, video, or other text listing component to make the article page more visually engaging and dynamic. Avoid authoring long, lengthy paragraphs by breaking up the text. Consider also breaking up the content by using headers and section headers.

Using header stylings in the Rich Text Editor

There is a hierachy of header options provided in the Rich Text Asset component to help provide various text stylings. Here is an overview of each and how to best use them:

Header 2

Use as the primary section header in the feature.

Header 3 (Bold)  / Header 3 (Unbolded)

Use as the subhead in the feature. (See above how 'Using Header Stylings in the Rich Text Editor' is styled in a Header 3. That's because it's a presenting a sub section of this 'Avoiding bad article feature page layouts' overview.

Header 4

Use as the section header or label in the feature.

Header 5

Use for call to action text links that are not embedded in the body copy. Example:

See Our Global Digital Homepage
Header 6 

Use for footnote or description copy. (All-caps is not manually added.)

Components that leverage article pages: 

Related Article components are designed for use on landing pages to surface articles that will drive visitors deeper into the website or for use on an article page to help visitors find similar content. Article Aggregation components can be used on Automated Aggregation pages and Bio pages to aggregate articles based on their tags.

Using components in article pages:

The Article Detail page template has a large number of available components and six template sections. The first and last sections - the header and footer - are completed for you. The remaining sections - Hero, Intro, Body, Ending - are optional and configurable. Each section has certain allowed components. See the chart and labeled article below for the breakdown.

*Open container component can only be used with approval. Submit a digital request form to request usage of the component.

Available components by template section

Template Section 
Available Components 
Header
C01 Header (Inherited)
Hero
C37 Article Hero 
Intro
C20 Rich Text Editor (RTE) 
C73 Audio 
C56 Anchor Links 
Body
C20 Rich Text Editor 
C26 Media Gallery          
C121 Image Collage
C39 YouTube Video  
C56 Anchor Links
C67 Timeline
C79 Text Asset Component  
C105 Statistics
C108 Line Chart
C120 Interactive Points Over Image
C21 Resource Listing   
C28 Block Quote
C45 Visual Listing
C63 Open Container*  
C70 Callout
C72 Article CTA
C96 Image Slider
C106 Pie Chart
C111 Image Mosaics
C23 Featured Number List
C24 Map
C38 Image
C47 Related People 
C54 Accordion
C66 Visual Download  
C73 Audio 
C107 Column Chart
C117 Scrolling Slideshow
Ending
C11 Title Text Call to Action
C47 Related People
 C25 Related Events
C27 Related Articles 
C88 Partner Brand
 
C27 Related Articles (Auto)
C121 Image Collage

 

Footer
C02 Footer (Inherited)

 


 
Thumbnail of example page in article detail template.
Article Page Thumbnail of example page in article detail template.

To view an example page built in the Article Detail Page Template, click the link at the bottom of this paragraph. The link will bring you to a page on Invision. On the page, turn on comments in the banner on the bottom right hand corner of the page. With the comments on, you will see that each component is labeled. Click on the hotspots to see the name of the component used to build the page. 

SEE ARTICLE PAGE EXAMPLE
 

Article Properties

Page Creation (2 Tabs)

  • This is the end portion of the URL of the page. Enter a URL in this field in URL format. Example: this-is-a-url-example. The URL field should contain ONLY lower case letters and numbers and dashes. Spaces and special characters are not allowed. Make sure you are happy with the page URL as it is very difficult to change. 50-character limit.

  • Page Title should be written for external audiences and displays on page cards, internal search results, breadcrumbs (if applicable) and in components when the title is not authored directly. 150-character limit.

  • This should be an enticing sentence or two about what readers will find on this page. It will be used on page cards and in internal search results. 

  • Select option that best represents the type of article. Options include Feature, Blog, Conservation Update, Initiative, Newsletter, Photo Essay, Program Overview, or Partnerships. The content type will display on page cards in aggregation components and pages. 

  • This should be the BU or department that is the primary owner of the page. This field will be used for aggregation pages, analytics tracking, and will allow you to easily locate all of your pages for internal review or audit.

  • Select at least one audience tag that best describes the target audience of your content. Choose the broadest audience that would benefit from the goals of your page. 

  • Select the article date. This will be shown on the article and used for sort order in search results and aggregation pages. IF the page is evergreen and should not contain a date, after creating the page, you can return to page properties and choose to hide the date from the page and from aggregation components. We do NOT recommend hiding the date in most cases. 

  • Select top 3-4 topics of the article. The topic tags can be used for aggregation components, search, filters and analytics. 

  • Select one or two regions that are central to the content. 

  • Enter the name of the person(s) who should recieve notifications if a link or asset on the page is expiring - or if the page itself is set to expire.

Article Properties

Basic Tab

  • COMPLETED IN PAGE CREATION STEP. Page Title should be written for external audiences and displays on page cards, internal search results, breadcrumbs (if applicable) and in components when the title is not authored directly. 150-character limit.

  • Optional. The only place this will used is as the subtitle in hero components if a custom subtitle is not entered in the component. 

  • COMPLETED IN PAGE CREATION STEP. This should be an enticing sentence or two about what readers will find on this page. It will be used on page cards and in internal search results. 

  • If the page is available in more than one language, enter the language of the current page in this field. 50 character limit. 

  • Enter the page path for the current page (the page in the language indicated in the previous field).

  • If the page is available in a different language, enter the name of that language here (in the native language - e.g. Español). 50 character limit.

  • Enter the page path for the alternate language version of the page (the language indicated in the previous field).

  • Checking this box will hide any active site-wide alert banners from displaying on your page. This may be used at your discretion, but is not generally recommended.

  • Checking this box will remove the social share buttons from the page. This may be used at your discretion but is not generally recommended.

  • Do not use this checkbox unless instructed to do so by global marketing teams.

  • Use the calendar icon to schedule a date and time for the page to go live once it is published. If none is selected, the page will go live automatically after workflow is complete. You can also select publish time when submitting your page for publishing. 

  • For non-evergreen content, enter a desired expiration date (off time). 

Image Tab

  • Select an image to display on the page/article cards. This image will be pulled onto the page card in the following components: related articles, featured content, article gallery, and in-page navigation. 

  • Enter a description of what is shown in the page card image selected in the field above. Alt text is critical to making the page accessible to all audiences. 

  • This field instructs AEM on how to crop the photo to fit the aspect ratio needed for desktop browsers. Select the section of the photo to maintain during cropping. (E.g., selecting Top/Left will maintain the top left corner of the image and will only crop as needed from the bottom and right sides).

  • This field instructs AEM on how to crop the photo to fit the aspect ratio needed for mobile browsers. Select the section of the photo to maintain during cropping. (E.g., selecting Top/Left will maintain the top left corner of the image and will only crop as needed from the bottom and right sides).

OG Tags (Social Share)

  • Enter a title for the social post. This will appear on social share card generated when someone shares the page link on social media.

  • Enter a short description. This should be an enticing sentence or two about what readers will find on this page. It will show on social media posts that generate from sharing page link.

  • Choose the most appropriate page type. Most pages that are not in the article template should be categorized as 'website.' Search engines need this piece of info to recognize pages. 

  • Optional. Enter the relative URL for the page. Field determines the address that the social post will link to.

  • OG site name determines the source that displays on social posts. For pages on the TNC global English site, the field should read 'The Nature Conservancy.'

SEO Tab

  • This is what is seen in the browser tab and Google search results. Should be a shorter version of the page title and include high value words. If you have enough room, include branding at the end of the title: | The Nature Conservancy OR | TNC (though don't sacrifice important words to fit the branding in). 65 character limit.

  • This description is visible in Google and other external search engine results. It should primarily entice people to click on the page: what is the page about, why should people want to read it. 170 character limit.

Article Details tab

  • COMPLETED IN PAGE CREATION STEP. Select option that best represents the type of article. Options include Feature, Blog, Conservation Update, Initiative, Newsletter, Photo Essay, Program Overview, or Partnerships. This label will show up on article cards and in search results. 

  • COMPLETED IN PAGE CREATION STEP. This should be the BU or department that is the primary owner of the page. This field will be used for aggregation pages, analytics tracking, and will allow you to easily locate all of your pages for internal review or audit.

  • Optional. If applicable, select secondary business groups to be used for sorting and filtering. If the article should appear connected with other business group(s) in search, filtering, and sorting, additional business group or groups should be entered here. This field is optional and multi-select. 

  • COMPLETED DURING PAGE CREATION STEP. Select at least one audience tag that best describes the target audience of your content. Choose the broadest audience that would benefit from the goals of your page. 

  • COMPLETED DURING PAGE CREATION STEP. Required. Select the article date. This will be shown on the article and used for sort order in search results and aggregation pages. If you are updating an older page, changing the article date on a page has negative impacts on analytics, so we are asking authors not to change dates. Instead, add a note at the top of the body text in italics that says when the page was last updated. This page has an example of that treatment. Google does not penalize older articles - in fact, older articles on evergreen topics show authority.

  • Optional. Hide article date in hero section of article page? The best practice is to include a date on any article that you plan to promote, for important SEO and audience purposes.  

  • Optional. Check this option to hide the article date from appearing on article cards on aggregation pages and components. 

  • Optional. Author listed first in dialog will be shown as the primary author. Primary author will generate author card on page. Allows article to aggregate with other pages by same author. Up to 5 authors allowed.

  • Check this box to prevent the article author and brief bio from appearing on the page.  Why would you do this? If you want the article to appear on an author's bio page or you want the page to show up in a search for the author, but you don't want the author name or bio appearing on the page. 

  • COMPLETED IN PAGE CREATION STEP. Select top 3-4 topics of the article. The topic tags can be used for aggregation components, search, filters and analytics. 

  • COMPLETED IN PAGE CREATION STEP. Select one or two regions that are central to the content. 

  • Optional - Not recommended. Use only if the article is chiefly about a group of TNC people (e.g. trustees).

  • Optional. If applicable, tag places that are specifically focused on in the article.

  • Optional. Use only if instructed by global teams. Typically not used. Certain teams (e.g. Magazine) have assigned tags.

  • Required. Enter the name of the person(s) who should receive notifications if a link or asset on the page is expiring - or if the page itself is set to expire.

screenshot of AEM page properties on article page
CLICK IMAGE Click to enlarge image and view the article details tab of page properties. © TNC

Web Accessibility Guidelines

All of our pages should be accessible to as many people as possible. Following web acessibility guidelines helps ensure people with disabilities can access our website. However, these guidelines benefit all web visitors, not just those with disabilities. It's our responsibility as digital content creators to ensure our content is inclusive.

1 in 5 individuals in the US have a disability

  • Eyes

    3.8M

    As of 2016, an estimated 3.8 million people aged 21 to 64 years were blind or had serious difficulty seeing, even when wearing glasses.

  • Ears

    15%

    Approximately 15% of American adults (37.5 million) aged 18 and over report some trouble hearing.

  • NYC

    2x NYC

    The number of people living with cognitive disabilities in the United States is equal to twice the population of New York City.

Many of the web accessibility guidelines are also best practices for a good user experience, design, and search engine optimization. But even if they weren't, designing our content for all people is important to our mission and our values. We want to ensure people with auditory, cognitive, neurological, physical, speech, visual, and age-related or situational disabilities can access our information.

The following resources cover our web accessibility guidelines (including a checklist) to help ensure your text-based, visual, or multimedia content is accessible to all.