pp-seo/README.md

`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,

# 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:

```bash
npm install pp-seo
```

---

## Usage

### 1. Import the Standalone Component

```typescript
import { Seo } from "pp-seo";
```

### 2. Add to Your Component

```typescript
@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.

```typescript
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:

```bash
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:

```bash
cd dist/pp-seo
npm publish
```

---

## Running Unit Tests

To execute unit tests:

```bash
ng test pp-seo
```

---

## License

MIT

## Support

- ✨ **Feature requests**: [Open a discussion](https://github.com/ayush-parida/pp-libraries/discussions/categories/pp-seo).
- 🐛 **Bugs**: [Open a discussion](https://github.com/ayush-parida/pp-libraries/discussions/categories/pp-seo).
- 📚 **Documentation**: [View the full documentation](https://ayush-parida.github.io/pp-libraries/pp-seo/).