{"id":28089091,"url":"https://github.com/lmmmmmm-bb/vite-plugin-open-graph","last_synced_at":"2025-05-13T12:53:42.358Z","repository":{"id":60546994,"uuid":"543677954","full_name":"Lmmmmmm-bb/vite-plugin-open-graph","owner":"Lmmmmmm-bb","description":"Generate Open Graph meta tags with simple configuration.","archived":false,"fork":false,"pushed_at":"2025-04-16T06:55:41.000Z","size":640,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-29T22:24:28.904Z","etag":null,"topics":["metatag","open-graph","open-graph-generator","open-graph-protocol","seo","vite-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Lmmmmmm-bb.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-09-30T15:56:55.000Z","updated_at":"2025-04-16T06:55:43.000Z","dependencies_parsed_at":"2023-10-11T08:14:01.760Z","dependency_job_id":"a5345cc8-d649-42b8-bf11-41578c6f5faf","html_url":"https://github.com/Lmmmmmm-bb/vite-plugin-open-graph","commit_stats":{"total_commits":47,"total_committers":1,"mean_commits":47.0,"dds":0.0,"last_synced_commit":"fae361706f6d5c1f3dfc0748bad3b76edaf0bafc"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lmmmmmm-bb%2Fvite-plugin-open-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lmmmmmm-bb%2Fvite-plugin-open-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lmmmmmm-bb%2Fvite-plugin-open-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lmmmmmm-bb%2Fvite-plugin-open-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lmmmmmm-bb","download_url":"https://codeload.github.com/Lmmmmmm-bb/vite-plugin-open-graph/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948117,"owners_count":21988952,"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":["metatag","open-graph","open-graph-generator","open-graph-protocol","seo","vite-plugin"],"created_at":"2025-05-13T12:53:41.657Z","updated_at":"2025-05-13T12:53:42.339Z","avatar_url":"https://github.com/Lmmmmmm-bb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-plugin-open-graph\r\n\r\n[![GitHub license](https://img.shields.io/github/license/Lmmmmmm-bb/vite-plugin-open-graph)](https://github.com/Lmmmmmm-bb/vite-plugin-open-graph/blob/main/LICENSE)\r\n[![release](https://img.shields.io/github/v/release/Lmmmmmm-bb/vite-plugin-open-graph)](https://github.com/Lmmmmmm-bb/vite-plugin-open-graph/releases)\r\n\r\nGenerate Open Graph meta tags with simple configuration for your Vite app.\r\n\r\n## Features\r\n\r\n- Twitter Card and Facebook support.\r\n- First-class type support.\r\n\r\n## Install\r\n\r\n```bash\r\nnpm i vite-plugin-open-graph -D\r\n```\r\n\r\n```ts\r\nimport { defineConfig } from 'vite';\r\nimport ogPlugin from 'vite-plugin-open-graph';\r\n\r\nexport default defineConfig({\r\n  plugins: [\r\n    ogPlugin({\r\n      // your Open Graph information config\r\n    })\r\n  ],\r\n});\r\n```\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003eExample\u003c/summary\u003e\r\n\r\n```ts\r\nimport type { Options } from 'vite-plugin-open-graph';\r\nimport { defineConfig } from 'vite';\r\nimport ogPlugin from 'vite-plugin-open-graph';\r\n\r\nconst ogOptions: Options = {\r\n  basic: {\r\n    url: 'https://lmmmmmm.me',\r\n    title: '_lmmmmmm',\r\n    type: 'image.png',\r\n    image: 'https://lmmmmmm.me/avatar.png',\r\n    determiner: 'auto',\r\n    description: '_lmmmmmm, Front-end Developer.',\r\n    locale: 'zh_CN',\r\n    localeAlternate: ['fr_FR', 'es_ES'],\r\n    siteName: '_lmmmmmm',\r\n    audio: {\r\n      url: 'audio url',\r\n      secureUrl: 'audio secure url',\r\n      type: 'video.movie',\r\n    },\r\n    video: 'video meta',\r\n  },\r\n  twitter: {\r\n    image: 'https://lmmmmmm.me/avatar.png',\r\n    imageAlt: 'twitter image alt',\r\n    player: 'player',\r\n    playerWidth: 1200,\r\n    playerHeight: 600,\r\n    playerStream: 'player stream',\r\n    app: {\r\n      name: {\r\n        iphone: 'iphone name',\r\n        ipad: 'ipad name',\r\n        googleplay: 'google play name',\r\n      },\r\n      id: {\r\n        iphone: 'iphone url',\r\n        ipad: 'ipad url',\r\n        googleplay: 'google play url',\r\n      },\r\n      url: {\r\n        iphone: 'iphone url',\r\n        ipad: 'ipad url',\r\n        googleplay: 'google play url',\r\n      },\r\n    },\r\n  },\r\n  facebook: {\r\n    appId: 123456,\r\n  },\r\n};\r\n\r\nexport default defineConfig({\r\n  plugins: [ogPlugin(ogOptions)],\r\n});\r\n```\r\n\r\n```html\r\n\u003c!-- this config will generated inside html head tag --\u003e\r\n\u003cmeta property=\"og:url\" content=\"https://lmmmmmm.me\"\u003e\r\n\u003cmeta property=\"og:title\" content=\"_lmmmmmm\"\u003e\r\n\u003cmeta property=\"og:type\" content=\"image.png\"\u003e\r\n\u003cmeta property=\"og:image\" content=\"https://lmmmmmm.me/avatar.png\"\u003e\r\n\u003cmeta property=\"og:determiner\" content=\"auto\"\u003e\r\n\u003cmeta property=\"og:description\" content=\"_lmmmmmm, Front-end Developer.\"\u003e\r\n\u003cmeta property=\"og:locale\" content=\"zh_CN\"\u003e\r\n\u003cmeta property=\"og:locale:alternate\" content=\"fr_FR\"\u003e\r\n\u003cmeta property=\"og:locale:alternate\" content=\"es_ES\"\u003e\r\n\u003cmeta property=\"og:site_name\" content=\"_lmmmmmm\"\u003e\r\n\u003cmeta property=\"og:audio:url\" content=\"audio url\"\u003e\r\n\u003cmeta property=\"og:audio:secure_url\" content=\"audio secure url\"\u003e\r\n\u003cmeta property=\"og:audio:type\" content=\"video.movie\"\u003e\r\n\u003cmeta property=\"og:video\" content=\"video meta\"\u003e\r\n\u003cmeta name=\"twitter:image\" content=\"https://lmmmmmm.me/avatar.png\"\u003e\r\n\u003cmeta name=\"twitter:image:alt\" content=\"twitter image alt\"\u003e\r\n\u003cmeta name=\"twitter:player\" content=\"player\"\u003e\r\n\u003cmeta name=\"twitter:player:width\" content=\"1200\"\u003e\r\n\u003cmeta name=\"twitter:player:height\" content=\"600\"\u003e\r\n\u003cmeta name=\"twitter:player:stream\" content=\"player stream\"\u003e\r\n\u003cmeta name=\"twitter:app:name:iphone\" content=\"iphone name\"\u003e\r\n\u003cmeta name=\"twitter:app:name:ipad\" content=\"ipad name\"\u003e\r\n\u003cmeta name=\"twitter:app:name:googleplay\" content=\"google play name\"\u003e\r\n\u003cmeta name=\"twitter:app:id:iphone\" content=\"iphone url\"\u003e\r\n\u003cmeta name=\"twitter:app:id:ipad\" content=\"ipad url\"\u003e\r\n\u003cmeta name=\"twitter:app:id:googleplay\" content=\"google play url\"\u003e\r\n\u003cmeta name=\"twitter:app:url:iphone\" content=\"iphone url\"\u003e\r\n\u003cmeta name=\"twitter:app:url:ipad\" content=\"ipad url\"\u003e\r\n\u003cmeta name=\"twitter:app:url:googleplay\" content=\"google play url\"\u003e\r\n\u003cmeta name=\"fb:app_id\" content=\"123456\"\u003e\r\n```\r\n\u003c/details\u003e\r\n\r\n## Types\r\n\r\nYou can consult the `.d.ts` file to see more descriptions of the fields when develop.\r\n\r\n```ts\r\n// Base Plugin Config\r\ninterface Options {\r\n  basic?: BasicOptions;\r\n  twitter?: TwitterOptions;\r\n  facebook?: FacebookOptions;\r\n}\r\n\r\ninterface BasicOptions {\r\n  title?: string;\r\n  type?: string;\r\n  image?: string | ImageOptions;\r\n  url?: string;\r\n  description?: string;\r\n  determiner?: 'a' | 'an' | 'the' | 'auto' | '';\r\n  locale?: string;\r\n  localeAlternate?: string[];\r\n  siteName?: string;\r\n  video?: string | VideoOptions;\r\n}\r\n```\r\n\r\n```ts\r\ninterface ImageOptions {\r\n  url?: string;\r\n  secureUrl?: string;\r\n  type?: string;\r\n  width?: number;\r\n  height?: number;\r\n  alt?: string;\r\n}\r\n\r\ntype VideoOptions = Omit\u003cImageOptions, 'alt'\u003e;\r\n```\r\n\r\n```ts\r\n// Twitter Open Graph Options\r\ninterface TwitterOptions {\r\n  card?: 'summary' | 'summary_large_image' | 'app' | 'player';\r\n  site?: string;\r\n  siteId?: string;\r\n  creator?: string;\r\n  creatorId?: string;\r\n  description?: string;\r\n  title?: string;\r\n  image?: string;\r\n  imageAlt?: string;\r\n  player?: string;\r\n  playerWidth?: number;\r\n  playerHeight?: number;\r\n  playerStream?: string;\r\n  app?: {\r\n    name?: {\r\n      iphone?: string;\r\n      ipad?: string;\r\n      googleplay?: string;\r\n    };\r\n    id?: {\r\n      iphone?: string;\r\n      ipad?: string;\r\n      googleplay?: string;\r\n    };\r\n    url?: {\r\n      iphone?: string;\r\n      ipad?: string;\r\n      googleplay?: string;\r\n    };\r\n  };\r\n}\r\n```\r\n\r\n```ts\r\nexport interface FacebookOptions {\r\n  appId: number;\r\n}\r\n```\r\n\r\n## Reference\r\n\r\n- [Open Graph protocol](https://ogp.me/)\r\n- [Open Graph of Twitter Card](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards)\r\n- [Open Graph of Facebook](https://developers.facebook.com/docs/sharing/webmasters/)\r\n\r\n## License\r\n\r\n[**MIT**](./LICENSE) License © 2022 [\\_lmmmmmm](https://github.com/Lmmmmmm-bb)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flmmmmmm-bb%2Fvite-plugin-open-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flmmmmmm-bb%2Fvite-plugin-open-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flmmmmmm-bb%2Fvite-plugin-open-graph/lists"}