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 on a web scrape source, 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 source 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 the Source Configuration:

   • If you don’t have a web scrape source yet, create a new one in Sources
   • If you already have one, open its settings
   • The CSS Metadata Selectors field is in the source’s Advanced settings

2. Add Metadata Selectors:

   • In the source 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. Choose a Scrape Plan:

   • When creating the source, choose its Scrape Plan (Weekly, Daily or First crawl only).
   • If editing an existing source, changes will take effect the next time it is scraped.

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 source is configured, move to Step 3: Using Enhanced Search Results to see how metadata improves the search experience.