{"id":20330356,"url":"https://github.com/sherbyelements/sherby-metadata","last_synced_at":"2025-04-11T21:04:43.451Z","repository":{"id":47593287,"uuid":"100813061","full_name":"SherbyElements/sherby-metadata","owner":"SherbyElements","description":"Manage meta tags for Search Engine Optimization (SEO)","archived":false,"fork":false,"pushed_at":"2021-08-22T23:52:48.000Z","size":169,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T21:04:00.250Z","etag":null,"topics":["description","hacktoberfest","keywords","lit-element","lit-html","meta","meta-tags","metadata","open-graph","seo","sherby","title","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SherbyElements.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-19T18:15:47.000Z","updated_at":"2022-09-07T02:43:46.000Z","dependencies_parsed_at":"2022-09-07T00:40:23.550Z","dependency_job_id":null,"html_url":"https://github.com/SherbyElements/sherby-metadata","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SherbyElements%2Fsherby-metadata","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SherbyElements%2Fsherby-metadata/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SherbyElements%2Fsherby-metadata/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SherbyElements%2Fsherby-metadata/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SherbyElements","download_url":"https://codeload.github.com/SherbyElements/sherby-metadata/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248480437,"owners_count":21110937,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["description","hacktoberfest","keywords","lit-element","lit-html","meta","meta-tags","metadata","open-graph","seo","sherby","title","webcomponents"],"created_at":"2024-11-14T20:15:58.651Z","updated_at":"2025-04-11T21:04:43.412Z","avatar_url":"https://github.com/SherbyElements.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \\\u003csherby-metadata\\\u003e\n\n[![npm](https://img.shields.io/npm/v/@sherby/sherby-metadata?logo=npm)](https://www.npmjs.com/package/@sherby/sherby-metadata)\n[![GitHub](https://img.shields.io/github/v/release/SherbyElements/sherby-metadata?label=GitHub\u0026logo=github\u0026sort=semver)](https://github.com/SherbyElements/sherby-metadata/releases)\n[![webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/SherbyElements/sherby-metadata)\n[![MIT License](https://img.shields.io/npm/l/@sherby/sherby-metadata)](https://github.com/SherbyElements/sherby-metadata/blob/master/LICENSE.md)\n[![Number of downloads](https://img.shields.io/npm/dt/@sherby/sherby-metadata)](https://npm-stat.com/charts.html?package=%40sherby%2Fsherby-metadata)\n[![BundlePhobia](https://img.shields.io/bundlephobia/minzip/@sherby/sherby-metadata)](https://bundlephobia.com/result?p=@sherby/sherby-metadata)\n[![Travis CI](https://travis-ci.org/SherbyElements/sherby-metadata.svg?branch=master)](https://travis-ci.org/SherbyElements/sherby-metadata)\n[![Codecov](https://codecov.io/gh/SherbyElements/sherby-metadata/branch/master/graph/badge.svg)](https://codecov.io/gh/SherbyElements/sherby-metadata)\n[![Codacy](https://api.codacy.com/project/badge/Grade/840f4666b46643ebb15d844527e57bc4)](https://app.codacy.com/gh/SherbyElements/sherby-metadata)\n\n`sherby-metadata` is a **LitElement** used to manage meta tags data for\n_Search Engine Optimization_ (SEO). It will add, update and remove `\u003cmeta\u003e`\nelements to the `\u003chead\u003e` section based on the JSON object passed to it.\n\n## Installation\n\n```bash\nnpm install @sherby/sherby-metadata\n```\n\n## Use\n\nTo use this element, import it in your shell component and add a `sherby-metadata` element\nin your component template.\n\n```html\n\u003csherby-metadata .data=\"${data}\"\u003e\u003c/sherby-metadata\u003e\n\n\u003c!-- Or alternatively if you want to dispatch events: --\u003e\n\u003csherby-metadata\u003e\u003c/sherby-metadata\u003e\n```\n\nTo update the meta tags on your page, you can update the data property in your shell\ncomponent or you can dispatch a `sherby-metadata` event:\n\n```javascript\n// By updating the data property\nthis.data = {\n  description: 'This is the page description',\n  keywords: 'these,are,keywords',\n  title: 'This is the page title',\n};\n\n// By dispatching a custom event\nthis.dispatchEvent(\n  new CustomEvent('sherby-metadata', {\n    detail: {\n      description: 'This is the page description',\n      keywords: 'these,are,keywords',\n      title: 'This is the page title',\n    },\n  }),\n);\n```\n\nThis component support also the [OpenGraph](http://ogp.me/) tags:\n\n```javascript\nthis.data = {\n  'og:description': 'This is the page description',\n  'og:keywords': 'these,are,keywords',\n  'og:title': 'This is the page title',\n};\n```\n\n## Thanks\n\nSpecial thanks to [CaptainCodeman](https://github.com/CaptainCodeman) for his [app-metadata](https://github.com/CaptainCodeman/app-metadata) component that inspired me for this component.\n\n## Development on WSL\n\n```bash\n# To use Chrome on Windows\nexport CHROME_BIN=/mnt/c/Program\\ Files\\ \\(x86\\)/Google/Chrome/Application/chrome.exe\n```\n\n## Publish\n\nIncrement the `version` defined in the `package.json` file and run the command below to publish the module in the\nregistry:\n\n```bash\n# Dry run\nnpm publish --dry-run\n\n# For real (are you really sure?)\nnpm publish\n```\n\n## License\n\nThe [MIT License][1] (MIT)\n\n[1]: https://opensource.org/licenses/MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsherbyelements%2Fsherby-metadata","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsherbyelements%2Fsherby-metadata","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsherbyelements%2Fsherby-metadata/lists"}