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

@captaincodeman/app-metadata

v3.0.0-beta.0

Published

Page meta-tags for SEO and social sharing

Downloads

5

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

captaincodemancaptaincodeman

Keywords

seometadata

Readme

app-metadata

app-metadata is a module to help manage page metadata for Search Engine Optimization (SEO) and social sharing (e.g. Twitter cards, OpenGraph).

It will add and remove <meta> elements in the page <head> section based on the JSON object passed to it. This can update page titles while a use navigates a Single Page Application (SPA) or Progressive Web App (PWA) or set the values to be Server-Side Rendered (e.g. using puppeteer).

Any title key will be used to set the page title. description, image and url keys will set the og:... and twitter:... meta values and any other key will be used directly.

The name attribute is used for the <meta> tag unless the key is for an OpenGraph value in which case the property attribute will be set. i.e.

twitter:image metadata will set og:image metadata will set

Usage

Import updateMetadata and call as required:

import { updateMetadata } from 'app-metadata';

updateMetadata({
    title: 'This is the page title',
    description: 'This is the page description',
    keywords: 'these,are,keywords',
    image: 'https://www.example.com/myimage.jpg',
})

Alternatively, use addMetadataListener to register a listener and raise app-metadata CustomEvent with the metadata in the event detail:

import { addMetadataListener } from 'app-metadata';

addMetadataListener()

// elsewhere ...

this.dispatchEvent(new CustomEvent({
    bubbles: true,
    composed: true,
    detail: {
        title: 'This is the page title',
        description: 'This is the page description',
        keywords: 'these,are,keywords',
        image: 'https://www.example.com/myimage.jpg',
    },
}))

Demonstration

To demonstrate this approach does work for SEO I've created a very simple test site using the polymer-cli and added some content with the meta html headers set for each view using this <app-metadata> element.

Here's the meta data set for the main view:

this.fire('app-metadata', {
    title: 'Why use Agile Project Management?',
    description: 'How Agile Project Management Methodologies help compared to the old Waterfall approach to Project Management',
    keywords: 'scrum, scrum master, agile, training, certification, professional, certified, CSM, PSM'
});

This view has been successfully indexed by Google and appears correctly in the search results:

Example