Organizing content using Web Page Hierarchy

Effective content organization is crucial to providing a seamless user experience. In Power Pages, organizing content through a Web Page Hierarchy allows for a clean and logical structure, which helps both users and administrators navigate the portal easily. A clear hierarchy not only enhances the user experience but also improves SEO and makes managing the site more efficient.

This guide will walk you through the process of setting up and managing a Web Page Hierarchy in Power Pages, its benefits, and best practices.

1. What is Web Page Hierarchy in Power Pages?

In Power Pages, a Web Page Hierarchy is the structure that organizes your web pages in a parent-child relationship, much like folders and subfolders in a file system. This hierarchy helps determine the navigation structure of your site and how content is presented to users.

A Web Page Hierarchy can include:

Parent pages: High-level pages that serve as categories or broad topics.
Child pages: Subpages under parent pages that break down topics into more specific content.
Sub-child pages: Additional layers of content under child pages that allow for deeper organization.

By organizing pages in a hierarchical manner, you make it easier for users to find content, and you also create a structure that is easier to maintain over time.

2. Why is Web Page Hierarchy Important?

Benefits of a Well-Structured Web Page Hierarchy:

Improved Navigation: A logical hierarchy allows users to navigate from broad topics to more specific content, making it easier for them to find information.
Better User Experience: When content is well-organized, it reduces user frustration, ensuring a smooth experience.
Enhanced SEO: Search engines use the page structure to index content. A well-organized site can lead to better ranking and visibility.
Easy Maintenance: Administrators can manage the site more easily, making changes to the hierarchy, page content, and metadata without disrupting the user experience.
Consistent Branding and Structure: Hierarchical organization ensures consistency across pages, which is important for maintaining a professional appearance.

3. Creating and Managing a Web Page Hierarchy

Step 1: Accessing Web Pages in Power Pages Admin Center

Log in to the Power Pages portal or Portal Management App.
Go to Site Settings > Web Pages. Here you’ll see a list of all the pages on your site.

Step 2: Creating Parent and Child Pages

Create a Parent Page:

Click on New Web Page to create a new page.
Fill in the necessary details:
- Name: A short, descriptive name for the page.
- Title: The title that will appear in the browser and navigation.
- URL: The URL path for the page.
- Web Page Type: Choose a template that suits your content (e.g., Simple Page, List Page, or Form Page).
Under the Parent Web Page field, leave this empty since it will be a top-level (parent) page.
Save the page.

Create a Child Page:

Click New Web Page again to create a child page.
Fill in the details:
- Name and Title as usual.
- URL: Make sure to include the parent page’s URL path for clarity (e.g., /products/product-name).
Under the Parent Web Page field, select the parent page you want this child page to belong to.
Save the page.

Step 3: Organizing Pages into a Hierarchy

Once you have created both parent and child pages, you’ll see them listed in the Web Pages section.

Parent pages will have no parent assigned (or will be listed at the top level).
Child pages will appear beneath their parent pages, creating a clear structure.

You can drag and drop pages to reorder them, or edit their parent-child relationships directly from the Web Pages list.

4. Managing Navigation with Web Page Hierarchy

In addition to organizing content hierarchically, you can customize the navigation to reflect this hierarchy. Power Pages allows you to set up the navigation menu using Web Link Sets, which will pull content from your web page structure.

Step 1: Creating Web Link Sets

In the Power Pages Admin Center, navigate to Web Link Sets.
Click + New Web Link Set to create a new set of links.
Add links for each page you want to include in the menu.
- For parent pages, add them as top-level items in the navigation.
- For child pages, you can nest them under the relevant parent pages to create dropdown menus or submenus.
Example:
- Home (Parent Page)
- Products (Parent Page)
  - Product 1 (Child Page)
  - Product 2 (Child Page)

Step 2: Adjusting Menu Layout

Once the Web Link Set is created and linked to your pages, the navigation will automatically adjust according to the Web Page Hierarchy. Child pages will be nested under their respective parent pages, creating a hierarchical menu structure.

5. Dynamic Page Structure with Liquid Templates

You can further enhance your Web Page Hierarchy with Liquid templates. Liquid allows you to customize the way content is displayed based on the hierarchy.

Example: Displaying Parent and Child Pages Using Liquid

Here’s an example of how you can use Liquid to dynamically display pages in a hierarchical structure:

{% for page in site.pages %}
   {% if page.parent %}
      <div class="child-page">
         <a href="{{ page.url }}">{{ page.title }}</a>
      </div>
   {% else %}
      <div class="parent-page">
         <a href="{{ page.url }}">{{ page.title }}</a>
         {% for child in page.children %}
            <div class="child">
               <a href="{{ child.url }}">{{ child.title }}</a>
            </div>
         {% endfor %}
      </div>
   {% endif %}
{% endfor %}

This will loop through your web pages, displaying parent pages and nesting their child pages accordingly.

6. Best Practices for Web Page Hierarchy

1. Plan Your Hierarchy Beforehand

Before creating pages, map out a logical hierarchy. Determine which pages should be top-level (parents) and which ones should be detailed subpages (children). This planning ensures that your navigation remains clear and user-friendly.

2. Keep the Hierarchy Shallow

Avoid deep hierarchies that create complex structures. The fewer clicks it takes to reach a page, the better. Try to limit child pages to a depth of 2 or 3 levels.

3. Maintain Consistency

Maintain consistency across the site by applying the same structure and naming conventions for similar types of pages.

4. Optimize for SEO

Each page should have a unique, descriptive title and URL. Using keywords in the titles and URLs helps improve search engine ranking.

5. Use Breadcrumbs for Navigation

Breadcrumbs are a secondary navigation method that shows the path from the home page to the current page. This is helpful for users to understand their location within the site and navigate easily.

7. Troubleshooting Common Issues with Web Page Hierarchy

Issue	Cause	Solution
Child pages not appearing in navigation	Parent page missing links or incorrectly set	Ensure the child page is correctly associated with a parent page and the Web Link Set is updated.
Content not reflecting in navigation	Page not published	Ensure the page has been published and included in the Web Link Set.
Complex navigation structure	Too many nested child pages	Simplify the hierarchy and consider reorganizing the content.