✅ ANGULAR UI SEO DEVELOPMENT GUIDELINES
Purpose:
This document defines mandatory SEO standards for Angular UI development.
It must be followed by all UI developers working on public or SEO-indexed pages.
1️⃣ Project-Level Architecture (Foundation)
1.1 Rendering Strategy
- Must use Server-Side Rendering (SSR)
- Angular Universal is mandatory
- Pure client-side SPA is not allowed for SEO pages
SEO pages must return fully rendered HTML when viewed using “View Page Source”.
1.2 Page Classification
| Page Type | SSR Required |
| Home | Yes |
| About / Company | Yes |
| Product / Service | Yes |
| Blog / Content | Yes |
| Login / Dashboard | No |
---
2️⃣ Routing & URL Structure
2.1 URL Rules
- Use lowercase, readable, keyword-based URLs
- Use hyphens (-) only
- No hash (#) routing
- No query-based primary URLs
Good: /jewelry-erp/inventory-management
Bad: /#/inventory?id=12
2.2 Angular Router Configuration
RouterModule.forRoot(routes, {
useHash: false,
scrollPositionRestoration: 'enabled'
});
---
3️⃣ HTML Structure & Semantics
3.1 Heading Rules
- Exactly ONE <h1> per page
- Logical order: h1 → h2 → h3
- Do not skip heading levels
3.2 Semantic HTML (Mandatory)
<header>
<nav>
<main>
<section>
<article>
<footer>
Avoid using <div> for layout where semantic tags are applicable.
---
4️⃣ Meta Tags & SEO Head Management
4.1 Dynamic Title & Description
this.title.setTitle('Jewelry ERP Software | Inventory & POS');
this.meta.updateTag({
name: 'description',
content: 'Cloud-based jewelry ERP with inventory, POS, and accounting.'
});
- Title length: 50–60 characters
- Description: 140–160 characters
- No duplicate titles
4.2 Canonical URL
<link rel="canonical" href="https://www.example.com/page-url">
---
5️⃣ Content Visibility Rules
- SEO content must be visible on first render
- Do not hide critical content in tabs, accordions, or modals
- Do not rely on click-triggered rendering for SEO text
---
6️⃣ Image SEO Standards
6.1 Image Naming
- gold-jewelry-erp-dashboard.webp
- img123.png
6.2 Alt Text
<img src="inventory.webp"
alt="Jewelry ERP inventory management dashboard">
6.3 Performance
- Use loading="lazy"
- Prefer WebP and SVG
---
7️⃣ Performance & Core Web Vitals
7.1 Build Rules
ng build --configuration=production
- Enable gzip / brotli
- Tree-shaking & minification
- Avoid heavy third-party libraries
---
8️⃣ Structured Data (Schema)
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Jewelry ERP",
"applicationCategory": "BusinessApplication"
}
</script>
---
9️⃣ Sitemap & Robots
9.1 Sitemap
- Include only public SEO pages
- Update on every new route
9.2 Robots.txt
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml
---
🔟 Accessibility = SEO
- Buttons must use <button>
- Links must use <a href>
- Forms must have <label>
- No clickable divs
---
11️⃣ Common SEO Mistakes
- Multiple H1 tags
- Text embedded inside images
- Same title for all pages
- Hash routing
---
12️⃣ Final Release Checklist
- SSR enabled and verified
- One H1 per page
- Unique title & description
- Clean URLs
- Semantic HTML
- Alt text for all images
- Sitemap updated
- Page load under 3 seconds