0
# Meta Tag Management
1

2
HTML meta tag generation for PWA compliance, SEO optimization, and social media integration with comprehensive support for mobile web app configuration.
3

4
## Capabilities
5

6
### Meta Tag Generation Function
7

8
Generates comprehensive HTML meta tags for PWA functionality and optimization.
9

10
```typescript { .api }
11
/**
12
 * Generate PWA-compliant meta tags
13
 * @param nuxt - Nuxt instance
14
 * @param pwa - PWA context containing meta configuration
15
 * @param moduleContainer - Nuxt module container for plugins
16
 */
17
function meta(nuxt: any, pwa: PWAContext, moduleContainer: any): void;
18

19
interface MetaOptions extends Partial<ManifestOptions> {
20
  /** Character encoding (default: utf-8) */
21
  charset: string;
22
  /** Viewport meta content */
23
  viewport: string;
24
  /** Enable mobile web app capability */
25
  mobileApp: boolean;
26
  /** Enable iOS web app capability */
27
  mobileAppIOS: boolean;
28
  /** iOS status bar style */
29
  appleStatusBarStyle: string;
30
  /** Include favicon links */
31
  favicon: boolean;
32
  /** Application name */
33
  name: string;
34
  /** Deprecated: use name instead */
35
  title?: string;
36
  /** Author meta tag */
37
  author: string;
38
  /** Description meta tag */
39
  description: string;
40
  /** Theme color for browser UI */
41
  theme_color: string;
42
  /** Language code */
43
  lang: string;
44
  /** Open Graph type */
45
  ogType: string;
46
  /** Open Graph site name */
47
  ogSiteName: string | true;
48
  /** Open Graph title */
49
  ogTitle: string | true;
50
  /** Open Graph description */
51
  ogDescription: string | true;
52
  /** Open Graph host URL */
53
  ogHost: string | undefined;
54
  /** Open Graph image configuration */
55
  ogImage: boolean | string | OgImageObject;
56
  /** Open Graph URL */
57
  ogUrl: string | undefined | true;
58
  /** Twitter card type */
59
  twitterCard: string | undefined;
60
  /** Twitter site handle */
61
  twitterSite: string | undefined;
62
  /** Twitter creator handle */
63
  twitterCreator: string | undefined;
64
  /** Enable native UI optimizations */
65
  nativeUI: boolean;
66
}
67

68
interface OgImageObject {
69
  path?: string;
70
  width?: number;
71
  height?: number;
72
  type?: string;
73
}
74
```
75

76
**Usage Example:**
77

78
```typescript
79
// nuxt.config.ts
80
export default {
81
  pwa: {
82
    meta: {
83
      name: 'My PWA Application',
84
      author: 'John Doe',
85
      description: 'A progressive web application',
86
      theme_color: '#2196f3',
87
      viewport: 'width=device-width, initial-scale=1',
88
      mobileApp: true,
89
      mobileAppIOS: true,
90
      ogType: 'website',
91
      ogImage: '/og-image.png',
92
      twitterCard: 'summary_large_image'
93
    }
94
  }
95
}
96
```
97

98
### Core Meta Tags
99

100
Generates essential meta tags for web applications.
101

102
```typescript { .api }
103
/**
104
 * Generate core HTML meta tags
105
 */
106
interface CoreMetaTags {
107
  /** Character encoding */
108
  charset: string;
109
  /** Viewport configuration */
110
  viewport: string;
111
  /** Application name/title */
112
  name: string;
113
  /** Author information */
114
  author: string;
115
  /** Page/app description */
116
  description: string;
117
  /** Theme color for browser UI */
118
  theme_color: string;
119
}
120
```
121

122
Generated meta tags:
123
```html
124
<meta hid="charset" charset="utf-8">
125
<meta hid="viewport" name="viewport" content="width=device-width, initial-scale=1">
126
<meta hid="description" name="description" content="App description">
127
<meta hid="theme-color" name="theme-color" content="#2196f3">
128
<meta hid="author" name="author" content="Author Name">
129
```
130

131
### Mobile Web App Configuration
132

133
Configures meta tags for mobile web app capabilities.
134

135
```typescript { .api }
136
/**
137
 * Mobile web app meta tag configuration
138
 */
139
interface MobileAppConfig {
140
  /** Enable general mobile web app capability */
141
  mobileApp: boolean;
142
  /** Enable iOS-specific web app capability */
143
  mobileAppIOS: boolean;
144
  /** iOS status bar appearance */
145
  appleStatusBarStyle: 'default' | 'black' | 'black-translucent';
146
}
147
```
148

149
Generated mobile app meta tags:
150
```html
151
<!-- General mobile web app -->
152
<meta hid="mobile-web-app-capable" name="mobile-web-app-capable" content="yes">
153

154
<!-- iOS-specific -->
155
<meta hid="apple-mobile-web-app-capable" name="apple-mobile-web-app-capable" content="yes">
156
<meta hid="apple-mobile-web-app-status-bar-style" name="apple-mobile-web-app-status-bar-style" content="default">
157
<meta hid="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content="App Name">
158
```
159

160
### Icon and Favicon Management
161

162
Handles favicon and touch icon configuration.
163

164
```typescript { .api }
165
/**
166
 * Icon configuration for meta tags
167
 */
168
interface IconMetaConfig {
169
  /** Enable favicon generation */
170
  favicon: boolean;
171
  /** Generated icons from icon module */
172
  icons: Array<{
173
    src: string;
174
    sizes: string;
175
    type: string;
176
  }>;
177
}
178
```
179

180
Generated icon links:
181
```html
182
<!-- Favicon -->
183
<link hid="shortcut-icon" rel="shortcut icon" href="/icons/icon_64x64.png">
184

185
<!-- Apple touch icon -->
186
<link hid="apple-touch-icon" rel="apple-touch-icon" href="/icons/icon_512x512.png" sizes="512x512">
187
```
188

189
### iOS Splash Screens
190

191
Generates iOS splash screen meta tags for different device sizes.
192

193
```typescript { .api }
194
/**
195
 * iOS splash screen configuration
196
 */
197
interface IOSSplashConfig {
198
  /** Enable iOS splash screens */
199
  mobileAppIOS: boolean;
200
  /** Splash screen URLs by device type */
201
  _iosSplash: Record<string, string>;
202
}
203
```
204

205
Generated splash screen links:
206
```html
207
<link href="/icons/splash_iphonex_1125x2436.png" 
208
      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" 
209
      rel="apple-touch-startup-image" 
210
      hid="apple-touch-startup-image-iphonex">
211
```
212

213
### Open Graph Meta Tags
214

215
Comprehensive Open Graph meta tag support for social media sharing.
216

217
```typescript { .api }
218
/**
219
 * Open Graph configuration
220
 */
221
interface OpenGraphConfig {
222
  /** Page type (website, article, etc.) */
223
  ogType: string;
224
  /** Site name */
225
  ogSiteName: string | true;
226
  /** Page title */
227
  ogTitle: string | true;
228
  /** Page description */
229
  ogDescription: string | true;
230
  /** Host URL for absolute URLs */
231
  ogHost: string | undefined;
232
  /** Image configuration */
233
  ogImage: boolean | string | OgImageObject;
234
  /** Canonical URL */
235
  ogUrl: string | undefined | true;
236
}
237
```
238

239
Generated Open Graph tags:
240
```html
241
<meta hid="og:type" name="og:type" property="og:type" content="website">
242
<meta hid="og:title" name="og:title" property="og:title" content="Page Title">
243
<meta hid="og:description" name="og:description" property="og:description" content="Page description">
244
<meta hid="og:image" name="og:image" property="og:image" content="https://example.com/og-image.png">
245
<meta hid="og:url" name="og:url" property="og:url" content="https://example.com">
246
```
247

248
### Twitter Card Meta Tags
249

250
Twitter card configuration for enhanced Twitter sharing.
251

252
```typescript { .api }
253
/**
254
 * Twitter card configuration
255
 */
256
interface TwitterCardConfig {
257
  /** Card type (summary, summary_large_image, etc.) */
258
  twitterCard: string | undefined;
259
  /** Twitter site handle */
260
  twitterSite: string | undefined;
261
  /** Twitter creator handle */
262
  twitterCreator: string | undefined;
263
}
264
```
265

266
Generated Twitter meta tags:
267
```html
268
<meta hid="twitter:card" name="twitter:card" property="twitter:card" content="summary_large_image">
269
<meta hid="twitter:site" name="twitter:site" property="twitter:site" content="@site_handle">
270
<meta hid="twitter:creator" name="twitter:creator" property="twitter:creator" content="@creator_handle">
271
```
272

273
### Viewport Configuration
274

275
Flexible viewport meta tag configuration with native UI support.
276

277
```typescript { .api }
278
/**
279
 * Viewport configuration options
280
 */
281
interface ViewportConfig {
282
  /** Custom viewport content or undefined for auto-generation */
283
  viewport: string | undefined;
284
  /** Enable native UI optimizations */
285
  nativeUI: boolean;
286
}
287
```
288

289
Viewport configurations:
290
```typescript
291
// Standard viewport (default)
292
"width=device-width, initial-scale=1"
293

294
// Native UI optimized viewport
295
"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui"
296
```
297

298
### Runtime Meta Integration
299

300
Provides runtime meta tag merging for SPA applications.
301

302
```typescript { .api }
303
/**
304
 * Runtime meta loading for SPA mode
305
 * @param nuxt - Nuxt instance
306
 */
307
function metaRuntime(nuxt: any): void;
308

309
/**
310
 * Merge meta configurations
311
 * @param to - Target meta configuration
312
 * @param from - Source meta configuration to merge
313
 */
314
function mergeMeta(to: any, from: any): void;
315
```
316

317
**Usage Example:**
318

319
```typescript
320
// Automatic runtime integration
321
// Called internally by meta module
322
metaRuntime(nuxt);
323

324
// Manual meta merging
325
const targetMeta = { meta: [], link: [] };
326
const sourceMeta = { 
327
  meta: [{ name: 'theme-color', content: '#2196f3' }],
328
  link: [{ rel: 'icon', href: '/icon.png' }]
329
};
330
mergeMeta(targetMeta, sourceMeta);
331
```
332

333
The runtime integration:
334
- Loads meta.json file during SPA rendering from `buildDir/pwa/meta.json`
335
- Merges meta tags into Nuxt head configuration using `mergeMeta` utility
336
- Handles deduplication by hid and name attributes to prevent duplicate tags
337
- Provides fallback for client-side rendering when SSR is not available
338
- Hooks into `render:resourcesLoaded` event for proper timing
339

340
### Language and Direction Support
341

342
Configures HTML language and text direction attributes.
343

344
```typescript { .api }
345
/**
346
 * Language and direction configuration
347
 */
348
interface LanguageConfig {
349
  /** Primary language code */
350
  lang: string;
351
  /** Text direction (from manifest) */
352
  dir?: 'ltr' | 'rtl';
353
}
354
```
355

356
Applied to HTML element:
357
```html
358
<html lang="en" dir="ltr">
359
```
360

361
### Default Configuration
362

363
Provides comprehensive defaults with environment variable integration:
364

365
```typescript { .api }
366
const defaults: MetaOptions = {
367
  name: process.env.npm_package_name,
368
  author: process.env.npm_package_author_name,
369
  description: process.env.npm_package_description,
370
  charset: 'utf-8',
371
  viewport: undefined, // Auto-generated based on nativeUI
372
  mobileApp: true,
373
  nativeUI: false,
374
  favicon: true,
375
  mobileAppIOS: undefined, // Auto-set based on nativeUI
376
  appleStatusBarStyle: undefined,
377
  theme_color: undefined,
378
  lang: 'en',
379
  ogType: 'website',
380
  ogSiteName: true,
381
  ogTitle: true,
382
  ogDescription: true,
383
  ogImage: true,
384
  ogHost: undefined,
385
  ogUrl: true,
386
  twitterCard: undefined,
387
  twitterSite: undefined,
388
  twitterCreator: undefined
389
};
390
```