tannerdolby / metagen-docs

Documentation site for eleventy-plugin-metagen.
https://metagendocs.netlify.app
1 stars 1 forks source link

Custom tags in metadata.js js object? #6

Open rossberenson opened 10 months ago

rossberenson commented 10 months ago

I have a metadata.js file that exports an object with global metadata. Everything works great except for custom tags.

module.exports = {
        title: 'Website Name,
        desc: '',
    url: 'https://example.com',
    img: 'https://example.com/assets/images/seo.jpg',
    twitter_card_type: 'summary_large_image',
    twitter_handle: 'twitterHandle',
    custom: [
        {tag: 'meta', attrs: {name: 'foobar', content: 'fizz'}},
        {tag: 'link', attrs: {rel: 'stylesheet', href: 'print.css', media: 'print'}},
        {tag: 'link', attrs: {rel: 'preload', href: 'myFont.woff2', as: 'font', type: 'font/woff2', crossorigin: 'anonymous'}}
    ],
    name: 'Company Name',
}
{% metagen
    title=title or metadata.title,
    desc=desc or metadata.desc,
    url=baseUrl + page.url,
    img=img or metadata.img,
    img_alt=img_alt or metadata.img_alt,
    twitter_card_type=type or metadata.twitter_card_type,
    twitter_handle=twitter or metadata.twitter_handle ,
    name=name or metadata.name,
    robots=robots or metadata.robots,
    custom=custom or metadata.custom
%}

With the above, everything outputs correctly except for custom. What would the proper formatting be for this situation, if its possible? I've been running into compiling issues when attempting the above.

Original error stack trace: TypeError: Cannot read property 'toLowerCase' of undefined [11ty] at getTag (/node_modules/get-tag/dist/get-tag.js:17:15)

Any help would be appreciated! My end goal is to add a custom twitter:image vs using the same image for both og:image and twitter:image. I was going to add a custom meta for twitter:image.

tannerdolby commented 9 months ago

@rossberenson Apologies for the delayed response. This functionality is now supported in v1.8.2+ of eleventy-plugin-metagen

Go ahead and install the latest version npm i eleventy-plugin-metagen@latest then utilize twitter_image and og_image for defining images specifically for Twitter or Open Graph. The custom tag support has also been updated so your original examples should work as expected. Have a look at the most up-to-date docs and let me know if you still run into any issues. Thanks!