| نوع الخاصية في وسوم المتا (`Meta Property`) | محركات البحث المستهدفة أو المنصة | الهدف المعماري والتأثير الظاهري |
|---|---|---|
| `name="description"` | محركات البحث العامة (مثل Google و Bing) | عرض ملخص قصير يصف محتوى الصفحة تحت العنوان في نتائج البحث |
| `property="og:title"` أو `og:image` | منصات التواصل الاجتماعي (مثل Facebook و Twitter) | تحديد العنوان والصورة البارزة عند مشاركة رابط الصفحة على السوشيال ميديا |
لضمان ظهور صفحات تطبيقك في صدارة نتائج محركات البحث، لا يكفي فقط تفعيل العرض على الخادم (SSR)، بل يجب أيضاً التحكم الديناميكي في عناوين الصفحات (Titles) والبيانات الوصفية (Meta Tags) مثل الوصف والكلمات المفتاحية لكل صفحة على حدة. يتيح لك أنجولر خدمتين أساسيتين هما Title و Meta لإدارة هذه البيانات بكل سهولة واحترافية.
تتيح لك الخدمات تغيير عنوان الصفحة والوصف لحظياً بناءً على بيانات المنتج أو المقال المعروض حالياً.
عند دمج هذه الخدمات مع الـ SSR، تستطيع روبوتات محركات البحث قراءة العنوان والوصف من شفرة الصفحة المُرسلة مباشرة، مما يرفع من ترتيب الموقع.
| 1 | import { Component, OnInit, inject } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { Title, Meta } from '@angular/platform-browser'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-seo-manager', |
| 7 | standalone: true, |
| 8 | imports: [CommonModule], |
| 9 | template: ` |
| 10 | <div class="card"> |
| 11 | <h3>إدارة بيانات المتا والـ SEO بذكاء</h3> |
| 12 | <p>تم تحديث عنوان الصفحة والوصف الوظيفي بنجاح لمحركات البحث!</p> |
| 13 | </div> |
| 14 | `, |
| 15 | styles: [` |
| 16 | .card { background: #090d16; color: #fff; padding: 24px; border-radius: 8px; border: 1px solid #1e293b; } |
| 17 | p { color: #38bdf8; } |
| 18 | `] |
| 19 | }) |
| 20 | export class SeoManagerComponent implements OnInit { |
| 21 | private titleService = inject(Title); |
| 22 | private metaService = inject(Meta); |
| 23 | |
| 24 | ngOnInit(): void { |
| 25 | // 1. تعيين عنوان الصفحة الديناميكي |
| 26 | this.titleService.setTitle('أحدث منتجات التقنية والبرمجة | متجر أنجولر'); |
| 27 | |
| 28 | // 2. تحديث أو إضافة وسوم المتا الوصفية لمحركات البحث |
| 29 | this.metaService.updateTag({ name: 'description', content: 'اكتشف أفضل الدورات البرمجية والمنتجات التقنية المصممة خصيصاً للمطورين.' }); |
| 30 | this.metaService.updateTag({ name: 'keywords', content: 'Angular, SSR, TypeScript, Web Development' }); |
| 31 | |
| 32 | console.log('[SEO Service] تم تحديث بيانات العنوان والمتا بنجاح.'); |
| 33 | } |
| 34 | } |
| 1 | import { Injectable, inject } from '@angular/core'; |
| 2 | import { Title, Meta } from '@angular/platform-browser'; |
| 3 | |
| 4 | @Injectable({ |
| 5 | providedIn: 'root' |
| 6 | }) |
| 7 | export class SeoService { |
| 8 | private title = inject(Title); |
| 9 | private meta = inject(Meta); |
| 10 | |
| 11 | generateTags(config: { title: string, description: string, image: string }): void { |
| 12 | this.title.setTitle(config.title); |
| 13 | this.meta.updateTag({ name: 'description', content: config.description }); |
| 14 | this.meta.updateTag({ property: 'og:title', content: config.title }); |
| 15 | this.meta.updateTag({ property: 'og:description', content: config.description }); |
| 16 | this.meta.updateTag({ property: 'og:image', content: config.image }); |
| 17 | } |
| 18 | } |
⚠️ تحذير
تذكر أن نسيان تحديث الوسوم الوصفية للمنتجات المختلفة سيؤدي إلى ظهور نفس العنوان والوصف لكل صفحات الموقع في محركات البحث! احرص دائماً على تخصيص بيانات المتا لكل صفحة ديناميكية.