{"id":22025281,"url":"https://github.com/gabrielkoo/json-ld-breadcrumb","last_synced_at":"2026-04-30T18:32:10.310Z","repository":{"id":44061455,"uuid":"214857234","full_name":"gabrielkoo/json-ld-breadcrumb","owner":"gabrielkoo","description":"Generate breadcrumb in JSON-LD format and inject into HTML (P.S. Random afternoon tea project)","archived":false,"fork":false,"pushed_at":"2023-01-04T22:38:14.000Z","size":680,"stargazers_count":1,"open_issues_count":16,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T10:46:17.616Z","etag":null,"topics":["breadcrumb","google-search","json-ld","schema-org","seo","structured-data"],"latest_commit_sha":null,"homepage":"https://gabrielkoo.github.io/json-ld-breadcrumb/","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/gabrielkoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-13T16:48:53.000Z","updated_at":"2021-02-05T17:31:57.000Z","dependencies_parsed_at":"2023-02-02T22:30:38.880Z","dependency_job_id":null,"html_url":"https://github.com/gabrielkoo/json-ld-breadcrumb","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gabrielkoo/json-ld-breadcrumb","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrielkoo%2Fjson-ld-breadcrumb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrielkoo%2Fjson-ld-breadcrumb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrielkoo%2Fjson-ld-breadcrumb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrielkoo%2Fjson-ld-breadcrumb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gabrielkoo","download_url":"https://codeload.github.com/gabrielkoo/json-ld-breadcrumb/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabrielkoo%2Fjson-ld-breadcrumb/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32473804,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["breadcrumb","google-search","json-ld","schema-org","seo","structured-data"],"created_at":"2024-11-30T07:15:31.769Z","updated_at":"2026-04-30T18:32:10.290Z","avatar_url":"https://github.com/gabrielkoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# json-ld-breadcrumb\n[![Actions Status](https://github.com/gabrielkoo/json-ld-breadcrumb/workflows/Test/badge.svg)](https://github.com/gabrielkoo/json-ld-breadcrumb/actions)\n\nGenerate breadcrumb in `json-ld` format and inject into HTML\n\nGitHub Page: [https://gabrielkoo.github.io/json-ld-breadcrumb/](https://gabrielkoo.github.io/json-ld-breadcrumb/)\n\n\n## Background\nNowadays SEO is really important for a website. However, sometimes you don't have much access on the building process of the HTML pages, e.g. if you are using (static) website generators that do not come with plugins to auto-generate breadcrumb's `json-ld` data, or if you are using tools like [Webflow](https://webflow.com/).\n\nWhile plugins serving such a purpose are available everywhere for [PHP](https://www.php.net/) / [WordPress](https://wordpress.org/) / JavaScript frameworks like [Gatsby](https://www.gatsbyjs.org/), it seems that no one has made one for vanilla HTML yet.\n\n## How it works\nThis package retrieves the path of the current page by `window.location`, and then injects a script tag with [breadcrumb data as specifid in schema.org](https://schema.org/BreadcrumbList).\n\nGoogle's [documentation on structured data](https://developers.google.com/search/docs/guides/intro-structured-data#structured-data-format) mentions that:\n\n\u003e JavaScript notation embedded in a \\\u003cscript\\\u003e tag in the page head or body. The markup is not interleaved with the user-visible text, which makes nested data items easier to express, such as the Country of a PostalAddress of a MusicVenue of an Event. Also, Google can read JSON-LD data when it is dynamically injected into the page's contents, such as by JavaScript code or embedded widgets in your content management system.\n\nTherefore, it is possible for Google to parse these dynamically injected `json-ld` data.\n\n## Usage\n\nFirst, run `yarn build`. Then the file `json-ld-breadcrumb.min.js` will be available in the `./dist` directory.\n\nEmbed the file `json-ld-breadcrumb.min.js` into your HTML file.\n\n```html\n\u003cscript\u003e\n// Optional: Setup an optional mapping for the breadcrumb names:\nwindow.breadcrumbMap = {\n  'aida-rikako': '逢田梨香子',\n  kawaisa: '可愛さ',\n};\n\u003c/script\u003e\n\u003cscript src=\"/path/to/dist/json-ld-breadcrumb.min.js\"\u003e\u003c/script\u003e\n```\n\nIf above scripts are embedded in say, https://domain.ltd/seiyu-artist/Aida-Rikako/kawaisa, then the breadcrumb should look like this:\n\n```html\n\u003cscript type=\"application/ld+json\"\u003e\n{\n  \"@context\": \"http://schema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"item\": {\n        \"@type\": \"WebPage\",\n        \"@id\": \"https://domain.ltd/seiyu-artist\",\n        \"name\": \"Seiyu Artist\",\n        \"url\": \"https://domain.ltd/seiyu-artist\"\n      }\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"item\": {\n        \"@type\": \"WebPage\",\n        \"@id\": \"https://domain.ltd/seiyu-artist/Aida-Rikako\",\n        \"name\": \"逢田梨香子\",\n        \"url\": \"https://domain.ltd/seiyu-artist/Aida-Rikako\"\n      }\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"item\": {\n        \"@type\": \"WebPage\",\n        \"@id\": \"https://domain.ltd/seiyu-artist/Aida-Rikako/kawaisa\",\n        \"name\": \"可愛さ\"\n      }\n    }\n  ]\n}\n\u003c/script\u003e\n```\n\n## Sample\n\n[https://gabrielkoo.github.io/json-ld-breadcrumb/sample-page](https://gabrielkoo.github.io/json-ld-breadcrumb/sample-page)\n\n\n## Testing\n\n```bash\nyarn test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabrielkoo%2Fjson-ld-breadcrumb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgabrielkoo%2Fjson-ld-breadcrumb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabrielkoo%2Fjson-ld-breadcrumb/lists"}