Vite Plugin Meta Tags

A Vite plug-in to automatically inject meta tags into your index.html

What this plugin does

All this plugin does is allow you to import a plugin that can automatically inject a bunch of different meta tags into the head element of your index.html. This makes your page easier to crawl for bots and helps with a better SEO score.

Usage

Update your vite.config.js or vite.config.ts and add the following plugin like this:

import { defineConfig } from 'vite';
import { meta } from 'vite-plugin-meta-tags';

export default defineConfig({
	plugins: [
		meta({
			// `title`, `og:title`, `twitter:title`
			title: '', // any string
			// `meta:description`, `og:description`, `twitter:description`
			description: '', // any string
			// `og:url`, `twitter:url`, `twitter:domain`
			url: '', // example value: 'https://google.com'
			// `og:image`, `twitter:image` (also adds `twitter:card`)
			img: '', // path to image relative to your index.html, or a image on a CDN
			// `meta:theme-color`, `meta:msapplication-TileColor`
			color: '', // a hex color
		}),
	]
})

It's also possible to use values from your .env file.

import process from 'process';
import { defineConfig, loadEnv } from 'vite';
import { meta } from 'vite-plugin-meta-tags';

export default defineConfig(function ({ mode }) {
	const env = loadEnv(mode, process.cwd());
	return {
		plugins: [
			meta({
				title: env.TITLE,
				description: env.DESCRIPTION,
				url: env.URL,
				img: env.IMG,
				color: env.COLOR,
			}),
		]
	}
})

FaQ

When I import the plugin and build I get a 'change to a dynamic import()' error

Add "type": "module" to your package.json.