داده‌های معنایی و ساخت‌یافته

12.1 نشانه‌گذاری Microdata با Schema.org: تعریف معنا در HTML

12.1.1 مفهوم Microdata

• Microdata یک روش برای افزودن معنا به محتوای HTML با استفاده از ویژگی‌های itemscope - itemtype - itemprop.
• این روش به موتورهای جستجو و ابزارهای تحلیلی کمک می‌کند تا محتوای صفحه را به درستی درک کنند.

<article itemscope itemtype="https://schema.org/Article  ">
<h1 itemprop="headline">آموزش HTML5 برای مبتدیان</h1>
<p><strong>نویسنده:</strong> <span itemprop="author">سارا محمدی</span></p>
<time itemprop="datePublished" datetime="2025-04-05">۵ آوریل ۱۴۰۴</time>
<div itemprop="description">
  این مقاله به معرفی مفاهیم اولیه HTML5 می‌پردازد.
</div>
<img 
 itemprop="image" 
 src="cover.jpg" 
 alt="عنوان مقاله"
 width="600" 
 height="400"
>
</article>

• itemtype باید به صورت URL کامل (مثلاً https://example.com) باشد.
• itemprop فقط برای ویژگی‌های موجودیت استفاده می‌شود.

12.1.2 مزایا و معایب Microdata

• Microdata برای محتوای ساده و کوتاه مناسب است.
• برای سیستم‌های پیچیده، بهتر است از JSON-LD استفاده شود.

12.2 روش‌های RDFa و JSON-LD: تقویت داده‌های ساخت‌یافته

12.2.1 RDFa: نشانه‌گذاری متون با قابلیت گسترده

• vocab: تعیین واژگان (Schema.org - FOAF)
• typeof: نوع موجودیت
• property: ویژگی
• resource: آدرس منبع

<article vocab="https://schema.org/" typeof="Article">
 <h1 property="headline">آموزش HTML5</h1>
 <p>نویسنده: <span property="author" typeof="Person">سارا محمدی</span></p>
 <time property="datePublished" datetime="2025-04-05"></time>
</article>

12.2.2 JSON-LD: روش پیشرفته و محبوب

• JSON-LD (JSON for Linked Data) یک روش مستقل از HTML است که داده‌ها را در قالب JSON داخل <script type="application/ld+json"> قرار می‌دهد.
• بدون تداخل با ساختار HTML، قابلیت انتقال به موتورهای جستجو را دارد.

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "Article",
 "headline": "آموزش HTML5 برای مبتدیان",
 "author": {
  "@type": "Person",
  "name": "سارا محمدی"
   },
  "datePublished": "2025-04-05",
  "description": "معرفی مفاهیم اولیه HTML5.",
  "image": "https://example.com/cover.jpg"
    }
    </script>    

• JSON-LD به عنوان استاندارد ترجیحی توسط Google، Bing و Yahoo تأیید شده است.
• قابلیت ترکیب با APIها و سیستمهای مدیریت محتوا (CMS) بسیار بالاست.

12.2.3 مقایسهٔ نگارش و کاربرد

• برای محتوای ساده: Microdata
• برای سیستم‌های پیچیده: JSON-LD
• برای سازگاری با فناوری‌های مختلف: RDFa

12.3 متاهای شبکه‌های اجتماعی پیشرفته: بازبینی Open Graph و Twitter Cards

12.3.1 Open Graph (og:*) — استاندارد فیسبو

<meta property="og:title" content="آموزش HTML5 برای مبتدیان">
<meta property="og:description" content="یادگیری عملی مفاهیم اولیه HTML5.">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:url" content="https://example.com/html5">
<meta property="og:type" content="article">
<meta property="og:site_name" content="وبسایت آموزشی">

• تصویر باید مستقل از صفحه باشد و به اندازه کافی بزرگ باشد.
• og:locale برای تنظیم زبان.

12.3.2 Twitter Cards (twitter:*) — استاندارد توییتر

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webacademy_ir">
<meta name="twitter:creator" content="@sara_mohammadi">
<meta name="twitter:title" content="آموزش HTML5 برای مبتدیان">
<meta name="twitter:description" content="یادگیری عملی مفاهیم اولیه HTML5.">
<meta name="twitter:image" content="https://example.com/cover.jpg">

• summary_large_image برای تصاویر بزرگ‌تر و جذاب‌تر مناسب است.
• استفاده از twitter:player برای ویدئوهای توییتر.

12.4 ویژگی‌های بهبود عملکرد بارگذاری: کنترل هوشمندانه منابع

12.4.1 loading

• eager: بارگذاری فوری (پیش‌فرض)
• lazy: بارگذاری تأخیری (هنگام نزدیک شدن به viewport)

<img src="hero.jpg" loading="lazy" alt="عنوان">
<iframe src="video.html" loading="lazy"></iframe>

12.4.2 رمزگشایی (Decoding)

• همزمان (sync): رمزگشایی سریع ولی با مصرف بالای CPU
• غیرهمزمان (async): رمزگشایی غیرهمزمان (پیشنهادی برای بهبود عملکرد)
• خودکار (auto): واگذاری تصمیم‌گیری به مرورگر

<img src="photo.jpg" decoding="async" alt="تصویر">

12.4.3 crossorigin

• anonymous: بدون اطلاعات اعتبارسنجی
• use-credentials: با کوکی‌ها و اعتبارسنجی

<img src="https://cdn.example.com/photo.jpg" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.example.com/style.css" crossorigin="anonymous">

• crossorigin="anonymous" برای منابع خارجی توصیه می‌شود.
• use-credentials فقط در موارد خاص (مثلاً احراز هویت) استفاده شود.

12.4.4 referrerpolicy

• no-referrer: بدون اطلاعات
• no-referrer-when-downgrade: فقط وقتی امنیت کاهش می‌یابد
• strict-origin-when-cross-origin: محدود کردن اطلاعات
• same-origin: فقط در همان origin

<a href="https://external-site.com" referrerpolicy="no-referrer">لینک</a>
<iframe src="https://example.com" referrerpolicy="strict-origin-when-cross-origin"></iframe>

قبلی