PpSeo

pp-seo is a standalone Angular library that provides a highly configurable, sectioned form for managing all SEO (Search Engine Optimization) properties in your Angular applications. It supports a wide range of SEO fields, grouped into logical sections, and is designed for flexibility, validation, and easy integration.

Features

• Sectioned SEO Form: All SEO fields are grouped into logical sections (Core Meta, Crawling & Indexing, Social Media, etc.).
• Field Types: Supports text, textarea, array, dropdown, checkbox, and multiselect fields.
• Validation: Built-in validation for required fields, max length, and patterns.
• Hints: Optional hints for each field type.
• Reactive Updates: Emits changes and supports Angular forms integration.
• Standalone Component: No need for NgModule imports—just use as a standalone component.
• Highly Configurable: Show/hide/disable sections or fields as needed.

SEO Sections & Fields

The SEO form is structured into the following sections, each with its own set of fields:

1. Core Meta Tags

• Title Tag: Page title (required, max 60 chars)
• Meta Description: Page description (max 160 chars)
• Meta Keywords: Array of keywords
• Canonical URL: Preferred URL (max 200 chars)
• Robots Meta: Indexing instructions (default: index, follow)
• Viewport: Mobile viewport settings (default: width=device-width, initial-scale=1)
• Charset: Character encoding (default: utf-8)
• Language: Page language (default: en)
• Author, Publisher, Rating, Copyright, Generator, Reply-To, Content-Type

2. Crawling & Indexing

• Noindex, Nofollow, Noimageindex, Noarchive, Nosnippet, Notranslate: All as checkboxes
• Unavailable After: Date (YYYY-MM-DD)
• Paginated Prev/Next: URLs for paginated content

3. Cache & Refresh Control

• Cache-Control, Pragma, Expires, Refresh

4. Social Media & Open Graph

• Open Graph: ogTitle, ogDescription, ogType, ogUrl, ogImage, ogImageAlt, ogImageWidth, ogImageHeight, ogSiteName, ogLocale
• Twitter: twitterCard, twitterTitle, twitterDescription, twitterImage, twitterImageAlt, twitterSite, twitterCreator
• Facebook: fbAppId
• Pinterest: pinterestDescription, pinterestMedia, pinterestNoPin

5. Mobile & App-Specific

• Apple Touch Icon, Apple Mobile Web App Capable, Apple Status Bar Style, Mobile Web App Capable, Theme Color, Microsoft Tile Color, Microsoft Tile Image

6. Structured Data

• JSON-LD: Structured data in JSON-LD format

7. Alternate Tags

• Hreflang: Array of language-code|url
• Alternate Media, Alternate Format

8. Site Verification

• Google, Bing, Yandex, Pinterest, Facebook, Norton Safe Web: Verification codes

9. Security & Privacy

• Referrer Policy, Content Security Policy, Permissions Policy, X-UA-Compatible, X-Frame-Options

10. Performance

• Preconnect, Prefetch, Preload, DNS-Prefetch: Arrays of URLs/domains
• Prerender: URL

Installation

Install the library using npm:

npm install pp-seo

Usage

1. Import the Standalone Component

import { Seo } from "pp-seo";

2. Add to Your Component

@Component({
  selector: "my-component",
  standalone: true,
  imports: [Seo],
  template: ` <pp-seo [properties]="seoProperties" (propertiesChange)="onSeoChange($event)"> </pp-seo> `,
})
export class MyComponent {
  seoProperties = this.getNewSeoProperties();

  onSeoChange(updated: any) {
    // Handle updated SEO properties
  }

  getNewSeoProperties() {
    // Optionally use Seo.prototype.getNewSeoProperties() for defaults
    // Or copy the structure from the documentation
  }
}

3. Properties & Events

• [properties]: The full PpSeo object (see below for structure).
• (propertiesChange): Emits the updated PpSeo object on any change.

PpSeo Object Structure

The PpSeo object is a deeply structured object with sections and fields. Each field has:

• value: The current value
• label: Display label
• description: Help text
• type: One of text, textarea, array, dropdown, checkbox, multiselect
• validation: { required, maxLength, pattern }
• hidden: Hide this field
• disabled: Disable this field

Each section (e.g., coreMeta, socialMedia) has:

• label: Section label
• fields: Object of fields
• hidden: Hide this section
• disabled: Disable this section

You can use the default structure by calling Seo.prototype.getNewSeoProperties().

Field Types

• TEXT: Single-line input
• TEXTAREA: Multi-line input
• ARRAY: List of values (add/remove)
• DROPDOWN: Select from options
• CHECKBOX: Boolean toggle
• MULTISELECT: Multiple select

Validation

• Required fields are enforced.
• Max length and pattern are validated.
• Invalid fields are tracked and can be highlighted in the UI.

Example: Customizing the Form

You can hide or disable entire sections or individual fields by setting hidden or disabled to true in the PpSeo object.

seoProperties.sections.socialMedia.hidden = true; // Hide Social Media section
seoProperties.sections.coreMeta.fields.title.disabled = true; // Disable Title field

Building the Library

To build the library, run:

ng build pp-seo

The build artifacts will be placed in the dist/pp-seo directory.

Publishing the Library

After building, publish your library to npm:

cd dist/pp-seo
npm publish

Running Unit Tests

To execute unit tests:

ng test pp-seo

License

MIT

Support

• ✨ Feature requests: Open a discussion.
• 🐛 Bugs: Open a discussion.
• 📚 Documentation: View the full documentation.