Help Center

Menu

Step 5: Add metadata schemas

In this tutorial step, you will build on your new site by creating a metadata schema. The metadata schema will have some simple fields used in <meta> tags and some functional fields you will use later when you render the layout. You will also create a second metadata schema to allow editors to configure some site settings.

About metadata

This section contains some basic overview information about metadata. It is provided in case you are new to Matrix metadata.

What is metadata used for in Matrix?

In Matrix, you can use metadata for multiple purposes:

  • Rendering HTML meta tags in the HTML head.

  • Creating structured content models. For example, custom fields for a product page or some content type.

  • Allowing content editors to configure options for a particular page. For example, turn off the right column.

What does Matrix metadata consist of?

Matrix Metadata is made up of the following parts:

Metadata fields

Several types of form fields to capture data.

Metadata sections

Used to group fields together.

Metadata schemas

Used to group sections together into an overall schema.

Site asset schemas and page schemas

Metadata can be applied to a whole site, or set to only apply to an individual asset. The common convention is to use one Site asset schema for global variables that are defined once to use across an entire site. For example, the image used as the site logo could be referred to as a global variable. A Page schema can be cascaded to all pages in a site, and is used for data that is specific to a given page. An example is the description content or layout controls for a page.

For more background information on Matrix metadata schemas, read Configuring metadata schemas.

Create a metadata schema for your page

  1. In the Metadata Schemas folder, create a metadata schema asset called Global schema.

    1. Right-click on the Metadata Schemas folder.

    2. Select Create new…​  Metadata  Metadata Schema.

    3. Type Global schema as the name.

    4. Select Create.

  2. Add a new section to the Metadata Schema asset called meta tags.

    1. Right-click on the Global schema asset.

    2. Select Details.

    3. Select Edit.

    4. Scroll to Create new section.

    5. Type meta tags as the section name.

    6. Select Save.

  3. On the Global schema Details page, add the fields shown in the table below:

    1. Scroll to the meta tags section.

    2. Select Add field.

    3. Complete the following fields based on the table.

      Field name Friendly name Type

      keywords

      Keywords

      text field

      description

      Description

      text field

    4. Select Save.

    This image shows a part of the Global Schema asset Details screen. It shows the Metadata Sections section

  4. Select the description field name. You will go to the description field asset details page.

  5. Set the Field Type to Text area to provide a larger field to hold more content.

  6. Select Save.

    This gif shows how to change the field type on a meta tag. The cursor selects the meta tag on the metadata schema details screen. Focus is switched to the meta tag details screen

  7. Go back to the Global Schema metadata schema Details screen.

  8. Select on the keywords field name to go to the keywords field asset details screen.

  9. Change the field type to Multiple text fields.

  10. Add a new section to the schema called layout:

    1. Right-click on Global Schema.

    2. Select Details.

    3. Select Edit.

    4. Scroll to Create New Section.

    5. Type layout as the section name.

    6. Select Save.

  11. In the layout section add the following fields:

    Field name Friendly name Type

    show-heading

    Show heading?

    Select

    right-col

    Show right column?

    Select

    right-col-include

    Right column include

    Related asset

  12. Select show-heading in the fields section.

  13. Select Edit.

  14. On the Details page of the show-heading asset, set the following fields as specified:

    1. The Allow Multiple field is not set.

    2. The Allow Empty field is not set.

    3. Style is checkbox.

    4. Type is unordered list.

    5. Add the following Select Field Options.

      1. Select Add option.

      2. Enter the Option Key and the Option Value for each field shown in the table below.

      3. Repeat until all options are added.

      4. Select Save.

    Option Key Option Value

    0

    No

    1

    Yes

  15. The Default value field will appear. Select Yes from the options.

  16. Select Save.

  17. Update the right-col asset to match the following:

    1. The Allow Multiple field is not set.

    2. The Allow Empty field is not set.

    3. Style is checkbox.

    4. Type is unordered list.

    5. The options are as follows:

    Option Key Option Value

    0

    No

    1

    Yes

Create a site asset metadata schema

Create a metadata schema for your site asset. See Site asset schemas and page schemas for an explanation of the difference between the two.

  1. In the Metadata Schemas folder create a new metadata schema called Site schema.

    This image shows the menu structure used to create a Metadata schema. It shows the menu opened when you right-click on the Metadata Schemas folder. You then mouse over Create New

  2. Add a section called Site settings.

  3. Add a field called site-logo to the section based on the following details:

    Field name Friendly name Type

    site-logo

    Site logo

    related asset

  4. Select on site-logo on the Fields section of the Site settings Details page.

  5. On this page, set Restrict asset types to Image. Content editors can use this field to assign an image for the site logo.

  6. Select Save.

Apply your metadata schemas

You now need to apply your metadata schemas to the site asset.

  1. Right-click on the Test Site site asset and then select Settings  Schemas.

  2. Select Edit.

  3. In the Add New Schema section’s Select Schema option, select Apply from the drop-down menu.

  4. Enter the Global schema asset ID, or select the Global schema asset ID using the asset picker.

    This gif shows the site asset settings > schemas screen. It shows the cursor selecting on the asset selection tool. The available assets are highlighted on the asset tree on the left. The cursor moves to the Global schema

  5. Select the Cascade this new schema to newly-created children checkbox.

  6. Select Save.

  7. The Global Schema will appear on the screen. The Cascade? check box will be checked.

  8. Apply the Site schema to the Site asset. On the same Schemas page:

    1. In the Add New Schema section’s Select Schema option, select Apply from the drop-down menu.

    2. Enter the Site schema asset ID, or select the Site schema asset ID using the select tool.

    3. Clear the Cascade this new schema to newly-created children checkbox. Doing so will ensure that the site schema will only be applied to the Test Site asset and not its children.

    4. Select Save.

The Site schema will appear in the Applied Schemas box. The *Cascade?* Check box will NOT be checked.

Update your design asset to render metadata

To make your metadata values appear on the page, you must add a tag to the parse file on the Design asset.

  1. Open the parse file on the Design asset:

    1. Go to Designs  Global design.

    2. Right-click on Global design and select Edit Parse File.

  2. Select Edit.

  3. Add the following line just before the ending </head> tag:

    <MySource_AREA id_name="metadata" design_area="metadata" />

The parse file will now look like this:

This image shows a listing of the html parse file

Test your page metadata

To test your page metadata you will have to enter some content into metadata fields on a page and then check the page source HTML. You will see metadata tags in the HTML.

  1. Right-click on your Home page and then select Metadata.

    This image shows the menu shown when you right-click on the Home page asset. It shows Metadata highlighted.

  2. Select Edit.

  3. Enter the following information on the Metadata screen:

    1. Keywords: fruit

      • apple

      • orange

      • plum

      • pear

    2. Description: This page shows fruit varieties.

    3. Set Show heading? to No.

    This image shows the keywords

  4. Select Save.

  5. Look at the Metadata Output at the top of the page. It will show the keywords, description, show-heading, right-col and right-col-include metadata tags.

This image shows HTML meta tags for the keywords

  1. Edit Design nesters  Header  Content.

  2. Edit the code to replace the logo URL with %globals_site_metadata_site-logo_asset_url%.
    This will dynamically load the logo image URL after it is set on the Site asset metadata.

This image shows the header content updated with the logo URL updated to a variable.

Set your site logo image

  1. Add a folder under your site asset.

    1. Call it Images.

    2. Select Hidden link so that it will not be displayed in menus.

    3. Select Create.

  2. Create a new image file called Logo.

    1. Right-click on Logo.

    2. Select Create new…​  Files  Image.

    3. Select Choose file.

    4. Choose your image.

    5. Select Create.

  3. Add the logo file to the site asset metadata:

    1. Right-click on the Test Site site asset.

    2. Select Metadata.

    3. Select Edit.

    4. Scroll to the Site logo section and either:

      • add the asset ID of the Logo file

      • use the asset picker to select the Logo file.

This gif shows the logo field ipartn the metadata. The cursor is choosing the logo file and the asset details are populated in the logo field.

Test your site and page metadata

You can test your site in a browser in two ways:

  • Copy the URL from the site asset and paste it into a browser.

    OR

  • Right-click on the site asset and select Preview  In new window.

    This image shows the drop down menu that appears when you right-click on the site asset. It shows Preview selected

    You will see your site in the new tab.

    1. Check that the following points are true:

      • You see your logo in the header.

      • You see your logo in the footer, from the keyword when we created the footer.

      • When you view the source of the page, you see the meta tags in the HTML.

    2. Your site will now look like this:

    Screenshot of test site with logo in header and footer.