Getting strange errors when conditionally loading <SEO /> component.

joshuaiz commented 1 year ago

Hello,

Thanks for this package.

Running into an issue when conditionally loading the <SEO /> component with different data.

Here is a minimal example.

Here is [product].astro

---
import MainLayout from '@layouts/MainLayout.astro'
---

<MainLayout pageType="product" data={productData}>
    <!-- children here -->
</MainLayout>

Then here is MainLayout.astro:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            svg {
                width: 1em;
                height: 1em;
                /* maybe even... */
                color: currentColor;
            }
        </style>

        {
            pageType && pageType === 'product' && (
                <>
                    <SEO
                        title={title}
                        description={description}
                        openGraph={{
                            image: {
                                alt: title,
                            },
                            basic: {
                                title: title + ' Company',
                                image: imageSrc,
                                imageAlt: imageAlt,
                                type: 'product',
                            },
                        }}
                        twitter={{
                            creator: '@company',
                        }}
                        extend={{
                            // extending the default meta tags
                            meta: [
                                {
                                    name: 'twitter:image',
                                    content: imageSrc,
                                },
                                { name: 'twitter:title', content: title },
                                {
                                    name: 'twitter:description',
                                    content: description,
                                },
                            ],
                        }}
                    />

                </>
            )
        }
        {
            (pageType && pageType !== product && pageType === 'home') ||
                 && (
                    <SEO
                        title="Company - Home"
                        description="Lorem ipsum dolor sit amet, eos ad adhuc minim possim. Cu phaedrum intellegat eum. Persius eligendi est in, vix iriure splendide ad. Sed doctus detraxit legendos eu, quo eu mollis tamquam. Populo consequat efficiendi vix in."
                        openGraph={{
                            image: {
                                alt: 'Company',
                            },
                            basic: {
                                title: 'Company - Home',
                                image: openGraphImage,
                                imageAlt: 'Company',
                            },
                        }}
                        twitter={{
                            creator: '@company',
                        }}
                        extend={{
                            // extending the default meta tags
                            meta: [
                                {
                                    name: 'twitter:image',
                                    content: openGraphImage,
                                },
                                {
                                    name: 'twitter:title',
                                    content: 'Company',
                                },
                                {
                                    name: 'twitter:description',
                                    content:
                                        'Lorem ipsum dolor sit amet, eos ad adhuc minim possim. Cu phaedrum intellegat eum. Persius eligendi est in, vix iriure splendide ad. Sed doctus detraxit legendos eu, quo eu mollis tamquam. Populo consequat efficiendi vix in.',
                                },
                            ],
                        }}
                    />
                ))
        }

        <!-- rest of <head> -->

^^ if I try to load <SEO /> conditionally like this I get very strange errors as if the home page is trying to load [product].astro.

Bottom line is, this doesn't work...how can we dynamically load data into <SEO />?

achamorro-dev commented 1 year ago

Hey @joshuaiz have you tried to generate the SEO data in the MainLayout frontmatter section? You can avoid these conditionals in the template to solve these errors.

joshuaiz commented 1 year ago

@achamorro-dev that's exactly what I am doing. Passing props then generating the values in frontmatter to use in the component.

If I try to load two versions of <SEO> as above, I get very strange behavior.

In the end, I ended up just rolling my own SEO component which is working out great.

jonasmerlin commented 1 year ago

Hey @joshuaiz, sorry you felt like you had to implent your own SEO component. (Though I always encourage rolling your own specific solution!)

You have a few errors in your SEO props, e.g. the OpenGraph.image.imageAlt prop that doesn't exist. Though beyond this, I can't seem to reproduce these errors.

jonasmerlin / astro-seo

Getting strange errors when conditionally loading <SEO /> component. #52