Introduction

The web page title is the text displayed in the web browser tab, the browser history, and the bookmarks. It is also used by screen-readers and search engines.

Setting a unique title for each web page helps the user to accomplish its numerous daily tasks in a complex environment made of several tools (SAP products and others) and informational pages. These pages are opened - or to be opened - in several browser tabs, themselves regrouped in one or more browser windows, displayed in one or more screen monitors.

This guideline describes a naming convention: what the web page title should contain in regard to the content of the page. Here are the possible elements that the title should include: product name, app name, task name, object name, object type name, main tab page name.

Note that this guideline does not define how the above elements are named.

The favicon - icon displayed at the left of the title - is not part of this guideline. This guideline makes the hypothesis that it is the Database, Data Management & Analytics icon or the SAP icon as of today. Any further changes would have an impact on the page title. For example, if the favicon represents the type of the object of the app, the title will not need to contain the type name in parenthesis.

Note that this guideline does not describe the navigation between pages.

Usage

Using a web browser, the user navigates through a network of pages organized in hierarchies:

A web page title is necessary when the users do the following tasks:

1
do
false
Each page must have a unique name.

1
dont
false
Don’t display the same title for different page.

Don't use vertical bar ("pipe") character as separator. Vertical bars separates things (like tabs in some browser's, or like group of items in toolbars or menus. Minus character links things: that's what we need here to display the hierarchical path.

Anatomy

In an easy-to-use application, when doing a task in a few steps in sequence, the title remains the same in all the pages (and the URL should remain the same too).

For more details, see Navigation Within Apps.

In more complex products, the pages are organised in a hierarchy of complex applications.

Within the product, depending on the structure of the application, the next level can be the chosen space, view, folder or object that is browsed or edited, task or tab page.

The title displays several labels:

The deepest level of navigation is displayed first. Doing so, when the browsers’ tabs are narrow, the visible part of title will be sufficient to differentiate two pages.

When the page corresponds to an object, the label can be followed by the type of the object between parenthesis. When a domain is dealing with many types of objects, these objects must have their type visible in the title across all apps.

The selected objects in a page don’t change the web page title except if the selection changes the layout (for example: flexible column layout).

When an object has more than one version managed by the URL, then the version must be in the title

Use Cases

Product Home Page

The title is:

For example:

App Home Page

The title is:

For example:

Don’t display the path of the menus of the navigation bar (below: "Security")

• Security - Users - SAP Data Warehouse Cloud

App Home Page with Tabs

If the tab needs to be bookmarked and retrieved from the browser history or a bookmark, it must have a specific URL and a specific title:

For example:

If the first tab is general and can represent the main part of the app, the tab name is omitted:

If all tabs have the same URL, the tab name cannot be mentionned in the title

Tasks and Contents in Apps

When the app page contains access to other apps, these apps must have a specific URL and a specific title.

The title is:

For example:

Page Related to an Object

When a page represents an object, the title is:

For example:

When a page represents an object1 in a context of another object2:

For example:

Don't display:

even if the following intermediate navigation page exists:

Object with Versions

When the object can have several versions, the version and the type are displayed in the title.

For example:

If there is a notion of current version or default version, (then the URL should not reference a specific version), then that version is mentioned as "Current", "Last", or "Default" or not mentioned at all.

Page Related to an Object with Tabs

Object's to avoid having browser tab pages starting by similar names and hiding the different object's names.

Page Related to a New Object

When the page is an object with a draft status, the page title and the URL do not contain the object name/reference until the object is saved.

Because a web page must be unique, the name must contain also the container in which it will be saved in, if exists.

For example:

New E/R Model - Marketing - Data Builder - SAP Data Warehouse Cloud

Once created, the URL and the web page title changes to take into account the reference and the name of the newly created object (see “Page Related to an Object” cases).

Pages of a Wizard

When the wizard is displayed in the whole page, i.e. not in a dialog box, all steps of a wizard have the same URL and same title. The context of creation must be displayed in the title as well as in the URL.

The title is:

When retrieving that page, it goes to the first step of the wizard.

Guidelines

Should tab pages be included in the navigation or not?

When a page is structured with tab pages, the design should first determine if the tab pages take part to the navigation or not. If so, they could be bookmarked and retrieved at any time. In that case, they are considered as different pages and must have different URL and different web page titles.

There are two cases :

Accessibility

The web page title is read by screen-readers. Having a unique title per page is a mandatory accessibility requirement.

For more details, see SAP Accessibility Standard ACC-254. Note: in this document, the “web page title” is called “screen title for browser tab”.

Best Practices

Use the "Browser Header" component in your Figma mockups

By inserting Browser tabs in your mockup, you can show the Web Page and simulate what the end-user will really see on screen. Look at the "Getting Started" page of the Figma Component "Browser Header"how to use it and take advantage of all the features embedded.

Example: Hierarchy of Web Page Names in Data Warehouse Cloud

Home - Data Warehouse Cloud

Files - Data Warehouse Cloud

Analytics Cloud - Files - SAP Data Warehouse Cloud

Marketing (Space) - Files - SAP Data Warehouse Cloud

Favorites - Files - SAP Data Warehouse Cloud

System - Files - SAP Data Warehouse Cloud

Story Builder - SAP Data Warehouse Cloud

Marketing (Space) - Story Builder - SAP Data Warehouse Cloud

Bike Sales (Story) - Story Builder - SAP Data Warehouse Cloud

Data Builder - Data Warehouse Cloud

Marketing (Space) - Data Builder - SAP Data Warehouse Cloud

Bikes Category (Table) - Marketing - Data Builder - SAP Data Warehouse Cloud

My Bike Sales (View) - Marketing - Data Builder - SAP Data Warehouse Cloud

Business Builder - Data Warehouse Cloud

UX_DEMO (Space) - Business Builder - SAP Data Warehouse Cloud

Cedric (Folder) - UX_DEMO - Business Builder - SAP Data Warehouse Cloud

Sales Orders (Analytical Dataset) - Cedric - UX_DEMO - Business Builder - SAP Data Warehouse Cloud

Content Network - SAP Data Warehouse Cloud

Export a New Package - Content Network - SAP Data Warehouse Cloud

Manage Packages - Content Network - SAP Data Warehouse Cloud

My Content - Content Network - SAP Data Warehouse Cloud

Samples - Content Network - SAP Data Warehouse Cloud

Business Content - Content Network - SAP Data Warehouse Cloud

3rd Party Business Content - Content Network - SAP Data Warehouse Cloud

Remote Tables - Marketing (Space) - SAP Data Warehouse Cloud

Remote Tables - Marketing (Space) - SAP Data Warehouse Cloud

View Persistency - Marketing (Space) - SAP Data Warehouse Cloud

Space Management - SAP Data Warehouse Cloud

Marketing - Space Management - SAP Data Warehouse Cloud

Users - SAP Data Warehouse Cloud

Roles - SAP Data Warehouse Cloud

BI Content Viewer - Roles - SAP Data Warehouse Cloud

Activities - - SAP Data Warehouse Cloud

Data Integration - Administration - SAP Data Warehouse Cloud

System Configuration - Administration - SAP Data Warehouse Cloud

Security - Administration - SAP Data Warehouse Cloud

Audit - Administration - SAP Data Warehouse Cloud

IP Allowlist - Administration - SAP Data Warehouse Cloud

Task Logs - Administration - SAP Data Warehouse Cloud

Database Analysis Users - Administration - SAP Data Warehouse Cloud

Contributions

Kang, Ju Won

Support

We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.

Leave Feedback Track XXX in JIRA