Support Search Engine Tags (itemprop)

[Rodrigo54]

Which scope/s are relevant/related to the feature request?

router

Information

Currently, the MetaTag type in @analogjs/router supports four meta tag types: charset, httpEquiv, name, and property. However, there's no support for itemprop meta tags, which are essential for Schema.org structured data and search engine optimization.

Use case:

<meta itemprop="name" content="Article Title">
<meta itemprop="description" content="Article description">
<meta itemprop="image" content="https://example.com/image.jpg">

Proposed solution:
Add itemprop as a fifth meta tag type in packages/router/src/lib/meta-tags.ts:

const ITEMPROP_KEY = 'itemprop';

export type MetaTag =
  | (CharsetMetaTag & ExcludeRestMetaTagKeys<typeof CHARSET_KEY>)
  | (HttpEquivMetaTag & ExcludeRestMetaTagKeys<typeof HTTP_EQUIV_KEY>)
  | (NameMetaTag & ExcludeRestMetaTagKeys<typeof NAME_KEY>)
  | (PropertyMetaTag & ExcludeRestMetaTagKeys<typeof PROPERTY_KEY>)
  | (ItempropMetaTag & ExcludeRestMetaTagKeys<typeof ITEMPROP_KEY>);

type ItempropMetaTag = { [ITEMPROP_KEY]: string; [CONTENT_KEY]: string };

And update getMetaTagSelector:

function getMetaTagSelector(metaTag: MetaTag): MetaTagSelector {
  if (metaTag.itemprop) {
    return `${ITEMPROP_KEY}="${metaTag.itemprop}"`;
  }
  // ... existing checks
}

This would allow usage in route files like:

export const routeMeta: RouteMeta = {
  meta: [
    { itemprop: 'name', content: 'My Page Title' },
    { itemprop: 'description', content: 'Page description for structured data' },
  ],
};

Describe any alternatives/workarounds you're currently using

Currently, I have to manually inject the Meta service and add itemprop tags in components or use a custom resolver, which defeats the purpose of the declarative route meta API.

I would be willing to submit a PR to fix this issue

• Yes
• No

[brandonroberts]

Good idea @Rodrigo54