Proposal :: Meta Tags :: Only render a tag when content is available

[eduardobbrito]

Description

I'd like to propose an use case in which someone adds the base SEO component but doesn't provide any content to render the tags.

This scenario might be interesting for those who wish to leverage the default JSON LD functionality but have a need to provide the remaining tags in any other way.

For this, I'm suggesting that the component skip every tag without content.

Reasoning / Justification

Empty tags are the same as no tags. Because of that, its better to skip rendering a tag that has no content in it, even for those whose content might be inferred from context.

Also, several SO and device specific tags are not contemplated in the base component, a behavior I agree with. Those tags are usually defined using a custom call to Head since there are several icon sizes and tags for social networks that might not be interesting for every project.

Finally, by avoiding the need to duplicate a tag, the final HTML doc size will be reduced.

Code explanation

Overall, I've just added a check before rendering any tag. The tags are now unordered, but the order of elements in the head tag is (usually) not meaningful.

I've also removed most of the Twitter tags since they have fallbacks relying on OpenGraph tags. I've also added the og:url canonical tag. As a final change I've added a select for Twitter Card, but it might be best to just have a separate component specifically for Twitter or any other social network/service.

Since this is mostly a proposal, theres still the need to go over the logic on displaying the previews.

Wrapping up

I've used this favicon generator to implement the custom tags on Zee.Dog, and it comes packed with all the files and tags needed. Creating a custom SEO component was then much easier, but still, I wanted to have access to the default JSON LD. Allowing the base SEO component to render only the existing content enabled me to create custom SEO components while still leveraging the LD implementation without the need to duplicate tags.

[mcandeia]

🪂 landing here just to praise your detailed description @eduardobbrito