gbu-accessibility-package 3.11.0 → 3.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +8 -78
  2. package/README-vi.md +151 -149
  3. package/README.md +150 -1
  4. package/cli.js +96 -66
  5. package/lib/fixer.js +1107 -1051
  6. package/package.json +6 -13
package/CHANGELOG.md CHANGED
@@ -5,86 +5,16 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
- ## [3.11.0] - 2025-12-09
8
+ ## [Unreleased]
9
9
 
10
10
  ### Added
11
- - **📊 Full Report Export (Excel)**: New `--full-report` command to generate comprehensive Excel reports
12
- - Runs ALL checks automatically (Meta, Headings, Links, Unused Files, Dead Code, File Size, GTM)
13
- - Creates professional Excel file with multiple sheets:
14
- - 📋 Summary - Overall statistics and totals
15
- - 🏷️ Meta Tags - Open Graph and Twitter Card issues
16
- - 📑 Headings - Heading structure problems
17
- - 🔗 Broken Links - Dead links and missing resources
18
- - 📁 Unused Files - Files not referenced in project
19
- - 💀 Dead Code - Unused CSS/JS code
20
- - 📦 File Size - Files exceeding size thresholds
21
- - 🏷️ GTM - Google Tag Manager validation
22
- - Color-coded severity (❌ Error, ⚠️ Warning, 💎 Recommendation)
23
- - Auto-filters for easy sorting and filtering
24
- - Custom output path with `-o` or `--report-output`
25
-
26
- ### Usage
27
- ```bash
28
- gbu-a11y --full-report ./project # Generate report
29
- gbu-a11y --full-report ./project -o my-report.xlsx # Custom filename
30
- ```
31
-
32
- ### Dependencies
33
- - Added `exceljs` for Excel file generation
34
-
35
- ## [3.10.2] - 2025-12-09
36
-
37
- ### Improved
38
- - **Smarter Partial File Detection**: Enhanced detection of HTML partial/include files using 3 methods:
39
- 1. Files containing `<!--#include virtual="...">` or `<!--#include file="...">`
40
- 2. Files in `/inc/` directory (common pattern for partials)
41
- 3. Files without `<!DOCTYPE html>` or `<html>` tag (HTML fragments)
42
- - Partial files are automatically skipped during meta tag analysis
43
- - Each detection method provides a specific skip reason in the summary
44
-
45
- ## [3.10.1] - 2025-12-09
46
-
47
- ### Changed
48
- - **SSI Include Files Ignored**: Files containing `<!--#include virtual="...">` are now skipped during meta tag analysis
49
- - **Recommendations vs Warnings**: Separated optional improvements from actual warnings:
50
- - `og:image:width`, `og:image:height`, `og:image:alt` → Now shown as 💎 recommendations
51
- - `Canonical URL` → Now shown as 💎 recommendation
52
- - These are optional best practices, not errors or warnings
53
-
54
- ### Improved
55
- - **Summary Statistics**: Now shows count of skipped files and recommendations separately
56
- - **Output Clarity**: Clear distinction between ❌ issues, ⚠️ warnings, and 💎 recommendations
57
-
58
- ## [3.10.0] - 2025-12-09
59
-
60
- ### Added
61
- - **Meta Tags & Open Graph Protocol Validation**: New `--meta-check` command for comprehensive meta tag validation
62
- - **4 Required OG Tags Check**: Validates presence of og:title, og:type, og:image, og:url
63
- - **Syntax Validation**: Detects common mistake of using `name=""` instead of `property=""` for OG tags
64
- - **Typo Detection**: Detects common typos in property names (og:sitename → og:site_name, og:imge → og:image, etc.)
65
- - **Levenshtein Distance Algorithm**: Smart typo detection for unknown OG properties
66
- - **Twitter Card Validation**: Checks twitter:card and related tags with valid value validation
67
- - **Basic Meta Tags Check**: Validates description, viewport, canonical URL
68
- - **Content Quality Check**: Title/description length, URL format, empty values
69
- - **og:image Best Practices**: Suggests og:image:width, og:image:height, og:image:alt
70
- - **Detailed Suggestions**: Provides specific fix recommendations for each issue
71
- - **Summary Statistics**: Shows files with OG, issues count, and warnings count
72
-
73
- - **Auto-Fix Meta Tags**: New `--meta-fix` command for automatic fixing
74
- - **Typo Auto-Fix**: Automatically corrects misspelled OG/Twitter property names
75
- - **Syntax Auto-Fix**: Corrects `name=""` to `property=""` for OG tags
76
- - **Dry-Run Support**: Preview changes with `--meta-fix --dry-run`
77
- - **Backup Support**: Create backups with `--meta-fix --backup`
78
-
79
- ### Changed
80
- - **CLI Simplified**: Removed redundant aliases (`--og-check`, `--check-meta`, `--open-graph`), now using only `--meta-check`
81
- - **Clear Separation**: `--meta-check` for checking only, `--meta-fix` for auto-fixing
82
-
83
- ### Technical
84
- - **New Methods**: `checkMetaTags()`, `analyzeMetaTags()`, `parseMetaTagAttributes()`, `fixMetaTags()`, `findClosestOGProperty()`, `levenshteinDistance()`
85
- - **Test Files**: Added `demo/meta-tags-test.html` and `demo/meta-tags-incomplete.html` for testing
86
- - **npm Scripts**: Added `meta-check` and `meta-fix` scripts
11
+ - **Unused Files List Workflow**:
12
+ - Added `--unused-files-list` to export detected unused files into `unused-files-list.txt`
13
+ - Added `--delete-unused-files` to delete files listed in `unused-files-list.txt`
14
+ - Added `--list-file` to customize the list file path inside the target directory
87
15
 
16
+ ### Fixed
17
+ - **Unused file reference matching**: `--unused-files` now ignores query strings and hash fragments like `style.css?hash` and `bundle.js#v1`
88
18
 
89
19
  ## [3.8.3] - 2025-10-06
90
20
 
@@ -346,4 +276,4 @@ gbu-a11y --full-report ./project -o my-report.xlsx # Custom filename
346
276
 
347
277
  ---
348
278
 
349
- For more details about any release, see the [GitHub Releases](https://github.com/example/gbu-accessibility-tool/releases) page.
279
+ For more details about any release, see the [GitHub Releases](https://github.com/example/gbu-accessibility-tool/releases) page.
package/README-vi.md CHANGED
@@ -26,7 +26,8 @@ gbu-a11y --forms-only # Sửa form labels + dọn dẹpio/js/gbu-accessib
26
26
  - 🔍 **Broken Links Detection** - Phát hiện liên kết external bị hỏng
27
27
  - 📁 **404 Resources Detection** - Phát hiện tài nguyên local bị thiếu (hình ảnh, CSS, JS, v.v.)
28
28
  - 🏷️ **Kiểm tra Google Tag Manager** - Xác thực cài đặt GTM (script + noscript)
29
- - 🏷️ **Kiểm tra Meta Tags & Open Graph** - Xác thực meta tags theo chuẩn Open Graph Protocol
29
+ - 🏷️ **Xác thực Meta Tags** - Kiểm tra lỗi chính tả và cú pháp trong meta tags và Open Graph Protocol
30
+ - ✏️ **Tự động sửa Meta Tags** - Tự động sửa lỗi chính tả trong tên property và giá trị content
30
31
  - 🗂️ **Unused Files Detection** - Tìm file không được tham chiếu ở đâu trong dự án
31
32
  - ☠️ **Dead Code Analysis** - Phát hiện CSS rules và JavaScript functions không sử dụng
32
33
  - 📏 **File Size Analysis** - Kiểm tra dung lượng file và đề xuất tối ưu hóa
@@ -165,11 +166,16 @@ Chế độ sửa lỗi:
165
166
  --broken-links Chỉ kiểm tra liên kết external bị hỏng (không tự động sửa)
166
167
  --404-resources Chỉ kiểm tra tài nguyên local bị thiếu (không tự động sửa)
167
168
  --gtm-check Kiểm tra cài đặt Google Tag Manager (không tự động sửa)
169
+ --check-meta, --meta-check Kiểm tra meta tags lỗi chính tả và cú pháp (không tự động sửa)
170
+ --fix-meta, --meta-fix Tự động sửa lỗi chính tả và cú pháp meta tags
171
+ --full-report Tạo báo cáo Excel toàn diện (tất cả kiểm tra)
172
+ -o, --output <file> Đường dẫn output cho báo cáo Excel (dùng với --full-report)
168
173
  --unused-files Kiểm tra file không sử dụng trong dự án
174
+ --unused-files-list Tạo file unused-files-list.txt từ danh sách file dư thừa
175
+ --delete-unused-files Xóa toàn bộ file có trong unused-files-list.txt
176
+ --list-file <file> Tùy chỉnh tên/đường dẫn file list trong thư mục target
169
177
  --dead-code Kiểm tra dead code trong CSS và JavaScript
170
178
  --file-size, --size-check Kiểm tra dung lượng file và đề xuất tối ưu hóa
171
- --meta-check Kiểm tra Meta Tags và Open Graph Protocol
172
- --meta-fix Tự động sửa lỗi chính tả và cú pháp OG/Twitter
173
179
  --cleanup-only Chỉ dọn dẹp role attributes trùng lặp
174
180
 
175
181
  Tùy chọn Enhanced Alt:
@@ -205,11 +211,17 @@ gbu-a11y --links-check # Kiểm tra liên kết bị hỏng và tài nguy
205
211
  gbu-a11y --broken-links # Chỉ kiểm tra liên kết external bị hỏng + dọn dẹp
206
212
  gbu-a11y --404-resources # Chỉ kiểm tra tài nguyên local bị thiếu + dọn dẹp
207
213
  gbu-a11y --gtm-check # Kiểm tra cài đặt Google Tag Manager
214
+ gbu-a11y --check-meta # Kiểm tra meta tags lỗi chính tả và cú pháp
215
+ gbu-a11y --fix-meta # Tự động sửa lỗi chính tả meta tags
216
+ gbu-a11y --fix-meta --dry-run # Xem trước sửa lỗi meta tags
217
+ gbu-a11y --full-report # Tạo báo cáo Excel toàn diện
218
+ gbu-a11y --full-report -o report.xlsx # Đường dẫn output tùy chỉnh
208
219
  gbu-a11y --unused-files # Kiểm tra file không sử dụng trong dự án
220
+ gbu-a11y --unused-files-list # Tạo ./unused-files-list.txt
221
+ gbu-a11y --delete-unused-files # Xóa file theo ./unused-files-list.txt
222
+ gbu-a11y --delete-unused-files --dry-run # Xem trước các file sẽ bị xóa
209
223
  gbu-a11y --dead-code # Kiểm tra dead CSS và JavaScript code
210
224
  gbu-a11y --file-size # Kiểm tra dung lượng file và đề xuất tối ưu hóa
211
- gbu-a11y --meta-check # Kiểm tra Meta Tags và Open Graph Protocol
212
- gbu-a11y --meta-fix # Tự động sửa lỗi chính tả và cú pháp OG/Twitter
213
225
 
214
226
  # Tính năng enhanced alt attribute
215
227
  gbu-a11y --enhanced-alt # Chế độ enhanced cơ bản
@@ -387,158 +399,28 @@ await fixer.checkFileSizes('./src');
387
399
  - Kiểm tra tính nhất quán của container ID
388
400
  - Xác thực vị trí đặt đúng của cả hai đoạn mã
389
401
  - Báo cáo: cài đặt hoàn chỉnh, thiếu thành phần, vấn đề vị trí
402
+ - **Xác thực Meta Tags** → Kiểm tra lỗi chính tả và cú pháp trong meta tags
403
+ - Phát hiện lỗi chính tả property name (og:titel → og:title, discription → description)
404
+ - Phát hiện lỗi chính tả content value (websit → website, ja_jp → ja_JP)
405
+ - Kiểm tra lỗi cú pháp (thiếu content, giá trị rỗng)
406
+ - Hỗ trợ Open Graph Protocol và Twitter Card
407
+ - 40+ pattern lỗi chính tả phổ biến trong dictionary
408
+ - **Tự động sửa Meta Tags** → Tự động sửa lỗi meta tags
409
+ - Sửa lỗi chính tả property name chỉ trong một click
410
+ - Sửa lỗi chính tả content value
411
+ - Xử lý nhiều lỗi trên cùng một tag
412
+ - Chế độ dry-run để xem trước
413
+ - Hỗ trợ backup để an toàn
390
414
  - **Phân tích dung lượng file** → Kiểm tra kích thước file và đề xuất tối ưu hóa
391
415
  - Phát hiện file lớn vượt ngưỡng khuyến nghị
392
416
  - Đề xuất tối ưu hóa theo từng loại file (hình ảnh, CSS, JS, v.v.)
393
417
  - Thống kê dung lượng theo loại file
394
418
  - Top 10 file có dung lượng lớn nhất
395
- - **Kiểm tra Meta Tags & Open Graph** → Xác thực meta tags theo chuẩn OGP
396
- - Kiểm tra 4 thẻ OG bắt buộc: og:title, og:type, og:image, og:url
397
- - Phát hiện sai cú pháp (dùng name="" thay vì property="")
398
- - **Phát hiện lỗi chính tả** trong tên property (vd: og:sitename → og:site_name)
399
- - Kiểm tra Twitter Card tags
400
- - Xác thực meta description, viewport, canonical URL
401
- - Đề xuất cải thiện SEO và accessibility
402
- - **Auto-fix** lỗi chính tả và cú pháp với `--meta-fix`
403
-
404
- ## 🏷️ Xác thực Meta Tags và Open Graph Protocol
405
-
406
- Tính năng `--meta-check` kiểm tra meta tags theo chuẩn Open Graph Protocol.
407
- Tính năng `--meta-fix` tự động sửa lỗi chính tả và cú pháp OG/Twitter.
408
-
409
- ### Những gì được kiểm tra
410
-
411
- 1. **4 thẻ OG bắt buộc**: og:title, og:type, og:image, og:url
412
- 2. **Cú pháp đúng**: OG tags phải dùng `property=""` thay vì `name=""`
413
- 3. **Lỗi chính tả**: Phát hiện typo trong tên property (og:sitename, og:imge, twitter:tittle...)
414
- 4. **Twitter Card**: Kiểm tra twitter:card và các thẻ liên quan
415
- 5. **Meta cơ bản**: description, viewport, canonical URL
416
- 6. **Chất lượng nội dung**: Độ dài, giá trị hợp lệ, URL format
417
-
418
- ### Cách sử dụng
419
-
420
- ```bash
421
- # Kiểm tra meta tags trong toàn bộ dự án
422
- gbu-a11y --meta-check
423
-
424
- # Kiểm tra thư mục cụ thể
425
- gbu-a11y --meta-check ./public
426
-
427
- # Tự động sửa lỗi chính tả và cú pháp OG/Twitter
428
- gbu-a11y --meta-fix
429
-
430
- # Xem trước trước khi sửa
431
- gbu-a11y --meta-fix --dry-run
432
- ```
433
-
434
- ### Ví dụ kết quả
435
-
436
- ```
437
- 🏷️ Đang kiểm tra Meta Tags và Open Graph Protocol...
438
-
439
- 📁 index.html:
440
- ✅ Open Graph Protocol: Đã cài đặt
441
- ✅ og:title: Trang chủ - GBU Tool
442
- ✅ og:type: website
443
- ✅ og:image: https://example.com/og-image.jpg
444
- ✅ og:url: https://example.com/
445
- ✅ Twitter Card: Đã cài đặt
446
-
447
- 📁 about.html:
448
- ⚠️ Open Graph Protocol: Chưa cài đặt
449
- ❌ Thiếu thẻ OG bắt buộc: Thiếu og:title
450
- 💡 Thêm <meta property="og:title" content="...">
451
- ❌ Sai cú pháp OG: og:image sử dụng name="" thay vì property=""
452
- 💡 Thay đổi từ <meta name="og:image" ...> thành <meta property="og:image" ...>
453
- ⚠️ Thiếu Meta Description: Không tìm thấy thẻ meta description
454
- 💡 Thêm <meta name="description" content="Mô tả trang web của bạn">
455
-
456
- 📊 Tóm tắt: Đã phân tích 2 file
457
- ✅ File có Open Graph: 1
458
- ❌ File có lỗi: 1 (3 vấn đề)
459
- ⚠️ File có cảnh báo: 1 (1 cảnh báo)
460
- 💡 Open Graph Protocol cần có 4 thẻ bắt buộc: og:title, og:type, og:image, og:url
461
- ```
462
-
463
- ### Yêu cầu Open Graph Protocol
464
-
465
- Để cài đặt OG tags đúng cách, mỗi trang cần có:
466
-
467
- ```html
468
- <head>
469
- <!-- Meta cơ bản -->
470
- <meta charset="UTF-8">
471
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
472
- <meta name="description" content="Mô tả ngắn gọn về trang">
473
- <title>Tiêu đề trang</title>
474
-
475
- <!-- Open Graph Protocol (bắt buộc) -->
476
- <meta property="og:title" content="Tiêu đề trang">
477
- <meta property="og:type" content="website">
478
- <meta property="og:image" content="https://example.com/images/og-image.jpg">
479
- <meta property="og:url" content="https://example.com/your-page">
480
-
481
- <!-- Open Graph Protocol (khuyến nghị) -->
482
- <meta property="og:description" content="Mô tả chi tiết">
483
- <meta property="og:site_name" content="Tên website">
484
- <meta property="og:locale" content="vi_VN">
485
- <meta property="og:image:width" content="1200">
486
- <meta property="og:image:height" content="630">
487
- <meta property="og:image:alt" content="Mô tả hình ảnh">
488
-
489
- <!-- Twitter Card -->
490
- <meta name="twitter:card" content="summary_large_image">
491
- <meta name="twitter:title" content="Tiêu đề trang">
492
- <meta name="twitter:description" content="Mô tả">
493
- <meta name="twitter:image" content="https://example.com/images/twitter.jpg">
494
-
495
- <!-- Canonical URL -->
496
- <link rel="canonical" href="https://example.com/your-page">
497
- </head>
498
- ```
499
-
500
- ### Các vấn đề thường gặp được phát hiện
501
-
502
- - ❌ **Thiếu thẻ OG bắt buộc**: og:title, og:type, og:image, og:url
503
- - ❌ **Sai cú pháp OG**: Dùng `name="og:..."` thay vì `property="og:..."` (✅ tự động sửa)
504
- - ❌ **Lỗi chính tả OG/Twitter**: og:sitename, og:imge, twitter:tittle... (✅ tự động sửa)
505
- - ❌ **Giá trị rỗng**: Thẻ meta có content rỗng
506
- - ❌ **og:url không hợp lệ**: URL không bắt đầu bằng http:// hoặc https://
507
- - ❌ **twitter:card không hợp lệ**: Giá trị không phải summary, summary_large_image, app, player
508
- - ⚠️ **og:image không phải URL tuyệt đối**: Nên dùng URL đầy đủ
509
- - ⚠️ **Thiếu kích thước og:image**: Chưa khai báo og:image:width, og:image:height
510
- - ⚠️ **Thiếu og:image:alt**: Chưa có mô tả accessibility cho hình ảnh OG
511
- - ⚠️ **Title/Description quá dài/ngắn**: Ảnh hưởng đến SEO
512
- - ⚠️ **Thiếu Canonical URL**: Link rel="canonical" chưa được khai báo
513
- - ⚠️ **Thiếu Twitter Card**: Đã có OG nhưng chưa có Twitter Card
514
-
515
- ### Lỗi chính tả được phát hiện và tự động sửa
516
-
517
- Công cụ sử dụng **thuật toán Levenshtein Distance** để phát hiện **TẤT CẢ** các lỗi chính tả, không chỉ các lỗi đã được định nghĩa sẵn.
518
-
519
- #### Cách hoạt động:
520
- 1. **Danh sách lỗi phổ biến** - Phát hiện nhanh các lỗi đã biết (og:sitename, og:imge...)
521
- 2. **Thuật toán Levenshtein** - So sánh với danh sách property hợp lệ và tìm gợi ý gần nhất
522
- 3. **Ngưỡng động** - Dựa trên độ dài property để quyết định có phải typo hay không
523
-
524
- #### Ví dụ các lỗi được phát hiện tự động:
525
-
526
- | Lỗi chính tả | Sửa thành | Phương pháp |
527
- |--------------|-----------|-------------|
528
- | og:sitename | og:site_name | Danh sách cố định |
529
- | og:imge | og:image | Danh sách cố định |
530
- | og:ttle | og:title | Levenshtein (distance=1) |
531
- | og:descritpion | og:description | Levenshtein (distance=2) |
532
- | og:locle | og:locale | Levenshtein (distance=1) |
533
- | og:image:wdth | og:image:width | Levenshtein (distance=1) |
534
- | twitter:descrption | twitter:description | Levenshtein (distance=1) |
535
- | twitter:imag | twitter:image | Levenshtein (distance=1) |
536
- | name="og:..." | property="og:..." | Sai cú pháp |
537
-
538
- 💡 **Mọi property OG/Twitter không hợp lệ đều được kiểm tra và đề xuất sửa!**
539
419
 
540
420
  ## 🏷️ Xác thực Google Tag Manager
541
421
 
422
+ Tính năng `--gtm-check` xác thực cài đặt Google Tag Manager đúng cách trong toàn bộ dự án của bạn.
423
+
542
424
  ### Những gì được kiểm tra
543
425
 
544
426
  1. **Script trong `<head>`**: Xác minh GTM script có mặt trước thẻ đóng `</head>`
@@ -612,6 +494,126 @@ gbu-a11y --google-tag-manager
612
494
  </body>
613
495
  ```
614
496
 
497
+ ## 🏷️ Xác thực và Tự động sửa Meta Tags
498
+
499
+ Tính năng `--check-meta` và `--fix-meta` giúp bạn duy trì meta tags và Open Graph Protocol chính xác.
500
+
501
+ ### Những gì được kiểm tra
502
+
503
+ 1. **Lỗi chính tả Property Name**: Phát hiện lỗi chính tả phổ biến trong meta tag properties
504
+ - `og:titel` → `og:title`
505
+ - `og:descripion` → `og:description`
506
+ - `og:sitename` → `og:site_name`
507
+ - `discription` → `description`
508
+ - Và 40+ lỗi chính tả phổ biến khác
509
+
510
+ 2. **Lỗi chính tả Content Value**: Sửa giá trị không chính xác
511
+ - `websit` → `website` (og:type)
512
+ - `ja_jp` → `ja_JP` (og:locale)
513
+ - `summary_larg_image` → `summary_large_image` (twitter:card)
514
+
515
+ 3. **Lỗi cú pháp**: Xác định vấn đề cấu trúc
516
+ - Thiếu thuộc tính content
517
+ - Giá trị content rỗng
518
+ - Lẫn lộn kiểu dấu ngoặc
519
+
520
+ ### Cách sử dụng
521
+
522
+ ```bash
523
+ # Kiểm tra lỗi meta tags
524
+ gbu-a11y --check-meta
525
+
526
+ # Kiểm tra thư mục cụ thể
527
+ gbu-a11y --check-meta ./public
528
+
529
+ # Tự động sửa lỗi
530
+ gbu-a11y --fix-meta
531
+
532
+ # Xem trước sửa lỗi mà không áp dụng
533
+ gbu-a11y --fix-meta --dry-run
534
+
535
+ # Sửa với backup
536
+ gbu-a11y --fix-meta --backup
537
+
538
+ # Các lệnh thay thế
539
+ gbu-a11y --meta-check
540
+ gbu-a11y --meta-fix
541
+ ```
542
+
543
+ ### Ví dụ Output
544
+
545
+ **Chế độ kiểm tra (`--check-meta`)**:
546
+ ```
547
+ 🔍 Checking meta tags for typos and syntax errors...
548
+
549
+ ❌ public/index.html
550
+ 1. Lỗi chính tả property: "og:titel" → "og:title"
551
+ 2. Lỗi chính tả property: "og:descripion" → "og:description"
552
+ 3. Lỗi giá trị og:type: "websit" → "website"
553
+ 4. Lỗi chính tả property: "twitter:car" → "twitter:card"
554
+
555
+ ✅ public/about.html - No errors
556
+
557
+ 📊 Summary:
558
+ Total files checked: 2
559
+ Files with errors: 1
560
+ Total errors found: 4
561
+ Files OK: 1
562
+
563
+ 💡 Sử dụng --meta-fix để tự động sửa các lỗi này
564
+ ```
565
+
566
+ **Chế độ sửa lỗi (`--fix-meta`)**:
567
+ ```
568
+ 🔧 Fixing meta tag typos and syntax errors...
569
+
570
+ 🔧 Fixing: public/index.html
571
+ ✓ Fixed property: og:titel → og:title
572
+ ✓ Fixed property: og:descripion → og:description
573
+ ✓ Fixed og:type value: websit → website
574
+ ✓ Fixed property: twitter:car → twitter:card
575
+ 💾 Saved 4 fix(es) to public/index.html
576
+
577
+ ✅ public/about.html - No errors to fix
578
+
579
+ 📊 Summary:
580
+ Total files checked: 2
581
+ Files fixed: 1
582
+ Total fixes applied: 4
583
+ ```
584
+
585
+ ### Các pattern lỗi chính tả được hỗ trợ
586
+
587
+ **Open Graph Properties**:
588
+ - `og:titel`, `og:tittle`, `og:tilte` → `og:title`
589
+ - `og:descripion`, `og:discription`, `og:desciption` → `og:description`
590
+ - `og:imge`, `og:iamge` → `og:image`
591
+ - `og:typ`, `og:tipe` → `og:type`
592
+ - `og:sitename`, `og:sit_name` → `og:site_name`
593
+ - `og:local` → `og:locale`
594
+
595
+ **Twitter Card Properties**:
596
+ - `twitter:car` → `twitter:card`
597
+ - `twitter:titel`, `twitter:tittle` → `twitter:title`
598
+ - `twitter:descripion`, `twitter:discription` → `twitter:description`
599
+ - `twitter:imge` → `twitter:image`
600
+ - `twitter:creater` → `twitter:creator`
601
+
602
+ **Meta Tag Properties**:
603
+ - `discription`, `descripion`, `desciption` → `description`
604
+ - `viewpor`, `veiwport` → `viewport`
605
+ - `keyword` → `keywords`
606
+ - `auther`, `autor` → `author`
607
+
608
+ **Content Values**:
609
+ - `websit`, `web-site`, `artical`, `aticle` (og:type)
610
+ - `ja_jp` → `ja_JP`, `en_us` → `en_US`, `vi_vn` → `vi_VN` (og:locale)
611
+ - `summary_larg_image`, `summay` (twitter:card)
612
+
613
+ <!-- Nội dung trang của bạn -->
614
+ </body>
615
+ ```
616
+
615
617
  ### Các vấn đề thường gặp được phát hiện
616
618
 
617
619
  - ❌ **Thiếu Script**: Không tìm thấy GTM script trong `<head>`
package/README.md CHANGED
@@ -23,6 +23,8 @@
23
23
  - 🔍 **Broken Links Detection** - Detect broken external links
24
24
  - 📁 **404 Resources Detection** - Detect missing local resources (images, CSS, JS, etc.)
25
25
  - 🏷️ **Google Tag Manager Check** - Validate GTM installation (script + noscript)
26
+ - 🏷️ **Meta Tags Validation** - Check for typos and syntax errors in meta tags and Open Graph Protocol
27
+ - ✏️ **Meta Tags Auto-Fix** - Automatically fix typos in meta property names and content values
26
28
  - 🗂️ **Unused Files Detection** - Find files not referenced anywhere in the project
27
29
  - ☠️ **Dead Code Analysis** - Detect unused CSS rules and JavaScript functions
28
30
  - 📏 **File Size Analysis** - Check file sizes and suggest optimizations
@@ -159,7 +161,14 @@ Fix Modes:
159
161
  --broken-links Check for broken external links only (no auto-fix)
160
162
  --404-resources Check for missing local resources only (no auto-fix)
161
163
  --gtm-check Check Google Tag Manager installation (no auto-fix)
164
+ --check-meta, --meta-check Check meta tags for typos and syntax errors (no auto-fix)
165
+ --fix-meta, --meta-fix Auto-fix meta tag typos and syntax errors
166
+ --full-report Generate comprehensive Excel report (all checks)
167
+ -o, --output <file> Output path for Excel report (use with --full-report)
162
168
  --unused-files Check for unused files in project
169
+ --unused-files-list Create unused-files-list.txt from detected unused files
170
+ --delete-unused-files Delete all files listed in unused-files-list.txt
171
+ --list-file <file> Custom list file name/path inside target directory
163
172
  --dead-code Check for dead code in CSS and JavaScript
164
173
  --file-size, --size-check Check file sizes and suggest optimizations
165
174
  --cleanup-only Only cleanup duplicate role attributes
@@ -198,7 +207,15 @@ gbu-a11y --links-check # Check broken links and missing resources + cleanu
198
207
  gbu-a11y --broken-links # Check broken external links only + cleanup
199
208
  gbu-a11y --404-resources # Check missing local resources only + cleanup
200
209
  gbu-a11y --gtm-check # Check Google Tag Manager installation
210
+ gbu-a11y --check-meta # Check meta tags for typos and syntax errors
211
+ gbu-a11y --fix-meta # Auto-fix meta tag typos
212
+ gbu-a11y --fix-meta --dry-run # Preview meta tag fixes
213
+ gbu-a11y --full-report # Generate comprehensive Excel report
214
+ gbu-a11y --full-report -o report.xlsx # Custom output path
201
215
  gbu-a11y --unused-files # Check for unused files in project
216
+ gbu-a11y --unused-files-list # Create ./unused-files-list.txt
217
+ gbu-a11y --delete-unused-files # Delete files listed in ./unused-files-list.txt
218
+ gbu-a11y --delete-unused-files --dry-run # Preview files that would be deleted
202
219
  gbu-a11y --dead-code # Check for dead CSS and JavaScript code
203
220
  gbu-a11y --file-size # Check file sizes and suggest optimizations
204
221
 
@@ -366,6 +383,18 @@ await fixer.checkFileSizes('./src');
366
383
  - Check container ID consistency
367
384
  - Validate proper positioning of both snippets
368
385
  - Reports: complete installation, missing components, position issues
386
+ - **Meta Tags Validation** → Check typos and syntax errors in meta tags
387
+ - Detect property name typos (og:titel → og:title, discription → description)
388
+ - Detect content value typos (websit → website, ja_jp → ja_JP)
389
+ - Check syntax errors (missing content, empty values)
390
+ - Support Open Graph Protocol and Twitter Card
391
+ - 40+ common typo patterns in dictionary
392
+ - **Meta Tags Auto-Fix** → Automatically fix meta tag errors
393
+ - Fix property name typos in one click
394
+ - Fix content value typos
395
+ - Handle multiple errors on same tag
396
+ - Dry-run mode for preview
397
+ - Backup support for safety
369
398
  - **File Size Analysis** → Check file sizes and suggest optimizations
370
399
  - Detect large files exceeding recommended thresholds
371
400
  - Type-specific optimization suggestions (images, CSS, JS, etc.)
@@ -449,6 +478,126 @@ For proper GTM installation, each page should have:
449
478
  </body>
450
479
  ```
451
480
 
481
+ ## 🏷️ Meta Tags Validation & Auto-Fix
482
+
483
+ The `--check-meta` and `--fix-meta` features help you maintain correct meta tags and Open Graph Protocol implementation.
484
+
485
+ ### What It Checks
486
+
487
+ 1. **Property Name Typos**: Detects common misspellings in meta tag properties
488
+ - `og:titel` → `og:title`
489
+ - `og:descripion` → `og:description`
490
+ - `og:sitename` → `og:site_name`
491
+ - `discription` → `description`
492
+ - And 40+ more common typos
493
+
494
+ 2. **Content Value Typos**: Fixes incorrect values
495
+ - `websit` → `website` (og:type)
496
+ - `ja_jp` → `ja_JP` (og:locale)
497
+ - `summary_larg_image` → `summary_large_image` (twitter:card)
498
+
499
+ 3. **Syntax Errors**: Identifies structural issues
500
+ - Missing content attributes
501
+ - Empty content values
502
+ - Mixed quote styles
503
+
504
+ ### Usage
505
+
506
+ ```bash
507
+ # Check for meta tag errors
508
+ gbu-a11y --check-meta
509
+
510
+ # Check specific directory
511
+ gbu-a11y --check-meta ./public
512
+
513
+ # Auto-fix errors
514
+ gbu-a11y --fix-meta
515
+
516
+ # Preview fixes without applying
517
+ gbu-a11y --fix-meta --dry-run
518
+
519
+ # Fix with backup
520
+ gbu-a11y --fix-meta --backup
521
+
522
+ # Alternative commands
523
+ gbu-a11y --meta-check
524
+ gbu-a11y --meta-fix
525
+ ```
526
+
527
+ ### Example Output
528
+
529
+ **Check Mode (`--check-meta`)**:
530
+ ```
531
+ 🔍 Checking meta tags for typos and syntax errors...
532
+
533
+ ❌ public/index.html
534
+ 1. Lỗi chính tả property: "og:titel" → "og:title"
535
+ 2. Lỗi chính tả property: "og:descripion" → "og:description"
536
+ 3. Lỗi giá trị og:type: "websit" → "website"
537
+ 4. Lỗi chính tả property: "twitter:car" → "twitter:card"
538
+
539
+ ✅ public/about.html - No errors
540
+
541
+ 📊 Summary:
542
+ Total files checked: 2
543
+ Files with errors: 1
544
+ Total errors found: 4
545
+ Files OK: 1
546
+
547
+ 💡 Sử dụng --meta-fix để tự động sửa các lỗi này
548
+ ```
549
+
550
+ **Fix Mode (`--fix-meta`)**:
551
+ ```
552
+ 🔧 Fixing meta tag typos and syntax errors...
553
+
554
+ 🔧 Fixing: public/index.html
555
+ ✓ Fixed property: og:titel → og:title
556
+ ✓ Fixed property: og:descripion → og:description
557
+ ✓ Fixed og:type value: websit → website
558
+ ✓ Fixed property: twitter:car → twitter:card
559
+ 💾 Saved 4 fix(es) to public/index.html
560
+
561
+ ✅ public/about.html - No errors to fix
562
+
563
+ 📊 Summary:
564
+ Total files checked: 2
565
+ Files fixed: 1
566
+ Total fixes applied: 4
567
+ ```
568
+
569
+ ### Supported Typo Patterns
570
+
571
+ **Open Graph Properties**:
572
+ - `og:titel`, `og:tittle`, `og:tilte` → `og:title`
573
+ - `og:descripion`, `og:discription`, `og:desciption` → `og:description`
574
+ - `og:imge`, `og:iamge` → `og:image`
575
+ - `og:typ`, `og:tipe` → `og:type`
576
+ - `og:sitename`, `og:sit_name` → `og:site_name`
577
+ - `og:local` → `og:locale`
578
+
579
+ **Twitter Card Properties**:
580
+ - `twitter:car` → `twitter:card`
581
+ - `twitter:titel`, `twitter:tittle` → `twitter:title`
582
+ - `twitter:descripion`, `twitter:discription` → `twitter:description`
583
+ - `twitter:imge` → `twitter:image`
584
+ - `twitter:creater` → `twitter:creator`
585
+
586
+ **Meta Tag Properties**:
587
+ - `discription`, `descripion`, `desciption` → `description`
588
+ - `viewpor`, `veiwport` → `viewport`
589
+ - `keyword` → `keywords`
590
+ - `auther`, `autor` → `author`
591
+
592
+ **Content Values**:
593
+ - `websit`, `web-site`, `artical`, `aticle` (og:type)
594
+ - `ja_jp` → `ja_JP`, `en_us` → `en_US`, `vi_vn` → `vi_VN` (og:locale)
595
+ - `summary_larg_image`, `summay` (twitter:card)
596
+
597
+ <!-- Your page content -->
598
+ </body>
599
+ ```
600
+
452
601
  ### Common Issues Detected
453
602
 
454
603
  - ❌ **Missing Script**: GTM script not found in `<head>`
@@ -567,4 +716,4 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
567
716
 
568
717
  **Made with ❤️ by the GBU Team**
569
718
 
570
- For more information, visit our [GitHub repository](https://github.com/example/gbu-accessibility-tool).
719
+ For more information, visit our [GitHub repository](https://github.com/example/gbu-accessibility-tool).