Deprecate the Seo component and add getSeoMeta for migration
#1875
Conversation
This comment has been minimized.
This comment has been minimized.
|
Oxygen deployed a preview of your
Learn more about Hydrogen's GitHub integration. |
blittle
force-pushed
the
bl-seo-meta
branch
2 times, most recently
from
64cf67d
to
f43e3b4
Compare
| /** | ||
| * Generate a Remix meta array based on the seo property used by the `Seo` component. | ||
| */ | ||
| export function getSeoMeta< |
There was a problem hiding this comment.
Most of this is copied from generate-seo-tags.ts, but slightly modified to return Remix supported objects.
| import {getSeoMeta} from './getSeoMeta'; | ||
| import {SeoConfig} from './generate-seo-tags'; | ||
|
|
||
| describe('getSeoMeta', () => { |
There was a problem hiding this comment.
This was also copied from the existing seo.test.ts and slightly modified.
Good call. I'll think a bit more about this, and see if there is a simple way we can deal with merging (beyond just copying their utility). |
blittle
force-pushed
the
bl-seo-meta
branch
4 times, most recently
from
3ed7aa1
to
b216437
Compare
.changeset/tiny-sheep-report.md
Outdated
| ```ts | ||
| export const meta = ({data, matches}) => { | ||
| return getSeoMeta( | ||
| args.matches[0].data.seo, |
There was a problem hiding this comment.
I think it is suppose to be just matches[0].data.seo?
| * Generate a Remix meta array from one or more SEO configuration objects. This is useful to pass SEO configuration for the parent route(s) and the current route. Similar to `Object.assign()`, each property is overwritten based on the object order. The exception is `jsonLd`, which is preserved so that each route has it's own independent jsonLd meta data. | ||
| */ | ||
| export function getSeoMeta( | ||
| ...seoInputs: Optional<SeoConfig>[] |
There was a problem hiding this comment.
This is what I meant with the optional callback/transformer. How do you tell typescript "these are all SeoConfigs except the last one"? In the first argument it's easy but the last? 🤔
WHY are these changes introduced?
We introduced the
<Seo />component because Remix did not support generating json/ld meta data from route meta exports. This was fixed last year. Additionally, the Seo component is difficult to use with Remix's existing meta. It's difficult to pick and choose and override what you want from it. We think it is simpler to just use Remix meta exports directly.WHAT is this pull request doing?
This PR deprecates the Seo component and introduces a new helper function to make migration easy.
See the changeset for a complete explanation and examples. Also updated docs are available at: https://shopify-dev.shopify-dev-www3.bret-little.us.spin.dev/docs/api/hydrogen/2024-01/utilities/getseometa
HOW to test your changes?
Add a meta export to routes within the skeleton template. Call and return
getSeoMetawith SEO properties. Make sure the proper meta data is generated on the page.Post-merge steps
Checklist