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

@dendronhq/eleventy-plugin-seo

v0.6.0

Published

Eleventy plugin to generate meta tags for improved SEO.

Downloads

6

Readme

About Eleventy Plugin SEO

An Eleventy plugin to generate meta tags for improved SEO using the Liquid or Nujucks templating engines.

GitHub Actions GitHub Actions code style: prettier Test Coverage Maintainability

I wrote this plugin when moving from Jekyll to Eleventy to get the functionality I previously had with Jekyll SEO Tag.

Features

  • Page title with styling options and pagination.
  • Page description.
  • Canonical URL.
  • Robots meta directive for pagination.
  • Author meta directive.
  • Open Graph markup.
  • Twitter Card markup.
  • Supports Liquid and Nunjucks.

Installation

Available on npm:

npm install eleventy-plugin-seo --save

Add the plugin to .eleventy.js:

const pluginSEO = require("eleventy-plugin-seo");

module.exports =  function(eleventyConfig) {
  eleventyConfig.addPlugin(pluginSEO, require("./src/_data/seo.json"));
};

Usage

Add the following right before </head> in your site's template(s):

Liquid:

{% seo %}

Nunjucks:

{% seo "" %}

Done!

Front Matter

The plugin uses these front matters when available:

---
title:   Some page title
excerpt: Some page excerpt
author:  Jane Doe
image:   foo.jpg
ogtype:  website
---

ogtype defaults to article, set it to website or something more appropriate via front matter where required.

Config

Pass in an object with config options to the plugin:

eleventyConfig.addPlugin(pluginSEO, {
  title: "Foobar Site",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  url: "https://foo.com",
  author: "Jane Doe",
  twitter: "username",
  image: "foo.jpg"
});

Alternatively keep the options in an external file and require it:

eleventyConfig.addPlugin(pluginSEO, require("./src/_data/seo.json"));

title

Uses the title in front matter and by default the site title gets appended to the page title, page title - site title. Page with page number gets appended to the page title when paginated.

See options for customization.

description

Uses front matter excerpt to generate the description. If no excerpt is set for a page it falls back on using the site description in the config.

url

Full URL to the site without trailing slash, https://foo.com.

author

Full name of the site author, Jane Doe. Can be overridden on a per page basis using author in front matter.

twitter

Twitter username for the author of the site. Used when generating the markup for Twitter cards.

image

URL to default image to use if none is set in front matter when creating markup blocks for open graph and Twitter cards.

Options

The behavior of the output can be controlled via an options object that can be passed in with the config.

eleventyConfig.addPlugin(pluginSEO, {
  title: "Foobar Site",
  ...
  options: {
    titleStyle: "minimalistic",
    titleDivider: "|",
    imageWithBaseUrl: true,
    twitterCardType: "summary_large_image"
  }
});

titleStyle

Setting the style to minimalistic removes the appending of the site title to all title strings.

titleDivider

Changes the divider between elements in the title output from - to any custom character or string.

imageWithBaseUrl

Prepends the config url to the image option.

twitterCardType

Card type for Twitter card. Default is summary.

Additional Tags

While adding the seo tag is all that is needed, the plugin defines more tags that it uses internally that can be convenient to use in other places.