Web

Guide to the Article Detail Page Template

Graphic display of article pages

Purpose of Article Pages

The Article Detail page template is used for publishing stories, news, case studies, magazine features and any form of written communication that is intended to be consumed from beginning to end. Articles are an important feature on our nature.org site as they tell stories that can connect our audiences to our work and mission. 




Examples of where articles can be referenced include chapter and regional sections, such as Stories in the CaribbeanOur Insights section, which focuses on an influencer audience, and Magazine articles.

Note that if you are publishing a news press release or details around a preserve to instead use the Press Release page template and the Preserve Detail page template, respectively, as those templates enable different components that accommodate the needs of those features.

Below are five key sections that can help you plan and strategize an approach to creating and building landing pages:

1. Framing a clear content strategy

2. Structuring the article

3. Building a good article page

4. Using components in Article pages

5. Article Page Properties

6. Web Accessibility

   

1. Framing a clear content strategy


Every article should be framed around a set of reasons as to what it is to achieve.
 

Like any other page being created, start by answering the following questions:

  • What is the topic of the article?

  • What purpose does the publication of this article serve?

  • Who do you expect to read your article?

  • How do you expect visitors to find your article? Any SEO considerations for traffic? Any promotion plans, such as advertisements on social media? Any plans to include the article in a newsletter? Anywhere you expect the article to appear on nature.org?

  • Where do you expect your article to live on nature.org?

  • Are there any assets you expect to use in the article? Resources? Photos? Videos?

  • Are there any call to actions you have for your article?

  • What would you want readers to take away from the article?

  • What do you expect success to look like?

Your answers will represent a brief for you and other contributors to align on priorities and goals as you begin drafting your article and planning its page build.

2. Structuring the article


Like a narrative, every story opens with a beginning (header and intro) and closes with an end (conclusion, takeaways, footer). In between is the body that represents the main content of the page.

Below is a framework that uses the inverted pyramid to outline how to best structure and craft your article for online readers. 

1. The head - Most prominent information

The head of the page, also known as the hero area, is essentially the cover of your article. The hero typically entails your article’s headline, subheading (also known as dek), date of publication, and author byline. Things to consider are how your headline and subhead can capture the attention of a reader to want to read your article.

Keep in mind that most visitors to nature.org articles find their way to the articles through organic search on search engines, so writing a headline and subhead that are specific, clear, and straightforward can help with driving more traffic to your feature.
 

2. The body - Main content

The body is where your article begins. This is where users decide to continue reading your feature or bounce off. It’s important here to understand the reading patterns between an online article feature and a printed article. Online readers are prone to scanning pages as they attempt to ‘scavenge’ for important information.

Online reading elicits a different type of engagement than reading printed pieces. The average time visitors spend viewing a nature.org article with an estimated read time of 4-6 minutes is 1.5 minutes. That said, visitors are likely skimming the articles and looking for specific information that would be relevant to them.

This is where the principle of positioning the most important content upfront is critical. Make it as straightforward as possible in the top intro area of your article what it is about and what the takeaway is. There are several ways to go about this:
 

  • Provide Key Takeaways. It’s typical to find key takeaways in news articles positioned up front to prime readers on what they can expect to see in the article. If it’s a news-oriented article, bulleted key takeaways can effectively provide insights to draw readers in. If it’s a case study, framing an abstract or purpose statement upfront would help readers get a better sense of what the feature is about.
     

  • Entice your readers with specific but succinct hooks. The first sentence should immediately give the reader a sense of intrigue. Be specific, but not too wordy; and be succinct, but not too generalized. How can you use your first sentence to connect with the reader immediately?
     

  • Use dropcaps. Dropcaps are available in the C20 Rich Text Editor, and serve as a great visual signifier to draw readers into the story. It visually establishes a beginning of a section. If used throughout the article, dropcaps can signify a new chapter or an entry into a significant turning section of the story. This is especially useful for long-form narratives, given online articles do not have the same chapter section format as printed manuals or books. To learn more about effectively using design to guide and entice readers, check out Optimizing Article Layouts Through Chunking.
     

  • Use clear and informative headers. Returning to the point of how readers consume online content, most are skimming your article and likely reading your headers. Writing clear and informative headers can further the engagement with the readers if they find something that catches their eye. Another way to look at this is if your headers are abstract and uninformative, readers will assume there is nothing worth their time and leave the page. Additionally, if your article uses headers, be sure to make your header stylings consistent (H2 for primary headers, H3 for secondary headers, H4 for section headers, etc.). Using consistent header structures is also important for readers who rely on assistive technology to understand the page's structure.
     

3. The tail - Conclusive takeaways and touting related content

Towards the end of your article, make clear what the conclusion is, whether it’s having closing thoughts or pointing readers to a call to action, such as signing up for more stories through newsletters or downloading resources. This is also where you can position related articles to signify readers have reached the end of the article and that there are other contents they can continue browsing. The footer would be the last block item they encounter on your article page.

3. Building a good Article page


Here are the fundamental design strategies for building an effective landing page layout: 
 

1. Break up the text with images.

Adding visual breaks help tell a more compelling story and give readers a visual break. From user testing and data analysis, it’s been evident that if users encounter a large block of text, they are likely to bounce off the page. Their initial impressions would be shaped by how text-heavy the content is.

Try to use different image sizes across the feature to establish a 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.

Tip: there is now a Full variation for the C38 Image component.
 

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. This is effective for readers who are scanning for information to quickly get a sense of what the content on the page is about. This also will help organize your content effectively by guiding readers through a structured format.
 

3. Use the new C130 Storytelling component blocks to tell a more immersive story.

There are now “Storytelling” component blocks designed and built specifically for more visually immersive storytelling, inspired by StoryMaps. See how the storytelling blocks are being used across this Bird Watching article page.
 

4. Deepen the user journey by including embedded links throughout your article.

Embedding hyperlinks into your article paragraphs can effectively drive a deeper user journey for visitors. From a business perspective, this can be effective for marketing-related internal pages. For users, the hyperlinks can signal to them that there is more information they can browse if they want to see more.
 

5. Checkout the new article hero types

New hero components are available for the article template designed to emphasize headline prominence and accommodate different image orientations.

C37 Article Hero - Text Above Image

C37 Article Hero

Positions the headline as the first thing readers see, and this is a standard design amongst most article pages across industries. The image is clearly centered below, with no overlays or shadows obstructing the image.

C127 Split Hero - Light BG

C127 Split Hero

This is effective for story-oriented articles, typically seen as being used by Magazine features, and it allows for more vertical-oriented images to be formatted in the hero area.

C128 Immersive Hero

C128 Immersive Hero

The immersive hero with a full-bleed design will attract users to a page that promises a compelling feature story. This is best used for articles that serve as a prominent feature or campaign.

4. 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 inherited and readily available on the template. The remaining sections—Hero, Intro, Body, and Ending—are optional and configurable. Each section has specific components allowed. See the chart and labeled article below for the breakdown.

*Open container components can only be used with approval. Submit a request through the Marketing Request Portal to request usage of the component.

Available components by sections

5. Article properties

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
Article Details Configuration A screenshot of the article detail’s page properties with required fields.  © TNC

6. Web accessibility guidelines

Web Accessibility Guidelines

All of our pages should be accessible to as many people as possible. Following web accessibility 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 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.