Collection page что это

Обновлено: 02.07.2024

What does that mean? When it comes to developing a strategy for your schema markup, understanding the intent of a web page and its place in the site architecture is essential. If a page is mostly intended as an article that contains a small FAQ section, there’s an implied hierarchy that the article is the most important piece of content. So, this would be marked up as an Article containing an FAQPage . If the page is more of a landing page with equally important pieces of content, and links intending to bring users to other parts of the site, there’s a good chance it’s a CollectionPage .

Adding and connecting content

You can design and develop the Collection page just like any other static page—but the power of Collection pages comes when you want to bring in dynamic content into that design.

Adding static and dynamic elements

Just like with Collection lists, elements dropped into a Collection page are static until they are connected to a field from the Collection. You design a Collection page like any other page, but the page acts as a template for all the Collection items

You can connect different elements in your design to Collection fields by following these steps:

  1. Select an element on the Collection page
  2. Click the settings icon (or go to the Element Settings Panel — shortcut:D)
  3. Check Get content from Collection
  4. Open the dropdown and choose the collection field you want to get content from

Once an element is getting content from a field, it is not just for that one item. This field is connected to the element across all item’s pages in that Collection.

Step one on the left, select the settings icon on the H1 text element. Step two on the right, the choose heading type settings panel displays H1 through H6 buttons, a learn more message with a Ok, got it button, a check box for the CMS Get text from a collection called Blog posts with a dropdown menu and a show all settings button.

Pro tip
Static elements have blue outlines and dynamic elements, or elements that have data coming from the CMS, have purple outlines on the canvas.

Frequently Asked Questions about CollectionPage Schema Markup

What is CollectionPage schema?

What is the correct way to use the CollectionPage type?

If the page is more of a landing page with equally important pieces of content, and links intending to bring users to other parts of the site, there’s a good chance it’s a CollectionPage .

Is a CollectionPage eligible for rich results?

While a CollectionPage isn’t eligible for rich results, it can contain other data items that are. For example, it may contain an Article and an FAQPage while also mentioning a Product , all of which are eligible for rich results.

Do you need help creating CollectionPage schema markup for your website?

Jasmine Drudge-Willson is a Customer Success Manager at Schema App. Prior to this position, she worked as a research assistant tackling time, space, and identity representation in the development of a semantic web ontology for the Canadian Writing Research Collaboratory (University of Guelph). This work extended to the Revue 2.0 project (Université de Montréal) which addressed the role of ontologies in digital scholarly publishing environments. Her internship at Huma-Num—a very large research infrastructure project in Paris, France—solidified her passion for finding a balance between usability and ethical responsibility in cyberinfrastructure development.

Creating a Collection page

Once a Collection is created, a Collection page will automatically be created as well. You can select this Collection page by going to the Pages Panel, and choosing it under the Collection pages section. A purple icon next to the Collection page indicates that it’s a CMS-generated page.

The CMS collection pages section displays four page templates called, Authors, Blog posts, collections and projects.

Collection pages

Structure and style Collection pages that work like templates and automatically update your design.

This video features an old UI. Updated version coming soon!

Anytime you create a new item (e.g. blog post, help article, etc) in a Collection, a page is automatically created for it. Collection pages work like templates – the layout and design of the Collection page applies to all automatically generated item pages.

Collection pages are essentially templates for recurring pieces of content, such as blog posts, help articles, or even landing pages.

In this lesson
  1. Creating a Collection page
  2. Adding and connecting content
  3. Previewing Collection pages
  4. Linking to a Collection page
  5. Collection Page Settings

A diagram displays a dotted line connection from a Collection to both a Collection list and a Collection page. The Collection list branches off to three profile tab previews. The collection page branches off to a single profile card.

CollectionPage Properties

While a CollectionPage isn’t eligible for rich results, it can contain other data items that are. For example, it may contain an Article and an FAQPage while also mentioning a Product , all of which are eligible for rich results. Since the CollectionPage isn’t a Google Feature , it doesn’t have any required or recommended properties. That being said, there are a number of properties available to this type that we recommend using to define your CollectionPage and how it relates to other data items.

    : What the page is about. This property can connect to any type of Thing , be it a Service , an Organization , or the URL of a Wikipedia page that defines a particular topic. : A strong connector for linking to a CreativeWork that is a part of the collection page. Some subclasses of CreativeWork that are commonly used are Article and FAQPage . : A weaker connector that can link to any type of Thing . This is a good property to use when connecting to something that isn’t a CreativeWork such as a Product, Organization or Service . / publisher / creator : The author, publisher, or creator of the collection page. These properties are a good way to connect to an Organization and its associated brand information. : One of the more significant URLs on the page. Typically, these are the non-navigation links that are clicked on the most.

Create collection items

Once the collection is created, you can start creating collection items such as blog posts, products, listings, and so on either in the Designer or the Editor.

Learn more about: collection items

Overview Ecommerce Collections

Learn all about the Webflow Ecommerce Products and Categories Collections.

This video features an old UI. Updated version coming soon!

Ecommerce Collections are automatically created for you once you enable Ecommerce for a project. You’ll see the two Collections — products and categories — in the Ecommerce panel located in the left sidebar. You can edit the settings of these Collections to customize and enrich them with custom fields. Then, you can input or import products and categories to build your store database.

In this lesson
  1. Ecommerce panel
  2. Products and categories Collections
  3. Collection settings and custom fields

Edit a collection

Once you’ve created a collection, you can go back and edit the collection structure and settings even after the project has been published.

The settings button to edit a created collection is highlighted on the top right corner of the Collection items panel. It is located between the Import and New Blog Post button.

To access the collection settings, open a collection in the CMS and click on Settings. You can also click on the settings icon next to the collection in the collection panel.

You can add a new field, edit an existing field, or even remove a field altogether. In each field, you can modify the label and help text. Customizing the help text can make it clear to Collaborators what each field is intended for.

The Help text input field is highlighted within a Work settings panel. It currently displays text as follows, "How many team members worked on this project."

Delete a Collection field

You can only delete fields that aren’t being used in your designs, collection page settings, collection list settings such as filters or conditional visibility.

Reorder the display of CMS collections

CollectionPage Schema Markup Tutorial

Learn how to create comprehensive and robust CollectionPage schema markup with the following tutorial using the Schema App Editor.

How to create CollectionPage schema markup:

Step One: Create a CollectionPage Data Item
Step Two: Provide a name and URL for this data item
Step Three: Populate all required and any applicable recommended properties

We put together a video tutorial to walk you through your review schema markup. We hope you find it helpful!

For more information on how to create CollectionPage schema markup, including examples of JSON-LD code to help you get started, see our Knowledge Base support article here.

Design with collections

Previewing and switching Collection pages

You can switch the content in the page to any Collection item using the dropdown in the top bar. You can go to a specific page by typing the name of the page in the search bar at the top of the Collection pages dropdown or in the Quick find bar.

The blog posts template collection page displays a dropdown to select between 6 different pages.

Helpful shortcut keys
Holding Shift+Option (Shift+Alt on Windows) and pressing the left and right arrows on your keyboard will switch collection items to the next or previous item in the list.

Three collection items displaying the process of switching from one to another.

Ecommerce panel

The Ecommerce icon in the left sidebar opens the Ecommerce panel which allows you to access the Ecommerce collections (products and categories collections) as well as the Setup guide, which guides you through the process of setting up your store from start to finish.

The setup guide has three sections. There are green check mark buttons turned on in settings within each section.

This guide can help you set up your store, design it, and launch it.

You can also access orders and get notified about new orders in the Ecommerce panel.

CMS Collections

CMS Collections are content types with different structures in the Webflow CMS, like blog posts, authors, or help articles.

This video features an old UI. Updated version coming soon!

The CMS collections panel displays six collections. The blog posts collection is selected and displaying six different collection items with their cusotmized status, color, created date, modified date and published date.

In this lesson
  1. Create a collection
  2. Edit a collection
  3. Create collection items
  4. ‍Design with collections

Collection Page Settings

In the Collection page settings, you can set the SEO meta title & description, Open Graph title & description, RSS, and custom code for your Collection page templates. However, unlike static pages settings, Collection page settings can have dynamic values, meaning they result in unique information for each Collection item page.

You can access the Collection page settings through the settings icon that appears when you hover over a Collection page template in the Pages Panel.

A settings icon is highlighted on a Blog post template page under the CMS collection pages section.

Dynamic SEO Settings

The SEO settings panel displays a search result preview, a title tag with a Name field added and a meta description input field with a blog post summary field.

Dynamic Open Graph Settings

Here, you can set the information that will be presented when sharing links to Collection pages on Facebook, Twitter, LinkedIn, Pinterest, and Google+. Using Collections fields will create a template for each page, resulting in unique Open Graph information for each page.

The Open Graph Settings panel displays an image preview, an input field for a title, a check box for Same as SEO title tag, an input field for a description and a check box for Same as SEO meta description and a drop down menu for the open graph image.

RSS Feed Settings

You can enable an RSS 2.0 feed for a Collection in the Collection page settings. This publishes a feed that RSS reader users can subscribe to and get updates when you publish new Collection items.

The RSS Feed Settings panel displays a description and a radio button to Enable RSS 2.0 feed for a collection item called Blog Post pages.

Here you can define the feed settings. You can use Collection fields to create a dynamic template for RSS channel title, description, and other settings. You can also see a preview of the feed right in the page settings. Then, ‍you can copy the RSS URL to use with other apps, or even add a link to it on your website.

Custom code

You can add custom code and scripts to the <head> or </head><body> tag of a Collection page template. This will apply to all Collection pages. And if this code contains any information that you would like to have a unique value per Collection item page, then, you can replace that value in the code with a Collection field. Simply, select the value, and click on the purple </body> + Add Field located at the upper right of the custom code text field.

Linking to Collection pages

You can link to a Collection page from other Collection pages or from a Collection list. Follow these steps to link from a Collection list:

  1. Add a Collection list
  2. Connect it to a Collection
  3. Add a button, or any other link element to the Collection list
  4. With the link element selected, click the gear icon (or go to Element Settings Panel)
  5. Choose the purple Collection page link option
  6. Choose Current Item

This will link each button in the Collection list to its respective Collection page created for each item.

Pro tip
You can also connect any link element to a link field in the URL field type of your link settings.

Create a collection

You can create CMS collections in the CMS panel. Ecommerce collections are created automatically in the Ecommerce panel.

The CMS Collections panel displays five lists and it includes a "Create new collection" button to the right of the close panel icon. The "Create new collection" button is highlighted.

Collection settings

To complete the creation of your new collection, give it a name, choose a slug for the URL structure, and create the data structure by either choosing a template or adding custom collection fields.

Collection templates

If you’re not sure what content structure you need for the collection, you can use one of our preset collection templates to get started. Each of these templates has their own set of fields which you can add to or delete from as needed.

The twelve collection presets that are included in the New collection panel are blog posts, authors, categories, projects, clients, team members, listings, events, menu items, songs, shows and recipes.

Collection name

Once you specify the name of your collection, singular and plural versions of the name will be generated and used in different places throughout the project. The collection name can be customized at any time.

The Collection name input field is highlighted in the Collection settings panel.

Collection URL

The next step is to specify the collection URL (slug) which is the name of the folder that your collection pages will be stored in. The text you specify here will determine the URL structure of your collection pages — all the pages generated for each collection item. This URL can be the same as the singular or plural version of the collection name or it can be customized.

The Collection URL input field is highlighted in the Collection settings.

Rename the Collection URL
  • Old path: /old-collection-url/(.*)
  • Redirect to path: /new-collection-url/%1

The 301 Redirects section displays an old path text input field and a Redirect to path text input field. A green "Add redirect path" button is on the right side of the section.d

Set 301 redirects in your Project settings → Hosting → 301 redirects settings.
At the moment, you cannot rename collection slugs of Ecommerce collections. This feature is coming in the future. Also note that if you want to Enable Ecommerce on an existing site, at the moment, you cannot have CMS collections and static pages or folder with slugs reserved for Ecommerce such as product and category.
Collection fields

While presets can be a good way to get started quickly with CMS collections, you can also build your collections from scratch, adding or removing fields as needed for the type of content you’re working with. You can also add custom fields to Ecommerce collections.

The Works collection item displays a Basic info section and a Custom fields section. A purple "Add New Field" button is displayed in the top right corner of the panel.

There are many different field types to choose from when structuring your collection. Each field translates into different kinds of content that you incorporate into the design for your project.

The 16 field types that can be selected under custom fields are plain text, rich text, image, multi-image, video link, link, email, phone, number, date/time, switch, color, option, file, reference and multi-reference.

Collection settings and custom fields

When you access the settings of your products or categories Collections, the default fields we talked about above are listed there, however, you cannot edit them. Yet, you can add and edit custom fields to add more data related to your products and categories.

Updating Collection settings

You can rename the products and categories Collections and add custom Collection fields. You cannot edit or remove default Collection fields.

At the moment, you cannot rename Collection slugs of Ecommerce Collections. This feature is coming in the future. Also note that if you want to Enable Ecommerce on an existing site, at the moment, you cannot have CMS Collections and static pages or folders with slugs reserved for Ecommerce such as product and category.

Adding and updating custom fields

There are many different Collection field types you can choose from to enrich your Ecommerce Collections. You can then use the content of these fields to design, style, and organize your Ecommerce pages and lists.

You can update these custom fields at any time. You can add a new field, edit an existing field, or even remove a field altogether. In each field, you can modify the label and help text.

Testing Your CollectionPage Schema Markup

Schema Markup Validator

Schema Markup Validator Screenshot

Rich Results Testing Tool

Rich Result Test

Products and categories Collections

Since Ecommerce Collections are in fact dynamic Collections, adding products and categories is very similar to creating collection items. However, unlike CMS Collections, Ecommerce Collections have a set of default fields that you cannot edit in the Collection schema. Still, you can add custom fields to enrich your Ecommerce Collections. For example, you can add color fields, switch fields, and even a file field where you can upload a catalog of your category or PDF specs of your product.

Resources

Default products collection fields

The products Collection comes with the following default fields:

Name (required)

This is the name of your product. A slug is automatically generated based on the first name you apply. You can change the slug by clicking the collection item URL right under the name field.

Description

This field allows you to add a description of your product. Being a plain text field, you can connect this description to a paragraph element in your designs, and even connect it to the SEO and Open Graph descriptions in your products Collection settings.

Learn more

Main image

This Image field allows you to add a single image of your product.

More images

This multi-image field allows you to add multiple images for your product.

Price (required)

The price is a required field. It’s a number field that inherits a currency unit from the Ecommerce general settings. Changing the currency sets any existing products to draft. You’ll need to manually update the price to the new currency value. Also, you’ll need to update all previously configured shipping methods.

Compare-at price

If your product is on sale, set the original price in this field.

Product tax class

Some products are exempt from sales tax, while others have lower sales tax — it all depends on the type of product you’re selling. If your product is taxable, specify the tax class of the product, so auto tax calculations are more accurate. If your product isn’t taxable, select “Exempt from taxes” to not charge sales tax on that product. The default for this field is “Standard automatic tax calculation” for all products.

Categories

This is a multi-reference field that allows you to add a product to one or more existing categories or create new categories right from within the product item setting.

Measurements

Here you can enter all the measurements of your product from width, height, length, and weight. These details can be used to determine shipping rates.

Inventory tracking

If you want to track inventory, toggle the Track inventory switch “on.” This enables you to specify the quantity of items you have for this product.

SKU

This is a plain text field that allows you to associate your online products with their SKU (stock keeping unit — a unique alphanumeric ID code that can help you identify a particular product) and is for internal use for tracking inventory.

Options

In this section, you can create product option sets and list the options that you offer for each product. Variants will be created for each combination of options. Each variant is a product on its own, you can edit the details of each variant and specify the same fields for each variant: Image, Quantity, SKU, Price, Compare-at-price, and Measurements.

Default categories Collection fields

The categories collection comes with the following default fields:

Name (required)

This is the name of your product category. A slug is automatically generated based on the first name you apply. You can change the slug by clicking the Collection item URL right under the name field.

Products

This is a multi-reference field that allows you to add all your products to a category. It is also auto-populated with the products that you’ve added to that category from the product item settings.

The relationship between products and categories

The multi-reference field that links categories and products is unique in that the field in the categories Collection is automatically populated by products that belong to that category since you’ve inputted that while creating your product item. The same is true if you add all products to a category in the category Collection, the category field of those items will be auto-populated by that category.

Читайте также: