npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

enzyme-react-seo

v0.0.4

Published

Generic Enzyme test suite SEO analyzer for React web applications

Downloads

2

Readme

enzyme-react-seo (Work in Progress)

This generic enzyme test suite helps ensure all your React application page components meet minimum SEO requirements. This is not intended to help with server side rendering or performance, but will help ensure you don't miss content or structure issues that impact how search engines rank your pages.

With React is can be difficult to keep in mind the final DOM of a page. For example duplicate content (even if hidden by CSS), multiple h1 tags per page and missing meta data can easily get into production.

Requirements

Have Enzyme and jest setup.

Install

yarn add --dev enzyme-react-seo

Usage

Inside a test file: examplePage.test.js

import React from 'react';
import SEOAnalyzer from 'enzyme-react-seo';

import ExamplePage from './ExamplePage'

const analyzer = new SEOAnalyzer(ExamplePage, 'examplePage');

describe('ExamplePage SEO tests', () => {
  analyzer.getSEOTestSuite();
});

Features:

  • [x] Limit of 1 <h1> per page
  • [x] keywords: appears in h1
  • [x] alt tags on all img tags
  • [ ] keyword: number of time appears
  • [ ] keyword: appears in h2, h3 (?)
  • [ ] keyword: TFIDF
  • [ ] Outbound links (min and max)
  • [ ] Meta tag information
  • [ ] Duplicate meta tag information
  • [ ] JSON-LD data
  • [ ] Untranslated Text (multi local as prop)
  • [ ] Async script load for page load time article
  • [ ] Breadcrumbs
  • [ ] Avoid onClick() for internal linking (href)
  • [ ] Avoid # routing
  • [ ] Prevent no-index
  • [ ] Duplicate Content

Development

Enable babel

Issue with babel development

  • When using this test suite it was difficult to keep the install simple without transpiling through babel.
  • Therefore a babel config and yarn build command were added.
  • The issue is, on import, projects using babel and importing this library failed due to "Plugin/Preset files are not allowed to export objects, only functions". This a result of this project's dependency on babel-preset-react.
  • A quick hack at the moment has been to disable the babel config in the released package.json.
  • This has been achieved by changing the babel key to babel-off (in package.json).
  • When building or testing locally this babel-off key needs changing to babel
  • Any help here would be appreciated.

Testing 🔎

  • yarn jest

Building 🔨

  • yarn build

Publishing 🚀

  • yarn publish (contact project owner)

PR's 🙂

  • Very welcome :)