Configuring Individual Pages
You can configure individual Pages to meet your needs. All changes made in this way are scoped to the selected Page.
To configure a Page, open the Site Menu and go to Site Builder → Pages. Then click the Actions button () for the Page you want to customize and select Configure.
Alternatively, you can access individual Page settings by navigating to the Page you want to customize and clicking the Configure Page button ( ) at the top right of the Application Bar.
These settings are organized into the following tabs:
Many of these settings can be localized to provide translations based on a User’s locale. See Introduction to Localization and Modifying Localizable Site Fields for more information.
General
Here you can configure the basic information and design of a Page, including its name, friendly URL, layout, and more.
Name and Friendly URL
Use the Name field to set a Page’s title used for Site navigation and displayed in a browser’s title bar. Use the Friendly URL field to set a new URL for a Page, or click the Restore icon ( ) to see and restore a previously used URL. See Configuring Your Page’s Friendly URL for more information.
While a Page’s name and friendly URL are initially defined together at Page creation, they are configured independently afterwards. It is best practice to update them together so that they match.
Menu Displays
You can hide a Page from Menu Display widgets and fragments that show the Pages Hierarchy. When enabled, a hidden Page can still appear in other navigation menus if added to them. See Configuring Site Navigation for more information.
Page Layout
For basic Widget Pages created using a global template (e.g., blog, wiki, search), determine whether the Page Inherits Changes made to the global template. If the Page does not inherit changes, select a custom layout to define row and column containers for its widgets.
Categorization
Use Topics and Tags to categorize a Page’s content so users can more easily find it. For more information on using tags and categories, see Organizing Content with Tags and Categories.
Look and Feel
Here you can use the Page set’s theme settings or define a unique look and feel for your Page. When you choose to customize the Page’s theme, you can toggle various theme settings.
You can also access a CSS editor where you can add custom CSS code to the Page. Any CSS code added to a Page in this way is loaded after the theme.
While Widget Pages include the Look and Feel tab here, Content Pages include these settings in the Edit sidebar menu.
Advanced Settings
Access additional settings to customize a Page’s content and features, including query strings, mobile device rules, custom fields, and embedded widgets.
While Widget Pages include the Advanced tab here, Content Pages include these settings in the Edit sidebar menu under Look and Feel.
Query String: Use this to provide default parameters for a Page when no others exist. Query strings are useful for web content templates.
Target: Use this field to determine Page link behavior using specific target attributes, such as opening the link in a new window, tab, or frameset.
Icon: Choose an icon to display along with a Page’s name in the Site’s navigation menus.
JavaScript: Add JavaScript code to a Page. Any added code is executed at the bottom of the Page. You can also access this editor in a Page Set’s Configuration Page.
If your Site’s theme uses JavaScript, it’s best to add custom JavaScript code to the theme rather than an individual Page or Page Set. This ensures your Site’s JavaScript code remains in one place. If your theme does not use JavaScript, place all of your Site’s JavaScript code here.
Mobile Device Rules: Determine whether a Page uses its Page Set’s rules for mobile devices or is uniquely configured. These rules determine how a Page’s content renders for different types of mobile devices.
Customization Settings: Determine whether a Widget Page’s columns are Customizable for users. If customization is enabled, specify the columns users can customize. See Personalizing Pages for more information.
Custom Fields: View and configure the Custom Fields you’ve defined for Site Pages. See Custom Fields for more information.
Embedded Widgets: Access widgets you’ve embedded in a Page using Web Content Templates, Page Fragments, or Themes.
The Custom Fields and Embedded Widget sections only appear once you’ve created custom fields and embedded widgets in a Page.
SEO
Search engine optimization (SEO) refers to the methods used to improve your Page’s ranking in search engine results Pages (SERP). The SEO tab provides easy access to settings you can use to optimize your Page’s content. See Configuring SEO and Open Graph for more information about the following settings.
HTML Title
Use the HTML Title field to define a Page’s <title>
tag. This title is used by search engines to rank your Page and serves as the Page’s heading in search engine results, though without replacing a Page’s Name. The recommended length for an HTML title is under 60 characters.
Description
Use the Description field to define a Page’s <description>
tag. This description is used by search engines to rank your Page and also appears in search result previews of your Page. The recommended length for a description is under 155 characters.
Custom Canonical URL
Set a custom canonical URL for a Page. Custom URLs set in this way take precedence over the global and instance level settings.
Keywords
List words that people are likely to use when searching for your Page’s content. These keywords contribute to your Page’s ranking.
Use keywords often throughout your Page’s content, including titles, headings, descriptions, paragraphs, and image alt text.
Preview SERP
Preview how a Page is displayed in search engine results Pages (SERP) based on your configuration of its HTML title, description, and custom URL.
Robots
Configure robots.txt
rules for a Page. These rules provide instructions to search engines and other tools crawling and indexing your Site, either blocking or granting a crawler access to a specified path.
Sitemap
Determine whether a Page is included in the sitemap used by site crawlers. By excluding a Page, you instruct site crawlers to skip it when crawling and indexing your Site.
Page Priority
Set a Page’s priority from 0.0 to 1.0. This informs tools crawling and indexing your Site how a Page should be prioritized relative to other Pages in your Site.
Change Frequency
Use the drop-down menu to inform tools crawling and indexing your Site how frequently a Page is updated.
Open Graph
Available: Liferay DXP/Portal 7.3+
Open Graph is an Internet protocol that standardizes previews of Site content when shared in application contexts that support it, such as Facebook, Slack, and Twitter. It does this by embedding structured data in page headers as <meta>
tags, similar to RDFa.
In the Open Graph tab, you can use Open Graph <meta>
tags to define a Page’s metadata and create engaging representations of your content. Values defined here override default values defined at the Site level.
Open Graph <meta>
tags are only included in page headers to unauthenticated users. They are not included when the user is logged in.
Image
Use the Image field to define the following Open Graph <meta>
properties for a Page:
<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
Image Alt Description
Use the Image Alt Description field to define the og:image:alt
property for a Page. You can also localize an image’s alt description via the Language Flag button.
Custom Title and Description
Use the Title and Description fields to define the og:title
and og:description
properties. These properties create custom text used for rich previews in place of a Page’s HTML title and description. You can also localize these values via their Language Flag buttons.
Preview Open Graph Page Representation
Preview your Page’s Open Graph configuration. This section displays how your Page’s content appears when its URL is shared in contexts supporting the protocol. Though an image’s ratio may change depending on where the URL is posted.
Custom Meta Tags
Here you can add custom <meta>
tags to the <head>
of a Page. These tags are only visible in a Page’s HTML source code and are used to describe a Page’s data and determine how that data is displayed in different contexts, such as search engine results and social media posts. Each tag is defined using property and content attributes.