DEV Community

loading...

SEO Can Be Deceiving - Especially in NPM Packages

aej11a profile image aej11a ・2 min read

I was recently working on head tag management in React apps, so I searched uncle Google for "react head manager."

The entire first and second pages of results mentioned two packages, react-helmet and react-head. I had heard of React Helmet before, which has over 1 million weekly downloads and decent maintenance, while React Head was a lesser-known package with only 6.5 thousand weekly downloads and less maintenance.

react-helmet logo

It seemed like a no-brainer at first: react-helmet was the way to go. But I asked myself, what motivated someone to use react-head and what motivated 6,500 people to use it weekly?

I looked deeper: the react-head documentation linked to an article which discussed some issues with react-helmet, mostly that it isn't thread-safe which can lead to problems with SSR.

I investigated more and found out that react-helmet-async was forked off react-helmet by the fantastic React team at the New York Times, and this package has fixed the SSR / async issues from react-helmet. react-helmet-async has 1.6 million weekly downloads and growing, better maintenance than the other choices, and less open issues and a smaller bundle size than react-helmet.

For my team, react-helmet-async is the clear choice. But a Google search didn't mention it until the third page of results! Takeaways:

  1. JS developers often suffer from "just use the first package we can find from NPM - get the job done!" Instead, take the time to research and compare packages.

  2. Get in the habit of questioning: ask yourself why two packages are both maintained if they do roughly the same thing, for example. Ask yourself why two string methods exist, if they accomplish roughly the same thing (maybe one performs better for example). Ask questions.

Discussion

pic
Editor guide