2 - Metadata Selectors

CSS Metadata Selectors allow you to improve search results by extracting meaningful metadata from your content during indexing. This section guides you through configuring these selectors when creating a new Index, enabling enriched search results.

What are CSS Metadata Selectors?

CSS Metadata Selectors target specific HTML elements on your webpages to extract structured information, such as:

• Meta descriptions for concise summaries.
• Open Graph images for visual appeal.
• Publication dates for content freshness.

These selectors help transform raw text snippets into polished, user-friendly search results.

How CSS Metadata Selectors Work

When configured in your Index settings, CSS Metadata Selectors:

1. Target elements based on CSS-style formatting, such as meta[name="description"] or .post-date.
2. Extract matched content during the indexing process.
3. Store this metadata in the metadata field of search results.

Step-by-Step Configuration

To configure CSS Metadata Selectors:

1. Open Index Configuration:

   • If you don’t have an existing index, go to you index configuration by creating a new one
   • If you have an existing index, go to your index settings

2. Add Metadata Selectors:

   • In the Index configuration, add CSS selectors for the elements you want to extract:
     • Use a dot (.) for classes (e.g., .post-date).
     • Use element names directly for tags (e.g., meta or h1).
     • Use attribute selectors for specific attributes (e.g., meta[name="description"] or meta[property="og:image"]).

3. Set Periodic Resync Configuration:

   • During Index creation, configure the resync period (daily, weekly, or never).
   • If editing an existing Index, changes will take effect after the next scheduled resync.

Best Practices for Metadata Selectors

1. Target Meaningful Elements: Choose elements like descriptions, images, or dates to provide valuable context.
2. Keep Selectors Simple: Avoid over-specific selectors to ensure broad compatibility across pages.
3. Test Selectors: Use browser developer tools to confirm they match the desired elements before saving.

What to Expect

After configuring CSS Metadata Selectors, search results will include enriched metadata such as:

• A summary that can be used to replace the results’ description.
• Images for better visual presentation.
• Publication dates to indicate relevance and freshness.

What’s Next?

Once your Index is configured, move to Step 3: Using Enhanced Search Results to see how metadata improves the search experience.