Technical SEO

Complete Technical SEO Guide for Developers
2
Technical SEO
Complete Developer’s Guide
3
‫سئو تکنیکال چیست؟‬
‫هر فعالیتی در حوزه سئو و بهینه سازی سایت به جز تولید محتوا و لینک سازی را سئو تکنیکال می‬
‫نامیم‪ .‬به عبارت دیگر سئو تکنیکال فرآیند آماده سازی سایت برای درک صحیح ربات های گوگل از محتوا‬
‫و ارتباط میان صفحات است‪.‬‬
‫‪Meta Tags‬‬ ‫‪ -1‬تگ های ‪HTML‬‬
‫‪Page Speed Optimization‬‬ ‫‪ -2‬بهینه سازی سرعت سایت‬
‫‪Structured Data‬‬ ‫‪ -3‬نشانه گذاری استاندارد‬
‫‪Accelerated Mobile Pages‬‬ ‫‪ -4‬استفاده از ‪AMP‬‬
‫‪4‬‬
‫سئو تکنیکال چیست؟‬

‫‪HTML Tags‬‬
‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬
‫فارغ از آنکه سایت شما با چه زبان برنامه نویسی یا سیستم مدیریت محتوایی نوشته شده است‪ ،‬خروجی‬
‫صفحات همیشه به صورت تگ های ‪ HTML‬برای کاربر و گوگل نمایش داده میشود‪.‬‬
‫هر صفحه ‪ HTML‬از دو بخش اصلی ‪ head‬و ‪ body‬تشکیل شده است‪.‬‬
‫محتوای قرار گرفته در تگ ‪ head‬برای کاربران قابل مشاهده نبوده و اطالعاتی در مورد محتوای آن صفحه به‬
‫… ‪Meta Tags, Link, Style, Script,‬‬ ‫مرورگر و موتورهای جستجو ارایه میدهد‪.‬‬
‫محتوای قرار گرفته در ‪ body‬مستقیما در دسترس کاربر بوده و مالک اصلی گوگل برای تعیین موضوع‬
‫… ‪H ,a, p, span, img, div,‬‬ ‫صفحه است‪.‬‬
‫‪5‬‬

<!DOCTYPE html>
<html lang=“fa-IR">
<head>
<title>Title Of Page</title>
<meta name="description" content=“Description of page” />
</head>
<body>
<section>
<p>some contents in paragraphs</p>
<a href=“url”>anchor text</a>
<img src=“url” alt=“alternative text” />
</section>
</body>
</html>
‫ و تاثیر آنها بر سئو‬HTML ‫تگ های‬

‫‪Head Tags‬‬
‫تگ های ‪ HTML‬مورد استفاده در هدر سایت‬
‫محتوای قرار گرفته در تگ ‪ head‬برای کاربران قابل مشاهده نبوده و اطالعاتی در مورد محتوای آن صفحه به‬
‫… ‪Meta Tags, Link, Style, Script,‬‬ ‫مرورگر و موتورهای جستجو ارایه میدهد‪.‬‬
‫‪7‬‬

‫>‪<!DOCTYPE html‬‬
‫>"‪<html lang=“fa-IR‬‬
‫>‪</html‬‬
‫عبارت ‪ lang‬مستقیما در تگ ‪ html‬قرار گرفته و به ربات ها و مرورگرها اعالم میکند که محتوای این‬ ‫>‪<1‬‬
‫صفحه به چه زبانی تهیه شده است‪.‬‬
‫کاربرد اصلی این تگ برای سایت هایی است که در صفحه محتوای میکس از چند زبان دارند و از این‬ ‫>‪<2‬‬
‫طریق مشخص میکنند زبان اصلی صفحه کدام است‪.‬‬
‫نبود این تگ تاثیر منفی بر سئوی سایت شما نخواهد داشت‪.‬‬ ‫>‪<3‬‬
‫‪8‬‬

‫>‪<head‬‬
‫>‪<title>Title Of Page</title‬‬
‫>‪</head‬‬
‫تگ ‪ Title‬بیانگر عنوان صفحه برای کاربر و گوگل است‪ .‬این عبارت در نوار مرورگر نمایش داده شده و‬ ‫>‪<1‬‬
‫مالک اصلی گوگل برای نمایش عنوان در نتایج جستجو است‪.‬‬
‫هر صفحه از سایت شما باید حتما دارای تگ ‪ title‬باشد و عنوان استفاده شده در آن به صورت کامال‬ ‫>‪<2‬‬
‫اختصاصی و متناسب با محتویات صفحه تعیین شود‪.‬‬
‫گوگل برای عنوان یک صفحه در لیست نتایج خود حداکثر ‪ 70‬کاراکتر را نمایش میدهد‪.‬‬ ‫>‪<3‬‬
‫در انتهای تگ ‪ title‬نام برند قرار داده شده و با کاراکتر – از عنوان صفحه جدا می گردد‪.‬‬ ‫>‪<4‬‬
‫‪9‬‬

‫>‪<head‬‬
‫>‪<meta name="description" content=“Description of Page" /‬‬
‫>‪</head‬‬
‫تگ ‪ Description‬بیانگر توضیحی کوتاه در مورد صفحه است و در هیچ کجای صفحه قابل رویت نیست‬ ‫>‪<1‬‬
‫ولی در نتایج جستجو به کاربران نمایش داده میشود‪.‬‬
‫قرار دادن تگ ‪ Description‬در صفحه اجباری نیست ولی حضور آن تاثیر مثبت بر سئو خواهد داشت‪.‬‬ ‫>‪<2‬‬
‫توضیحات متا برای هر صفحه اختصاصی و متناسب با محتویات صفحه تعیین شود‪.‬‬
‫نمایش توضیحات در نتایج جستجو محدود به ‪ 170‬کاراکتر است‪ ،‬پیشنهاد میشود ‪ 160‬کاراکتر باشد‪.‬‬ ‫>‪<3‬‬
‫توضیحات متا عالوه بر سئو میتواند در بازاریابی و جلب توجه کاربران تاثیرگذار باشد‪.‬‬ ‫>‪<4‬‬
‫‪10‬‬

‫>‪<head‬‬
‫>‪<meta name=“keywords" content=“keyword, some words, …" /‬‬
‫>‪</head‬‬
‫تگ ‪ keywords‬بیانگر عبارات کلیدی مرتبط با صفحه است‪ .‬این تگ سالها پیش استفاده بسیاری داشت‬ ‫>‪<1‬‬
‫و مالک اصلی گوگل برای تعیین موضوع صفحه بود‪.‬‬
‫تگ ‪ keywords‬هم اکنون نه در صفحه سایت و نه در نتایج جستجو نمایش داده نمیشود‪ .‬وجود یا عدم‬ ‫>‪<2‬‬
‫وجود آن تاثیری بر سئو صفحه ندارد‪.‬‬
‫زمان خود را صرف قرار دادن این تگ یا تکمیل محتوای آن نکنید‪.‬‬ ‫>‪<3‬‬
‫‪11‬‬

‫>‪<head‬‬
‫>‪<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /‬‬
‫>‪</head‬‬
‫تگ ‪ Content-Type‬بیانگر نوع محتوای صفحه و ‪ encoding‬کاراکترهای به کار رفته در آن است‪ .‬برای‬ ‫>‪<1‬‬
‫سایت های فارسی همیشه مطابق نمونه باشد‪.‬‬
‫نبودن این تگ میتواند موجب نمایش نادرست محتوا در صفحه و استفاده از کاراکترهای نامفهوم برای‬ ‫>‪<2‬‬
‫نمایش حروف فارسی شود‪.‬‬
‫این تگ مستقیما بر روی سئو تاثیرگذار نیست‪.‬‬ ‫>‪<3‬‬
‫‪12‬‬

‫>‪<head‬‬
‫‪<meta name="viewport" content="width=device-width, initial-scale=1, user-‬‬
‫>" ‪scalable=no, minimum-scale=1, maximum-scale=2‬‬
‫>‪</head‬‬
‫تگ ‪ viewport‬بیانگر نحوه نمایش سایت در موبایل و دسترسی کاربر برای زوم کردن در صفحه است‪.‬‬ ‫>‪<1‬‬
‫استفاده از این تگ اجباری نیست ولی نشان دهنده ریسپانسیو بودن صفحه است‪.‬‬
‫عبارت ‪ user-scalable=no‬موجب میشود کاربر اجازه زوم کردن در موبایل و بوسیله ‪ touch‬را نداشته‬ ‫>‪<2‬‬
‫باشد‪.‬‬
‫‪ minimum-scale‬و ‪ maximum-scale‬برای زمانیکه کاربر اجازه زوم دارد استفاده میشود و حداقل و‬ ‫>‪<3‬‬
‫حداکثر بزرگنمایی صفحه را مشخص میکند‪.‬‬
‫سایت هایی که ریسپانسیو نیستند این تگ را در هدر خود ندارند‪.‬‬ ‫>‪<4‬‬
‫‪13‬‬

‫>‪<head‬‬
‫>‪<meta name="robots" content="noindex,nofollow" /‬‬
‫>‪</head‬‬
‫تگ ‪ robots‬به ربات های گوگل دستور میدهد که محتوای صفحه را بررسی و ایندکس نکنند‪ .‬در حالت‬ ‫>‪<1‬‬
‫پیش فرض و شرایطی که صفحات باید ایندکس شوند نیازی به این تگ در هدر سایت نیست‪.‬‬
‫عبارت ‪ noindex‬به گوگل دستور میدهد که صفحه را ایندکس نکند‪.‬‬ ‫>‪<2‬‬

‫عبارت ‪ nofollow‬یعنی تمام لینک های موجود در صفحه نوفالو هستند‪.‬‬ ‫>‪<3‬‬
‫‪14‬‬

‫>‪<head‬‬
‫>”‪<meta name="google-site-verification" content=“Verification Code‬‬
‫>‪</head‬‬
‫تگ ‪ google-site-verification‬برای تایید هویت شما به عنوان مالک سایت در پنل گوگل وبمستر‬ ‫>‪<1‬‬
‫استفاده میشود‪ .‬استفاده از این تگ اجباری نیست و میتوان از روش های دیگری استفاده نمود‪.‬‬
‫وجود یا عدم وجود این تگ در صفحه تاثیری بر جایگاه و سئو آن نخواهد داشت‪.‬‬ ‫>‪<2‬‬
‫‪15‬‬

‫>‪<head‬‬
‫>‪<link rel="shortcut icon" href=“URL" type="image/x-icon" /‬‬
‫>‪</head‬‬
‫تگ ‪ shortcut‬برای آدرس دهی ‪ favicon‬سایت استفاده میشود‪ .‬این آیکون در مرورگر و به تازگی در‬ ‫>‪<1‬‬
‫نتایج جستجو در موبایل نمایش داده میشود‪.‬‬
‫داشتن آیکون اختصاصی میتواند بر برندینگ و سئو سایت شما تاثیر مثبت داشته باشد‪.‬‬ ‫>‪<2‬‬
‫عبارت ‪ apple-touch-icon‬برای تعیین آیکون مناسب دستگاه های آیفون و در سایزهای مختلف مورد‬ ‫>‪<3‬‬
‫استفاده است‪ .‬زمانیکه صفحه ‪ bookmark‬میشود این آیکون به جای آیکون اصلی استفاده میشود‪.‬‬
‫‪16‬‬

‫>‪<head‬‬
‫>"‪<meta name="theme-color" content="#db5945‬‬
‫>‪</head‬‬
‫تگ ‪ theme-color‬رنگ مرورگر کروم کاربر را در سایت یا صفحه شما مشخص میکند‪ .‬برای اینکار کد رنگی‬ ‫>‪<1‬‬
‫مورد نظر خود را در بخش ‪ content‬قرار دهید‪.‬‬
‫این کار تاثیر مستقیم بر سئو سایت شما ندارد ولی میتواند بر تجربه کاربری آن موثر باشد‪.‬‬ ‫>‪<2‬‬
‫در حال حاضر فقط مرورگر کروم از این تگ پشتیبانی میکند و برای مرورگرهای دیگر تگ های مشابهی‬ ‫>‪<3‬‬
‫تعریف شده است‪.‬‬
‫‪17‬‬

‫>‪<head‬‬
‫>"‪<meta name="author" content=“Web Designer‬‬
‫>‪</head‬‬
‫تگ ‪ author‬نام نویسنده صفحه را مشخص میکند ولی بسیاری از طراحان وب این تگ را به عنوان امضای‬ ‫>‪<1‬‬
‫خود در هدر سایت قرار میدهند‪.‬‬
‫وجود این تگ در هدر تمام صفحات هیچ کاربردی نداشته و اعالم نام نویسنده صفحه یا سایت به نام‬ ‫>‪<2‬‬
‫طراح سایت میتواند تاثیر منفی بر سئو شما داشته باشد‪.‬‬
‫‪18‬‬

‫>‪<head‬‬
‫>‪<meta name="generator" content="WordPress 4.9.4" /‬‬
‫>‪</head‬‬
‫تگ ‪ generator‬به گوگل و ربات های دیگر اعالم میکند که سایت شما از چه سیستم مدیریت محتوایی‬ ‫>‪<1‬‬
‫استفاده میکند‪ .‬استفاده از این تگ الزامی نداشته و تاثیری بر سئو شما ندارد‪.‬‬
‫بسیاری از ربات های اینترنتی با استفاده از این تگ نسخه ‪ CMS‬شما را تشخیص داده و متناسب با‬ ‫>‪<2‬‬
‫عملکرد آن برای ارسال اسپم یا هک سایت اقدام میکنند پس بهتر است آن را حذف کنید‪.‬‬
‫‪19‬‬

<head>


<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page ">
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content="http://www.example.com/image.jpg">
</head>
‫ محتوای‬،‫ زمان به اشتراک گذاری‬.‫این تگ ها برای اشتراک گذاری محتوا در توئیتر استفاده میشود‬ <1>
.‫موجود در بخش های عنوان و توضیحات و تصویر در شبکه اجتماعی نمایش داده میشود‬
.‫این تگ ها مستقیما بر سئو تاثیرگذار نبوده و الزامی به استفاده از آنها نیست‬ <2>
20

<head>

<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="fb:admins" content="Facebook numeric ID" />
</head>
‫ شبکه اجتماعی از‬.‫این تگ ها برای اشتراک گذاری محتوا در فیسبوک و تلگرام مورد استفاده قرار میگیرد‬ <1>
.‫این اطالعات برای شناسایی صفحه اشتراک گذاشته شده و دریافت اطالعات آن استفاده میکند‬
‫استفاده از این تگ ها موجب میشود هنگام اشتراک گذاری سایت شما عنوان و توضیحات لینک مطابق‬ <2>
.‫آنچه تعیین کرده اید به کاربران نمایش داده شود‬
21

‫>‪<head‬‬
‫>‪<link rel="canonical" href=“Source” URL /‬‬
‫>‪</head‬‬
‫تگ ‪ canonical‬یکی از مهمترین تگ های تاثیر گذار بر سئو است و وظیفه اصلی آن جلوگیری از تولید‬ ‫>‪<1‬‬
‫محتوای تکراری و ایندکس آن توسط گوگل است‪.‬‬
‫همه صفحات وب باید حتما این تگ را در هدر خود داشته باشند‪.‬‬ ‫>‪<2‬‬
‫در صورتیکه این صفحه نسخه کپی شده از صفحه دیگری است آدرس صفحه اصلی و در غیر اینصورت‬ ‫>‪<3‬‬
‫آدرس خود صفحه در بخش ‪ href‬قرار داده میشود‪.‬‬
‫این تگ موجب میشود صفحات شما با آدرس های داینامیک و لینک سازی های خارجی نادرست‬ ‫>‪<4‬‬
‫ایندکس نشده و از ‪ Crawl Errors‬در گوگل وبمستر جلوگیری میکند‪.‬‬
‫‪22‬‬

‫>‪<head‬‬
‫> ‪<meta name="expires" content="tue, 01 Jun 2018"/‬‬
‫>‪</head‬‬
‫تگ ‪ expires‬به گوگل اعالم میکند که محتوای این صفحه منقضی شده و دیگر ارزشمند نیست‪ .‬به طور‬ ‫>‪<1‬‬
‫معمول استفاده از این تگ پیشنهاد نمیشود‪.‬‬
‫برای سایت هایی که محتوای آنها پس از مدتی بی استفاده و کم ارزش میشوند این تگ میتواند‬ ‫>‪<2‬‬
‫کاربردی باشد‪ .‬مانند بخش رویدادها در سایت ایوند‪.‬‬
‫‪23‬‬

‫>‪<head‬‬
‫>"‪<meta name="rating" content="safe for kids‬‬
‫>‪</head‬‬
‫تگ ‪ rating‬مشخص میکند که محتوای صفحه برای گروه سنی خاصی از مخاطبین بوده و برای کودکان یا‬ ‫>‪<1‬‬
‫افراد زیر ‪ 14‬سال مناسب نمیشود‪.‬‬
‫این تگ معموال برای سایت هایی که محتوای غیراخالقی یا خشن ارایه میکنند استفاده میشود و حضور‬ ‫>‪<2‬‬
‫آن در سایت های عمومی هیچ کاربردی ندارد‪.‬‬
‫‪24‬‬

‫>‪<head‬‬
‫>‪<link rel=“dns-prefetch” href=“//ajax.googleapis.com” /‬‬
‫>‪</head‬‬
‫تگ ‪ dns-prefetch‬مشخص میکند که برای نمایش محتوای این صفحه مرورگر باید به چه سایت ها و‬ ‫>‪<1‬‬
‫آدرس های دیگری متصل شود‪.‬‬
‫به طور معمول زمانیکه فایل های جانبی مانند ‪ CSS‬و ‪ JS‬از سایت های دیگر یا ‪ CDN‬فراخوان میشوند‬ ‫>‪<2‬‬
‫این تگ توصیه میشود‪.‬‬
‫در صورت نبود این تگ ارتباط با هر دامنه به صورت مجزا و پشت سرهم انجام میشود که سرعت نمایش‬ ‫>‪<3‬‬
‫صفحه را کاهش میدهد‪ .‬ولی با استفاده از آن مرورگر ارتباط با همه سایت ها را به صورت همزمان انجام‬
‫داده و سریعتر محتوا را دریافت میکند‪.‬‬
‫‪25‬‬

‫>‪<head‬‬
‫>‪<link rel=“stylesheet” href=“URL” type=“text/css” media=“all” /‬‬
‫>‪</head‬‬
‫تگ ‪ stylesheet‬برای فراخوانی یک فایل ‪ CSS‬از آدرسی مشخص در اینترنت استفاده میشود‪ .‬این تگ‬ ‫>‪<1‬‬
‫عموما در هدر سایت قرار گرفته و تا زمانیکه دریافت نشود بقیه محتوای صفحه لود نمیشود‪.‬‬
‫استفاده از این تگ مستقیما بر سئو سایت تاثیرگذار نیست‪ .‬ولی تعداد استفاده از آن‪ ،‬حجم فایل ها و‬ ‫>‪<2‬‬
‫محل قرار گیری تگ میتواند تاثیر زیادی بر سرعت و سئو سایت داشته باشد‪.‬‬
‫‪26‬‬

‫>‪<head‬‬
‫>‪<!-- / Yoast SEO Premium plugin. --‬‬
‫>‪</head‬‬
‫تگ ‪ comment‬هیچ تاثیری بر سئو یا نحوه نمایش یک صفحه ندارد و اطالعاتی تکمیلی برای کدنویسی‬ ‫>‪<1‬‬
‫سایت را شامل میشود‪.‬‬
‫با توجه به بی تاثیر بودن آن‪ ،‬پیشنهاد میشود پس از پایان پروژه تگ های کامنت از آن حذف شود تا‬ ‫>‪<2‬‬
‫حجم کد در صفحه کاهش یابد‪.‬‬
‫‪27‬‬

‫‪Body Tags‬‬
‫تگ های ‪ HTML‬مورد استفاده در بدنه سایت‬
‫محتوای قرار گرفته در ‪ body‬مستقیما در دسترس کاربر بوده و مالک اصلی گوگل برای تعیین موضوع‬
‫… ‪H ,a, p, span, img, div,‬‬ ‫صفحه است‪.‬‬
‫روش های مختلفی برای کدنویسی صفحات ‪ HTML‬و ارایه محتوا وجود دارد ولی استفاده صحیح و در جای‬
‫مناسب از این تگ ها میتواند نقش مهمی در درک صحیح گوگل از صفحات شما داشته باشد‪.‬‬
‫تگ های ‪ HTML‬به دو دسته ‪( semantic‬معنایی) و ‪( non-semantic‬بدون معنا) تقسیم میشوند‪.‬‬
‫‪28‬‬

‫>‪<body‬‬
‫>”‪<div class=“styler” id=“identity‬‬
‫…‪Some Codes Here‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫تگ ‪ div‬از انواع ‪ non-semantic‬بوده و هیچ تاثیری بر سئو یا نحوه نمایش یک صفحه ندارد‪ .‬این تگ‬ ‫>‪<1‬‬
‫تنها وظیفه فضاسازی برای قرارگیری و گروه بندی محتوا را برعهده دارد‪.‬‬
‫تگ ‪ class‬برای تعیین کدها ‪ CSS‬مرتبط با المان به کار گرفته میشود و تاثیری بر سئو ندارد‪.‬‬ ‫>‪<2‬‬
‫تگ ‪ id‬همانند تگ ‪ class‬برای گروه بندی المان های و تعیین نحوه نمایش به کار میرود با این تفاوت‬ ‫>‪<3‬‬
‫که تگ ‪ class‬میتواند بین چند المان مشترک باشد ولی تگ ‪ id‬در صورت استفاده باید کامال اختصاصی‬
‫‪29‬‬

‫>‪<body‬‬
‫>‪<h1>Top Heading</h1‬‬
‫>‪<h2>Section Heading</h2‬‬
‫>‪<h3>sub Section Heading</h3‬‬
‫>‪</body‬‬
‫تگ های هدینگ تاثیر زیادی بر سئو صفحه و درک محتوای آن توسط گوگل دارند‪.‬‬ ‫>‪<1‬‬
‫تگ ‪ h1‬باید در هر صفحه از سایت شما موجود بوده و فقط یکبار استفاده شود‪.‬‬ ‫>‪<2‬‬
‫تگ ‪ h2‬اولویت بعدی گوگل برای تعیین موضوع صفحه است و محدودیتی در استفاده ندارد‪.‬‬ ‫>‪<3‬‬
‫تگ ‪ h3‬تا ‪ h6‬برای معرفی زیرمجموعه های محتوای صفحه استفاده میشوند و اهمیت آنها از ‪ h1‬و ‪ h2‬به‬ ‫>‪<4‬‬
‫مراتب کمتر است‪ .‬محدودیتی در استفاده از آنها وجود ندارد‪.‬‬
‫ترتیب استفاده از تگ های هدینگ باید رعایت شود‪ .‬ترجیحا بعد از تگ ‪ h1‬از تگ ‪ h2‬استفاده میشود و‬ ‫>‪<5‬‬
‫برای زیرمجموعه های آن از تگ ‪.h3‬‬
‫‪30‬‬

‫>‪<body‬‬
‫>”‪<a href=“URL” target=“_blank” rel=“nofollow” title=“about link‬‬
‫‪Anchor Text‬‬
‫>‪</a‬‬
‫>‪</body‬‬
‫تگ ‪ a‬برای لینک سازی داخلی و خارجی استفاده میشود‪.‬‬ ‫>‪<1‬‬

‫‪ Href‬برای هر لینک ضروری بوده و شامل آدرس صفحه ای است که به آن لینک داده ایم‪.‬‬ ‫>‪<2‬‬
‫‪ Rel‬اجباری نیست ولی برای ‪ Nofollow‬کردن لینک های خارجی استفاده میشود‪.‬‬ ‫>‪<3‬‬
‫‪ target‬مشخص میکند که صفحه جدید به چه صورتی باز شود ‪ _blank‬یعنی بعد از کلیک آدرس در‬ ‫>‪<4‬‬
‫صفحه جدیدی باز شود‪.‬‬
‫‪ Anchor Text‬متن لینک شده است و صفحه هدف در این عبارت ارزش و اعتبار کسب میکند‪.‬‬ ‫>‪<5‬‬
‫‪ title‬زمانیکه موس بر روی لینک قرار میگیرد نشان داده میشود و برای لینک های بدون ‪ Anchor‬مناسب‬ ‫>‪<6‬‬
‫است‪.‬‬
‫‪31‬‬

‫>‪<body‬‬
‫”‪<img width=“300” height=“400” alt=“Alternative Text” src=“URL‬‬
‫‪srcset=“mages/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,‬‬
‫>‪images/space-needle-hd.jpg 600w” /‬‬
‫>‪</body‬‬
‫تگ ‪ img‬یکی از تگ های تاثیرگذار و مهم در سئو است‪.‬‬ ‫>‪<1‬‬

‫ویژگی های ‪ alt ،height ،width‬و ‪ src‬باید در تمام تگ های ‪ img‬قرار داده شود‪.‬‬ ‫>‪<2‬‬
‫تگ ‪ alt‬با عنوان متن جایگزین شناخته میشود و موضوع تصویر براساس این متن تعیین میشود‪.‬‬ ‫>‪<3‬‬
‫یکسان بودن ابعاد واقعی تصویر با ابعاد نمایش آن از فاکتورهای موثر بر سرعت صفحات است‪ .‬نمایش‬ ‫>‪<4‬‬
‫تصویر بزرگ در سایزهای کوچک میتواند حجم صفحه را افزایش دهد‪ .‬به همین منظور از آدرس دهی‬
‫ریسپانسیو استفاده میکنیم‪.‬‬
‫‪32‬‬

‫>‪<body‬‬
‫>‪<span‬‬
‫‪Some Data‬‬
‫>‪</span‬‬
‫>‪</body‬‬
‫تگ ‪ span‬از انواع ‪ non-semantic‬است و مفهوم خاصی ندارد‪.‬‬ ‫>‪<1‬‬

‫از این تگ معموال در طراحی ظاهر گرافیکی سایت و یا المان های کوچک در صفحه استفاده میکنیم‪.‬‬ ‫>‪<2‬‬
‫‪ Span‬میتواند در داخل هریک از تگ های ‪ html‬دیگر استفاده شود ولی پیشنهاد میشود در ‪ a‬و ‪ h‬قرار‬ ‫>‪<3‬‬
‫داده نشود‪.‬‬
‫‪33‬‬

‫>‪<body‬‬
‫>‪<p‬‬
‫‪some text about 3 or 4 lines, including img, a and span‬‬
‫>‪</p‬‬
‫>‪</body‬‬
‫تگ ‪ p‬برای محتوای متنی استفاده میشود و نشان دهنده یک پاراگراف است‪.‬‬ ‫>‪<1‬‬
‫پیشنهاد میشود پاراگراف ها حداکثر ‪ 4‬خط باشند و فاصله خطوط از هم استاندارد باشد‪.‬‬ ‫>‪<2‬‬
‫تگ ‪ p‬میتواند درون خود لینک‪ ،‬تصویر و یا ‪ span‬داشته باشد‪.‬‬ ‫>‪<3‬‬
‫تگ های ‪ h‬را در داخل تگ ‪ p‬استفاده نمیکنیم‪.‬‬ ‫>‪<4‬‬
‫‪34‬‬

‫>‪<body‬‬
‫>"‪<blockquote cite=“Source URL‬‬
‫‪Some Texts.‬‬
‫>‪</blockquote‬‬
‫>‪</body‬‬
‫‪ Blockquote‬برای نمایش نقل قول از یک سایت یا صفحه اینترنتی استفاده میشود‪.‬‬ ‫>‪<1‬‬
‫‪ Cite‬به شما اجازه میدهد بدون لینک دهی مستقیم به مرجع آدرس آن را به گوگل معرفی کنید‪.‬‬ ‫>‪<2‬‬
‫محتوای ‪ cite‬در صفحه به کاربر نمایش داده نمیشود‪.‬‬ ‫>‪<3‬‬
‫زمانیکه بخشی از محتوا را از سایت دیگری عینا نقل میکنیم با این تگ مرجع را مشخص می کنیم‪.‬‬ ‫>‪<4‬‬
‫در داخل ‪ blockquote‬میتواند از تگ های ‪ span ،img ،a‬و ‪ h‬استفاده نمود‪.‬‬ ‫>‪<5‬‬
‫‪35‬‬

‫‪HTML5 semantic Tags‬‬
‫تگ های معنایی جدید در ‪HTML5‬‬
‫در نسخه پنجم ‪ HTML‬تگ های معنایی جدیدی اضافه شده است که میتوانند جایگزین مناسبی برای تگ‬
‫بدون معنای ‪ div‬باشند‪ .‬استفاده از این تگ ها درک ساختار صفحه برای گوگل را راحت تر میکند‪.‬‬
‫>‪<article‬‬ ‫>‪<main‬‬
‫>‪<aside‬‬ ‫>‪<mark‬‬
‫>‪<details‬‬ ‫>‪<nav‬‬
‫>‪<figcaption‬‬ ‫>‪<section‬‬
‫>‪<figure‬‬ ‫>‪<summary‬‬
‫>‪<footer‬‬ ‫>‪<time‬‬
‫>‪<header‬‬
‫‪36‬‬

‫>‪<section‬‬
‫>‪<h1>WWF</h1‬‬
‫>‪<p>The World Wide Fund for Nature (WWF) is....</p‬‬
‫>‪</section‬‬
‫‪ Section‬برای جداسازی بخشی از محتوا در صفحه استفاده میشود‪.‬‬ ‫>‪<1‬‬

‫هر ‪ section‬باید حداقل یک تگ ‪ h‬داشته باشد‪.‬‬ ‫>‪<2‬‬
‫هر صفحه میتواند شامل چندین ‪ section‬مختلف باشد‪.‬‬ ‫>‪<3‬‬
‫‪37‬‬

‫>‪<article‬‬
‫>‪<h1>What Does WWF Do?</h1‬‬
‫‪<p>WWF's mission is to stop the degradation of our planet's natural environment,‬‬
‫>‪and build a future in which humans live in harmony with nature.</p‬‬
‫>‪</article‬‬
‫‪ article‬یک محتوای مستقل را در صفحه نمایش میدهد و مفهوم آن وابسته به بقیه صفحه نیست‪.‬‬ ‫>‪<1‬‬
‫در هر ‪ article‬میتوان چندین ‪ section‬داشت‪ .‬این روش برای صفحه مقاله یا خبر استفاده میشود‪.‬‬ ‫>‪<2‬‬
‫در هر ‪ section‬میتوان چند ‪ section‬یا ‪ article‬داشت‪ .‬این روش برای صفحات دسته بندی مقاالت و‬ ‫>‪<3‬‬
‫محصوالت استفاده میوشد‪.‬‬
‫محدودیتی در استفاده از تگ ‪ article‬در یک صفحه وجود ندارد‪.‬‬ ‫>‪<4‬‬

‫هر ‪ article‬باید حداقل یک تگ ‪ h‬داشته باشد‪.‬‬ ‫>‪<5‬‬
‫‪38‬‬

<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
‫ و یا بصورت‬article ‫ و‬section ‫ مشخص کننده عنوان یک بخش یا کل صفحه است و میتواند در‬header <1>
.‫مستقل استفاده شود‬
.‫ داشت‬header ‫در یک صفحه میتوان چندین تگ‬ <2>

،‫ منو‬،‫ یک بار و برای جداسازی بخش های عمومی صفحه مانند لوگو‬header ‫پیشنهاد میشود از تگ‬ <3>
.‫حساب کاربری و شبکه های اجتماعی استفاده شود‬
39

‫>‪<article‬‬
‫>‪<footer‬‬
‫>‪<p>Posted by: Hege Refsnes</p‬‬
‫>"‪<p>Contact information: <a href="mailto:someone@example.com‬‬
‫>‪someone@example.com</a>.</p‬‬
‫>‪</footer‬‬
‫>‪</article‬‬
‫‪ footer‬مشخص کننده محتوای ضمیمه یا دسترسی های مهم یک بخش یا کل صفحه است و میتواند‬ ‫>‪<1‬‬
‫در ‪ section‬و ‪ article‬و یا بصورت مستقل برای کل صفحه استفاده شود‪.‬‬
‫در یک صفحه میتوان چندین تگ ‪ footer‬داشت‪.‬‬ ‫>‪<2‬‬

‫پیشنهاد میشود از تگ ‪ footer‬یک بار و برای نمایش اطالعات کاربردی مانند لینک های شرایط و قوانین‪،‬‬ ‫>‪<3‬‬
‫متن کپی رایت‪ ،‬شبکه های اجتماعی‪ ،‬اطالعات تماس‪ ،‬نماد اعتماد و ‪ ...‬استفاده شود‪.‬‬
‫‪40‬‬

‫>‪<aside‬‬
‫>‪<h4>Epcot Center</h4‬‬
‫>‪<p>The Epcot Center is a theme park in Disney World, Florida.</p‬‬
‫>‪</aside‬‬
‫‪ aside‬یک محتوای وابسته به صفحه یا ‪ section‬را شامل میشود‪.‬‬ ‫>‪<1‬‬

‫از تگ ‪ aside‬معموال برای نمایش سایدبار صفحه استفاده میکنیم‪.‬‬ ‫>‪<2‬‬
‫استفاده از ‪ aside‬موجب میشود محتوای تکراری موجود در سایدبار بر موضوع اصلی صفحه تاثیر نداشته‬ ‫>‪<3‬‬
‫باشد و جایگاه شما براساس اطالعات موجود در ‪ article‬یا ‪ section‬تعیین شود‪.‬‬
‫محدودیتی در استفاده از تگ ‪ aside‬در یک صفحه وجود ندارد‪.‬‬ ‫>‪<4‬‬

‫منوی های داخلی سایت‪ ،‬بنرهای تبلیغاتی‪ ،‬نظرسنجی و ‪ ...‬را در سایدبار صفحه قرار میدهیم‪.‬‬ ‫>‪<5‬‬
‫‪41‬‬

<body>
<header></header>
<main>
<p>Google Chrome, Firefox, and Internet Explorer </p>
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free.</p>
</article>
</main>
<aside>
….
</aside>
<footer></footer>
</body>
42

‫‪ Main‬مشخص کننده محتوای اصلی صفحه است‪.‬‬ ‫>‪<1‬‬
‫در هر صفحه فقط یک ‪ Main‬میتوان داشت‪.‬‬ ‫>‪<2‬‬
‫‪ Main‬میتواند در داخل خود شامل انواع تگ های ‪ HTML5‬باشد ولی نباید زیر مجموعه هریک از آنها قرار‬ ‫>‪<3‬‬
‫گیرد و مستقیما زیرمجموعه ‪ body‬خواهد بود‪.‬‬
‫مهمترین فضایی که گوگل برای شناسایی محتوای اصلی صفحه نگاه میکند ‪ Main‬است‪.‬‬ ‫>‪<4‬‬
‫استفاده از تگ های ‪ HTML5‬به تنهایی نمیتواند تضمین درک درست گوگل از محتوای صفحات شما‬ ‫>‪<5‬‬
‫باشد‪ .‬برای اطمینان از شناخت محتوای اصلی صفحه از نشانه گذاری های استاندارد استفاده میکنیم‪.‬‬
‫‪43‬‬

‫‪Page Speed Optimization‬‬
‫بهینه سازی سرعت سایت‬
‫افزایش سرعت لود صفحات تاثیر بسیار باالیی بر بهبود تجربه کاربری و در نتیجه بهبود وضعیت سئو‬
‫سایت شما دارد‪ .‬سرعت صفحات یکی از فاکتورهای گوگل برای تعیین جایگاه در نتایج است‪ .‬مهمترین‬
‫مباحث مطرح شده در این بخش به شرح زیر است‪:‬‬
‫‪First Contentful Paint‬‬ ‫‪ -1‬اولین نمایش محتوایی از صفحه‬
‫‪Front-end & back-end‬‬ ‫‪ -2‬عوامل تاثیرگذار بر سرعت صفحه‬
‫‪Image Optimization‬‬ ‫‪ -3‬بهینه سازی تصاویر‬
‫‪GTmetrix‬‬ ‫‪ -4‬آموزش کار با ابزارهای تحلیلگر‬
‫‪Front-end Speed Optimization‬‬ ‫‪ -5‬تکنیک های افزایش سرعت صفحات‬
‫‪44‬‬

‫‪First Contentful Paint‬‬
‫اولین نمایش محتوایی از صفحه‬
‫‪ First Paint‬زمان الزم تا شروع اولین رندر در صفحه است‪ .‬اولین رندر ممکن است تغییر رنگ بک گراند یا‬
‫حتی نمایش عنوان در نوار مرورگر صفحه باشد‪ .‬در این مرحله هنوز کاربر محتوای صفحه را مشاهده نکرده‪.‬‬
‫‪45‬‬

‫‪ First Contentful Paint‬زمان الزم برای لود و نمایش همه محتوای موجود در صفحه است‪ .‬در این مرحله‬
‫کاربر میتواند از امکانات صفحه به خوبی استفاده کرده و به محتوا دسترسی داشته باشد‪.‬‬
‫‪46‬‬

‫‪ Onload Time‬زمان الزم برای لود شدن تمام محتوای صفحه شامل تصاویر و فایل های ‪ CSS‬است و عمال‬
‫لودینگ مرورگر در این مرحله پایان می یابد‪.‬‬
‫‪47‬‬

‫زمان الزم برای ‪ First Contentful Paint‬مهمترین زمان برای تعیین سرعت سایت و تجربه کاربری آن است‪.‬‬
‫در بسیاری از سایت ها ‪ First Contentful Paint‬و ‪ First Paint‬بسیار نزدیک به هم هستند و تنها برای‬
‫صفحاتی که محتوای آنها بسیار زیاد است این دو عدد از هم فاصله میگیرند‪.‬‬
‫ابزارهای آنالیز مانند ‪ Gtmetrix‬تنها این سه زمان را برای تعیین نمره سایت مورد توجه قرار میدهد و کلیه‬
‫پیشنهادات آن برای بهبود آنهاست‪ .‬در حالیکه سرعت پاسخ گویی سرور نیز بر زمان نمایش صفحه به‬
‫کاربر تاثیر گذار است‪.‬‬
‫‪48‬‬

‫‪Front-end & Back-end‬‬
‫عوامل تاثیرگذار بر سرعت صفحه‬
‫زمان واقعی لود یک صفحه تنها به محتوای خروجی و حجم تصاویر و فایل های جانبی وابسته نیست‪.‬‬
‫بلکه سرعت پاسخ گویی سرور و زمان ارتباط مرورگر با آن یکی از فاکتورهای تاثیرگذار است‪.‬‬
‫صفحهخروجی‬
‫جانبی‬ ‫ساخت‬
‫های‬ ‫محتوای‬
‫فایل‬‫مرورگروو‬
‫دریافت‬
‫تصاویر‬‫توسط‬‫دریافتیو‬
‫سرور‬
‫دریافت‬ ‫محتوای با‬
‫کاربر و‬‫مرورگر‬ ‫ارتباط‬
‫آنالیز‬
‫خروجی به‬ ‫برای‬
‫الزمبرای‬
‫نمایش‬ ‫نیاز‬
‫برای‬‫زمان‬
‫مورد‬
‫زمانالزم‬
‫زمان‬
‫‪49‬‬

‫‪Front-end & Back-end‬‬
‫عوامل تاثیرگذار بر سرعت صفحه‬
‫برای افزایش سرعت پاسخ گویی سرور تکنیک های مختلفی وجود دارد‪ .‬این سرعت نه تنها به منابع اصلی‬
‫سرور مانند ‪ CPU‬و ‪ RAM‬وابسته است بلکه به موقعیت مکانی کاربر و سرور و بهینه بودن کدنویسی‬
‫هسته سایت نیز مربوط میشود‪.‬‬
‫مهمترین روش های افزایش سرعت پاسخ گویی سمت سرور به شرح زیر است‪:‬‬
‫‪ -1‬استفاده از سرور اختصاصی‬
‫‪ -2‬استفاده از سیستم های کش سمت سرور‬
‫‪ -3‬استفاده از ‪CDN‬‬
‫‪50‬‬

‫‪Image Optimization‬‬
‫بهینه سازی تصاویر‬
‫تصاویر بیشترین تاثیر را در حجم محتوای صفحه و زمان لود آن دارند‪ .‬به همین دلیل بهینه سازی تصاویر‬
‫یکی از بهترین تکنیک ها برای افزایش سرعت سایت است‪.‬‬
‫برای بهینه سازی تصاویر سه تکنیک اصلی وجود دارد‪:‬‬
‫‪ -1‬بارگذاری تصاویر در سایز واقعی آنها‬
‫‪ -2‬فشرده سازی تصاویر متناسب با وب‬
‫‪ -3‬استفاده از تصاویر جایگزین در موبایل و تبلت‬
‫‪51‬‬

‫زمانیکه شما تصاویر را بدون رعایت استانداردهای بهینه سازی در صفحه قرار میدهید‪ .‬مرورگر دو مرحله‬
‫اضافی برای برای نمایش آن طی میکند‪.‬‬
‫به طور مثال عرض نمایش تصویر ‪ 300‬پیکسل است ولی عکس بارگذاری شده ‪ 2400‬پیکسل است‪.‬‬
‫‪ -1‬مرورگر ابتدا تصویر اصلی با حجم نسبتا باال را دانلود میکند‪.‬‬
‫‪ -2‬سپس این تصویر را به اندازه نمایش آن در صفحه ‪ rescale‬میکند‪.‬‬
‫‪ -3‬تصویر را در فضای تعیین شده و با سایز همان فضا نمایش میدهد‪.‬‬
‫‪52‬‬

Image Optimization
‫روند نمایش تصاویر بهینه نشده‬
53
Page Speed Optimization

‫‪ -1‬قبل از بارگذاری یک تصویر دقت کنید که در کجای سایت شما و با چه ابعادی نمایش داده میشود‪.‬‬
‫برای اینکار با استفاده از کروم و ابزار ‪ inspect element‬بزرگترین سایز کادر نمایش تصویر را بدست آورید‪.‬‬
‫‪ -2‬یک فایل جدید دقیقا با همین ابعاد در فتوشاپ ایجاد کرده و تصویر مورد نظر خود را در آن کادر قرار‬
‫دهید‪ .‬دقت کنید که ممکن است بخش هایی از تصویر شما با تبدیل به این سایز دیده نشود‪.‬‬
‫‪ -3‬فایل جدید را با فرمت ‪ png‬یا ‪ jpg‬بر روی کامپیوتر ذخیره کنید‪.‬‬
‫‪ -4‬نسخه سایزبندی شده را در سایت ‪ optimizilla‬آپلود کرده و نسخه فشرده شده را دانلود نمایید‪.‬‬
‫‪ -5‬تصویر را جایگزین تصویر بهینه نشده در سایت خود کنید‪.‬‬
‫‪54‬‬

Image Optimization
‫بزرگترین نمایش تصویر در سایت‬
55

Image Optimization
‫سایز کادر نمایش تصویر در بزرگترین حالت‬
56

Image Optimization
‫تغییر ابعاد تصویر به سایز کادر سایت‬
57

Image Optimization
‫ و دریافت نسخه بهینه شده‬optimizilla ‫آپلود در سایت‬
58

‫‪Gtmetrix.com‬‬
‫آموزش ابزار تحلیل گر سرعت صفحه‬
‫سایت ‪ Gtmetrix‬یک ابزار رایگان با امکانات بسیار مناسب برای آنالیز سرعت صفحات سایت است‪.‬‬
‫با عضویت رایگان در این سایت عالوه بر تهیه گزارش امکان ذخیره سازی آنها و نمایش روند تغییرات بر‬
‫روی یک نمودار را خواهید داشت‪.‬‬
‫برای تهیه هر گزارش شما امکان تعیین موقعیت مکانی‪ ،‬سرعت اینترنت و نوع مرورگر را دارید‪.‬‬
‫پیشنهادات این سایت به شما کمک میکند مشکالت سایت را شناسایی و مرتفع کنید‪.‬‬
‫نمره دهی سایت براساس سرعت سایت در ‪ front-end‬بوده و در امتیاز نهایی سرعت پاسخ گویی سرور‬
‫لحاظ نمیشود‪.‬‬
‫‪59‬‬

‫آدرس صفحه مورد نظر خود برای آنالیز را وارد کنید‬
‫تعیین موقعیت مکانی تست سرعت‬ ‫تعیین نوع مرورگر برای تست‬ ‫تعیین سرعت اینترنت تست‬
‫تهیه ویدئو از فرآیند لود صفحه‬ ‫جلوگیری از لود تبلیغات در صفحه‬ ‫در نظر نگرفتن اتفاقات بعد از لود اولیه‬
‫‪60‬‬

‫دسترسی سریع به سوابق گزارشات‬
‫اطالعات گزارشات پیشین با قابلیت نمایش مجدد‬
‫‪61‬‬

‫تست مجدد‬
‫مقایسه دو گزارش یا سایت‬

‫شرایط تست صفحه‬ ‫تغییر تنظیمات تست‬
‫اتست صفحه در بازه های زمانی مشخص‬
‫اطالع رسانی در شرایط خاص‬
‫دانلود نسخه ‪ pdf‬گزارش‬
‫امتیاز براساس استانداردهای یاهوامتیاز براساس استانداردهای گوگل‬ ‫زمان لود صفحه‬ ‫حجم کل صفحه‬ ‫تعداد درخواست ها به سرور‬
‫‪62‬‬

‫امتیاز ‪ Yslow‬مالک ما برای تصمیم گیری اصلی نیست‪.‬‬
‫زمان لود صفحه مهمترین فاکتور در این گزارش است‪ .‬اگر کمتر از ‪ 2‬ثانیه باشد در بهترین شرایط ممکن‬
‫است و امتیاز صفحه اهمیت زیادی نخواهد داشت‪.‬‬
‫حجم صفحه تاثیر زیادی بر مصرف پهنای باند و سرعت صفحه دارد که باید به کمترین حد ممکن برسد‪.‬‬
‫تعداد درخواست های به سرور را باید تا حد امکان کاهش دهیم تا فشار بر روی سرور در تعداد‬
‫بازدیدکنندگان زیاد کاهش یابد‪.‬‬
‫‪63‬‬

‫فاکتورهای تاثیرگذار در ‪pagespeed‬‬ ‫هر مورد از ‪100‬‬
‫متوسط‬
‫شما در‬
‫مقایسه با‬
‫شما در امتیاز‬
‫امتیازخطا‬
‫نوع‬ ‫درجه اهمیت‬
‫‪64‬‬

‫در ادامه تمامی گزینه های تاثیرگذار بر سرعت در بخش ‪ page speed‬را بررسی میکنیم‪.‬‬
‫روند بهینه سازی را از مواردی که درجه اهمیت باالتری دارند شروع کنید‪ .‬تصحیح این موارد تاثیر بیشتری‬
‫در کسب نمره باالتر خواهد داشت‪.‬‬
‫در برخی موارد با رفع یک ایراد نمره شما کاهش می یابد! زیرا مشکالت دیگر نمود بیشتری خواهد داشت‪.‬‬
‫به امتیاز متوسط توجه نکنید و تالش کنید تا همه موارد را به نمره های باالی ‪ 95‬برسانید‪ .‬در نظر داشته‬
‫باشید که هدف اصلی ما کاهش زمان لود صفحه است نه امتیاز باال‪.‬‬
‫‪65‬‬

‫‪Avoid a character set in the meta tag‬‬
‫این خطا تقریبا در ‪ 100‬درصد سایت ها مرتفع شده است زیرا شرکت های هاستینگ تنظیمات الزم را بر‬
‫روی سرورهای خود انجام میدهند‪.‬‬
‫این خطا پیشنهاد میکند به جای استفاده از تگ ‪ Meta‬برای مشخص کردن نوع کاراکتر در صفحه این‬
‫اطالعات مستقیما در اولین ارتباط با سرور دریافت شود‪ .‬با این کار عمال مرورگر شما به کد زیر برای نمایش‬
‫محتوا نیازی ندارد‪.‬‬
‫>‪<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/‬‬
‫‪PRIORITY:‬‬ ‫‪Low‬‬
‫‪TYPE:‬‬ ‫‪Content‬‬
‫‪66‬‬ ‫‪Average:‬‬ ‫‪100%‬‬

‫‪Specify a character set early‬‬
‫همانطور که در بخش قبلی گفته شد نوع کاراکتر صفحه بهتر است از طرف سرور به مرورگر ارسال شود و‬
‫این عملیات برای تمام فایل های لود شده در صفحه ضروری است‪.‬‬
‫ممکن است سایت شما به خوبی این گزینه را رعایت کرده باشد ولی فایل های جانبی که از ابزارهای‬
‫تبلیغاتی یا آمارگیر در صفحه شما لود میشوند این ویژگی را نداشته باشند‪ .‬در این شرایط باید از آن ابزار‬
‫چشم پوشی کنید یا به بخش پشتیبانی آنها اطالع دهید‪.‬‬
‫فایل های لود شده توسط ابزارک‬
‫های تبلیغاتی در سایت‬ ‫‪PRIORITY:‬‬ ‫‪Medium‬‬
‫‪67‬‬ ‫‪Average:‬‬ ‫‪100%‬‬

‫‪Avoid bad requests‬‬
‫وجود این خطا در گزارش شما نشان میدهد که یکی از منابع یا فایل های فراخوان شده در صفحه قابل‬
‫دسترسی نیست و مرورگر هنگام فراخوان آن خطای ‪ 404‬یا ‪ 410‬دریافت میکند‪.‬‬
‫‪ Gtmetrix‬آدرس فایل هایی که در صفحه شما فراخوان شده ولی در دسترس نیستند را به شما اعالم‬
‫میکند‪ .‬برای رفع این خطا باید محل فراخوان این فایل در سایت خود را شناسایی کرده و آدرس آن را‬
‫تصحیح کنید‪.‬‬
‫این خطا معموال به دلیل اشتباهات طراح هنگام کدنویسی و یا خطای مدیر سایت با حذف یکی از فایل‬
‫های مهم از روی سرور ایجاد میشود‪.‬‬
‫‪PRIORITY:‬‬ ‫‪High‬‬
‫‪68‬‬ ‫‪Average:‬‬ ‫‪97%‬‬

‫‪Remove query strings from static resources‬‬
‫بسیاری از سایت ها هنگام فراخوان فایل های ‪ CSS‬و ‪ JS‬نسخه فایل را با استفاده از ? در انتهای آن قرار‬
‫میدهند‪ .‬با به روزرسانی نسخه کاربران فایل جدید را دریافت میکنند و نسخه کش شده را نمی بینند‪.‬‬
‫این کار باعث میشود که حتی فایل اصلی که نسخه آن مدت هاست عوض نشده ‪ Cache‬نشود و هر بار‬
‫برای کاربر از سرور دریافت گردد‪ .‬به جای استفاده از عالمت سوال ورژن فایل را در نام آن ذکر کنید‪.‬‬
‫استفاده از آدرس دهی داینامیک‬
‫‪PRIORITY:‬‬ ‫‪Low‬‬
‫‪69‬‬ ‫‪Average:‬‬ ‫‪89%‬‬

//remove script versions
function _remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );
‫وردپرس نیز به صورت پیش فرض این عبارات را به انتهای فایل ها اضافه میکند که با یک فانکشن چند‬
.‫خطی قابل رفع است‬
70

‫‪Avoid landing page redirects‬‬
‫در صورتی که صفحه مورد نظر شما به آدرس دیگری ریدایرکت شده باشد این خطا را مشاهده خواهید کرد‪.‬‬
‫عمال میتوان گفت شما از ابتدا آدرس اشتباهی را برای آنالیز وارد کرده اید‪.‬‬
‫ریدایرکت صفحات مستقیما از سمت سرور شما انجام میشود و این عملیات موجب تاخیر در پاسخ گویی‬
‫سرور به درخواست مرورگر میشود‪ .‬از همین جهت ریدایرکت میتواند تاثیر منفی بر سرعت داشته باشد‪.‬‬
‫یکی از دالیل نمایش این خطا وارد کردن آدرس اشتباه در بخش آنالیز است‪ .‬یعنی سایت شما بدو ن ‪www‬‬
‫باز میشود ولی تست سرعت را بر روی نسخه با ‪ www‬انجام داده اید‪.‬‬
‫‪TYPE:‬‬ ‫‪Server‬‬
‫‪71‬‬ ‫‪Average:‬‬ ‫‪98%‬‬

‫‪Enable Keep-Alive‬‬
‫زمانیکه اولین ارتباط مرورگر با سرور برقرار میشود‪ ،‬سرور اجازه دریافت یک فایل را به او میدهد‪ .‬برای‬
‫دریافت فایل بعدی باید یک درخواست جدید به سرور ارسال شود‪.‬‬
‫با فعال کردن ‪ Keep-Alive‬دیگر برای دریافت فایل های بعدی نیازی به درخواست مجدد به سرور نبوده و‬
‫مرورگر به سرعت تمام درخواست های خود را دریافت میکند‪.‬‬
‫این گزینه معموال از طرف شرکت های هاستینگ فعال میشود‪ .‬اگر نبود کد زیر را در فایل ‪ htaccess‬خود‬
‫قرار دهید‪ ،‬در صورت عدم رفع مشکل با پشتیبانی هاست تماس بگیرید‪.‬‬
‫>‪<ifModule mod_headers.c> Header set Connection keep-alive </ifModule‬‬
‫‪72‬‬ ‫‪Average:‬‬ ‫‪96%‬‬

‫‪Leverage browser caching‬‬
‫فعال سازی کش مرورگر موجب میشود تا فایل های جانبی مانند تصاویر و ‪ CSS‬و ‪ JS‬تنها در اولین بازدید‬
‫از سایت شما توسط مرورگر دانلود شوند و در بازدیدهای بعدی از حافظه مرورگر فراخوان شوند‪.‬‬
‫با این کار هم سرعت نمایش صفحه برای کاربران بسیار افزایش یافته و هم مصرف پهنای باند شما به طرز‬
‫چشم گیری کاهش می یابد‪.‬‬
‫با این روش شما عمال تاریخ انقضای فایل های نمایش داده شده برای مرورگر را مشخص میکنید و تا سر‬
‫رسیدن این تاریخ اطالعات را بر روی حافظه مرورگر (دستگاه کاربر) ذخیره میکنید‪.‬‬
‫‪73‬‬ ‫‪Average:‬‬ ‫‪60%‬‬

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
‫ خود‬htaccess ‫ اگر نبود کد زیر را در فایل‬.‫این گزینه معموال از طرف شرکت های هاستینگ فعال میشود‬
.‫ در صورت عدم رفع مشکل با پشتیبانی هاست تماس بگیرید‬،‫قرار دهید‬
74

‫‪Enable gzip compression‬‬
‫‪ Gzip‬موجب میشود فایل های ‪ CSS ،HTML‬و ‪ Javascript‬سمت سرور زیپ شده و برای مرورگر ارسال‬
‫شوند سپس توسط مرورگر بازگشایی و استفاده میشوند‪.‬‬
‫با این روش حجم هریک از این فایل ها نزدیک به ‪ 70‬درصد کاهش می یابد و عالوه بر کاهش حجم‬
‫صفحه سرعت لود آن را نیز افزایش میدهد‪.‬‬
‫برای استفاده از ‪ gzip‬باید ماژول مورد نظر بر روی سرور شما فعال باشد‪ .‬بیشتر هاستینگ ها این گزینه را‬
‫فعال میکنند زیرا مصرف منابع خودشان را کاهش میدهد‪ .‬اگر بر روی سایت شما فعال نبود کد زیر را در‬
‫فایل ‪ htaccess‬قرار دهید‪.‬‬
‫‪75‬‬ ‫‪Average:‬‬ ‫‪85%‬‬

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf # Remove browser bugs (only needed for really old browsers)
AddOutputFilterByType DEFLATE application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html
AddOutputFilterByType DEFLATE application/xhtml+xml BrowserMatch ^Mozilla/4\.0[678] no-gzip
AddOutputFilterByType DEFLATE application/xml BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
AddOutputFilterByType DEFLATE font/opentype Header append Vary User-Agent
AddOutputFilterByType DEFLATE font/otf </IfModule>
AddOutputFilterByType DEFLATE font/ttf
76

Specify a Vary: Accept-Encoding header
‫ در صورت غیرفعال بودن‬،‫ وجود دارد یا نه‬encoding ‫این دستور در هاست شما تعیین میکند که آیا اجازه‬
.‫ شما به درستی عمل نمیکند‬gzip ‫عمال‬
‫ قرار‬htaccess ‫ اگر با این خطا مواجه شدید کد زیر را در فایل‬.‫این گزینه معموال در هاست شما فعال است‬
.‫دهید‬
<IfModule mod_headers.c>
<FilesMatch ".(js|css|xml|gz|html)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
PRIORITY: Low
TYPE: Server
77 Average: 96%

Specify a cache validator
‫ البته به طور پیش‬.‫ این مورد به صورت خودکار برطرف میشود‬Leverage Browser Caching ‫با رفع مشکل‬
.‫فرض این گزینه بر روی اکثر سرورها فعال است‬
PRIORITY: High
TYPE: Server
78 Average: 94%

‫‪Specify image dimensions‬‬
‫همانطور که در بخش تگ های ‪ HTML‬گفته شد ویژگی های ‪ width‬و ‪ height‬برای یک تصویر ضروری‬
‫هستند‪ .‬اگر شما ابعاد تصویر را تعیین نکنید مرورگر مجبور به محاسبه آن خواهد بود‪.‬‬
‫حتی اگر شما ابعاد تصویر را در تگ ‪ img‬قرار دهید ولی این ابعاد با ابعاد واقعی تصویر یکسان نباشد‬
‫مرورگر شما با این مشکل مواجه میشود ولی ‪ gtmetrix‬این خطا را نمایش نمیدهد‪.‬‬
‫برای رفع این خطا باید کلیه تصاویر به کار رفته در صفحه دارای عرض و ارتفاع باشند‪.‬‬
‫>‪<img width=“300” height=“400” alt=“Alternative Text” src=“URL” /‬‬
‫‪PRIORITY:‬‬ ‫‪Medium‬‬
‫‪TYPE:‬‬ ‫‪Images‬‬
‫‪79‬‬ ‫‪Average:‬‬ ‫‪98%‬‬

‫‪Serve scaled images‬‬
‫این خطا به این معنی است که تصویر لود شده در صفحه بسیار بزرگتر از فضایی است که در آن نمایش‬
‫داده شده است‪.‬‬
‫در نظر داشته باشید که حتی اگر از تصاویر ریسپانسیو استفاده کنیم بازهم در برخی از سایزها ممکن‬
‫است نمایش تصویر با سایز واقعی آن یکسان نباشد‪ .‬اگر این اختالف کمتر از ‪ 10‬درصد باشد احتناب‬
‫ناپذیر بوده و معموال خطا محسوب نمیشود‪.‬‬
‫برای رفع این خطا مطابق آموزش بهینه سازی تصاویر که پیش تر صحبت کرده ایم عمل کنید‪.‬‬
‫‪80‬‬ ‫‪Average:‬‬ ‫‪75%‬‬

‫‪Combine images using CSS sprites‬‬
‫به طور معمول هر سایت از آیکون های کوچک بسیاری برای تجربه کاربری بهتر استفاده میکند ‪ .‬بعنوان‬
‫مثال برای در کنار دکمه ورود یا باکس جستجو یک آیکون کوچک قرار داده میشود‪.‬‬
‫اگر تعداد تصاویر به کار رفته در صفحه با فرمت های ‪ png‬و ‪ gif‬بیشتر از ‪ 4‬عدد باشد این خطا به شما‬
‫نمایش داده میشود‪ .‬در این حالت پیشنهاد میشود با تکنیک ‪ CSS Sprite‬تصاویر را در یک فایل جمع آوری‬
‫کرده و با استفاده از دستورات ‪ CSS Background‬در فضای مورد نظر نشان دهید‪.‬‬
‫آدرس تصاویری که پیشنهاد شده ‪ merge‬شوند‬ ‫‪PRIORITY:‬‬ ‫‪High‬‬
‫‪81‬‬ ‫‪Average:‬‬ ‫‪89%‬‬

Combine images using CSS sprites
‫نمونه فایل شامل چند آیکون کوچک‬
PRIORITY: High
TYPE: Images
82 Average: 89%

.shopicon {
display: inline-block;
width: 50px;
height: 50px;
background: url(shopcons.png) no-repeat;
{
span.shopicon.picon {
background-position: -445px -8px;
}
span.shopicon.outicon {
background-position: -814px -8px;
}
83

‫‪Avoid CSS @import‬‬
‫دستور ‪ @import‬در فایل های ‪ CSS‬قدیمی استفاده میشده است‪ .‬در این روش به جای فراخوان چند فایل‬
‫در صفحه یک فایل قرار داده میشد و با این دستور محتوای فایل های دیگر در آن لود میشد‪.‬‬
‫با این کار شما تعداد درخواست های ارسالی به سرور را کاهش نمی دهید بلکه نحوه فراخوان آن را تغییر‬
‫میدهید‪ .‬برای رفع این مشکل به جای فراخوان یک فایل در فایل دیگر محتوای آن را به صورت کامل در‬
‫فایل اصلی ‪ CSS‬خود کپی کنید‪.‬‬
‫یکسان سازی فایل های ‪ CSS‬تعداد درخواست های ارسالی به سرور را کاهش میدهد و از این نظر هم بر‬
‫افزایش سرعت سایت شما تاثیرگذار است‪.‬‬
‫‪PRIORITY:‬‬ ‫‪Medium‬‬
‫‪TYPE:‬‬ ‫‪CSS‬‬
‫‪84‬‬ ‫‪Average:‬‬ ‫‪98%‬‬

‫‪Minify CSS‬‬
‫هر فایل ‪ CSS‬برای فراخوانی در سایت نیازمند یک درخواست مجزا به سرور است و با توجه به اینکه فایل‬
‫های ‪ CSS‬در هدر صفحه لود میشوند تا زمانیکه همه آنها دریافت نشوند ‪ FCP‬کامل نمیشود‪.‬‬
‫تا حد امکان فایل های ‪ CSS‬را با هم ترکیب کرده و از تعداد فایل های فراخوان شده در صفحه بکاهید‪ .‬در‬
‫بسیاری موارد یک فایل ‪ CSS‬تنها در یکی یا چند صفحه از سایت کاربرد دارد (مثل فرم تماس) لزومی به‬
‫فراخوان آن در همه صفحات نیست‪.‬‬
‫بعد از یکسان سازی فایل ها‪ ،‬نسخه نهایی را با ابزارهای آنالین مانند سایت ‪ csscompressor.com‬به‬
‫راحتی ‪ Minify‬کنید تا تمام کامنت ها و فاصله های اضافی حذف شده و به کمترین حجم ممکن برسد‪.‬‬
‫‪TYPE:‬‬ ‫‪CSS‬‬
‫‪85‬‬ ‫‪Average:‬‬ ‫‪95%‬‬

Minify CSS
‫ را در این بخش کپی کنید‬CSS ‫کد‬
PRIORITY: High
‫دکمه فشرده سازی را بزنید‬ TYPE: CSS
86 Average: 95%

‫‪Optimize CSS Delivery‬‬
‫ابزار ‪ Page speed insights‬پیشنهاد میدهد که تنها ‪ CSS‬ضروری برای نمایش اولیه سایت در هدر صفحه‬
‫و به صورت ‪ Inline‬قرار داده شود‪.‬‬
‫بقیه کدهای ‪ CSS‬با استفاده از کدهایی مشخص به صورت در ‪ body‬قرار گرفته و به انتهای صفحه ‪defer‬‬
‫میشوند‪ .‬دقت کنید که کدهای ‪ inline‬نباید خیلی سنگین و زیاد باشد و البته از استایل دهی در داخل تگ‬
‫های ‪ HTML‬پرهیز کنید‪.‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫};‪.blue{color:blue‬‬
‫>‪</style‬‬
‫>‪</head‬‬
‫‪87‬‬

<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="small.css"/>
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
88

‫‪Minify Javascript‬‬
‫هر فایل ‪ javascript‬برای فراخوانی در سایت نیازمند یک درخواست مجزا به سرور است همانند آنچه در‬
‫‪ CSS‬گفته شد باید فایل های ‪ JS‬را نیز تا حد امکان با هم ترکیب کنیم‪.‬‬
‫بعد از ترکیب فایل های ‪ JS‬با استفاده از ابزار ‪ jscompress.com‬حجم آن را تا حد امکان کاهش می‬
‫دهیم تا در بهینه ترین حالت ممکن باشد‪.‬‬
‫در نهایت در نظر داشته باشید که بهتر است فایل های ‪ JS‬در انتهای صفحه و قبل از بسته شدن ‪body‬‬
‫فراخوان شوند تا کمترین تاثیر را بر سرعت نمایش اولین نسخه از صفحه به کاربر داشته باشند‪.‬‬
‫همچنین برای جلوگیری از اثرگذاری فایل های ‪ JS‬بر تهیه اولین نسخه صفحه میتوانیم از ویژگی ‪async‬‬
‫برای فراخوان آنها استفاده کنیم‪ .‬این کار موجب میشود تا پایان لود اولیه صفحه فایل ‪ JS‬دریافت نشود‪.‬‬
‫‪TYPE:‬‬ ‫‪JS‬‬
‫‪89‬‬ ‫‪Average:‬‬ ‫‪89%‬‬

Minify Javascript
‫ را در این بخش کپی کنید‬JS ‫کد‬
‫دکمه فشرده سازی را بزنید‬

PRIORITY: High
TYPE: JS
90 Average: 89%

<head>
<script type="text/javascript">
/* contents of a small JavaScript file */
</script>
</head>
<body>
body content
<script async src="my.js">
</body>
91

‫تفاوت امتیاز در ابزارها‬
‫ابزارهای متنوعی برای تعیین سرعت سایت شما وجود دارد و هرکدام از آنها استانداردهای متفاوتی را برای‬
‫تعیین نمره نهایی در نظر میگیرند‪.‬‬
‫سایت ‪ Gtmetrix‬تقریبا ‪ 22‬فاکتور را برای تعیین سرعت صفحه در نظر میگیرد ولی ابزار ‪Page Speed‬‬
‫‪ Insights‬گوگل تنها ‪ 8‬فاکتور مهم را مورد نظر قرار میدهد‪.‬‬
‫ابزار گوگل در برخی موارد مانند استفاده از ‪ CSS‬و ‪ JS‬های اینالین با ‪ gtmetrix‬در تناقض است و البته‬
‫سرعت پاسخ گویی سرور را نیز در تعیین نمره نهایی شما لحاظ میکند‪.‬‬
‫در نهایت میتوان گفت فاکتورهای معرفی شده سایت شما را در هر ابزاری بهینه خواهند کرد و تنها مورد‬
‫مربوط به ‪ Reduce server response time‬میشود که مرتبط به سرور شما و تکنولوژی های فعال روی آن‬
‫است‪.‬‬
‫‪92‬‬

‫معیار تعیین بهینه بودن سایت‬
‫کسب امتیاز باال از ‪ Gtmetrix‬و یا حتی ‪ Page Speed Inisghts‬به تنهایی نمیتواند معیار کافی برای‬
‫سرعت باالی سایت شما باشد‪.‬‬
‫مهمترین فاکتوری که شما باید در نظر بگیرید زمان لود نهایی صفحه برای کاربر است زیرا ممکن است‬
‫امتیاز شما باالی ‪ 90‬باشد ولی صفحه در بیشتر از ‪ 10‬ثانیه باز شود‪.‬‬
‫میتوان گفت اگر صفحه شما در کمتر از ‪ 2‬ثانیه بازشود ایده آل است‪ .‬اگر این زمان کمتر از ‪ 4‬ثانیه باشد‬
‫در شرایط خوبی قرار دارد و اگر به بیشتر از ‪ 6‬ثانیه برسد یعنی نیازمند بهینه سازی بیشتر هستید‪.‬‬
‫در واقع ‪ Optimization‬و ‪ Speed‬دو فاکتور مجزا با یک هدف مشترک یعنی بهبود تجربه کاربری هستند‪.‬‬
‫‪93‬‬

‫‪Structured Data‬‬
‫نشانه گذاری محتوا‬
‫گوگل از الگوریتم های پیچیده ای برای درک محتوای صفحات و ارتباط معنایی کلمات استفاده میکند‪ .‬با‬
‫استفاده از نشانه گذاری محتوا میتوان درک محتوای صفحات را برای ربات های گوگل ساده تر کرد‪.‬‬
‫همچنین گوگل از این اطالعات نشانه گذاری شده برای نمایش محتوا در نتایج جستجو استفاده میکند‪.‬‬
‫بخشی از این اطالعات میتواند با نمایشی کامال متفاوت در صفحه جستجوی گوگل ظاهر شوند‪.‬‬
‫این روش برای معرفی بهتر محتوای صفحه به کار گرفته میشود و به صورت کدهای ‪ HTML‬در داخل‬
‫صفحه استفاده میشود‪ Structured Data .‬نمیتواند به صورت مستقل و در یک صفحه خالی استفاده شود‪.‬‬
‫‪94‬‬
‫نشانه گذاری محتوا‬
‫استانداردهای مورد تایید گوگل همگی براساس کتابخانه موجود در سایت ‪ Schema.org‬هستند ولی معیار‬
‫اصلی ما آموزش های سایت ‪ developer.google.com‬است‪.‬‬
‫بسیاری از المان های معرفی شده در سایت ‪ Schema.org‬هنوز توسط گوگل پشتیبانی نمیشوند و‬
‫استفاده از آنها اجباری نیست‪ .‬در نتیجه مواردی که هم اکنون در نتایج جستجو تاثیرگذار هستند را مورد‬
‫بررسی قرار میدهیم‪.‬‬
‫برای نمایش اطالعات در نتایج جستجو شما فقط به المان های اجباری نیاز دارید‪ .‬ولی قراردادن اطالعات‬
‫تکمیلی و غیرضروری میتواند شانس شما را برای نمایش افزایش دهد‪.‬‬
‫‪95‬‬
‫فرمت های استاندارد نشانه گذاری‬
‫در حال حاضر گوگل از ‪ 3‬فرمت استاندارد نشانه گذاری پشتیبانی میکند‬
‫‪JSON-LD‬‬ ‫‪Microdata‬‬ ‫‪RDFa‬‬
‫پیشنهاد اصلی گوگل در حال حاضر استفاده از روش ‪ JSON-LD‬است‪ .‬در این آموزش نیز بیشتر به بررسی‬
‫همین روش می پردازیم‪.‬‬
‫‪96‬‬
Structured Data
JSON-LD
‫ این اطالعات برای کاربر در‬.‫< در هدر یا بدنه صفحه لود میشود‬script> ‫ با استفاده‬javascript ‫یک تگ‬
.‫صفحه قابل رویت نیست و محدودیتی برای درج اطالعات برای شما ایجاد نمیکند‬
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https://www.example.com/",
…
}
</script>
97
Structured Data
Structured Data
Microdata
‫ صفحه استفاده‬body ‫ و در‬html ‫ یک روش نشانه گذاری است که مستقیما در تگ های‬Microdata
.‫ این روش با اضافه کردن ویژگی های تعریف شده به تگ های موجود در صفحه عمل میکند‬.‫میشود‬
<div itemscope itemtype="http://schema.org/WebSite">

<meta itemprop="url" content="https://www.example.com/"/>
<form itemprop="potentialAction" itemscope
‫ه‬ itemtype="http://schema.org/SearchAction">
...
</form>
</div>
98
Structured Data
Structured Data
RDFa
‫ نشانه‬.‫ صفحه به گوگل معرفی میکند‬html ‫ اطالعات را در درون تگ های‬Microdata ‫ همانند روش‬RDFa
.‫ بنا شده است‬HTML5 ‫ از استاندارد متفاوتی استفاده میکند و برپایه‬RDFa ‫گذاری های‬
<ol vocab="http://schema.org/" typeof="BreadcrumbList">

<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="https://example.com/books">
<span property="name">Books</span>
<meta property="position" content="1">
</a>
</li>
</ol>
99
Structured Data
Structured Data
‫انواع کاربردهای نشانه گذاری استاندارد‬
.‫استفاده از نشانه گذاری استاندارد با دو هدف اصلی انجام میشود‬
‫اطالعات تکمیلی در مورد صفحه‬ ‫تعیین نوع محتوای صفحه‬

Enhancements Content Type
Breadcrumb Article Music

Corporate Contact Book Product
Carousel Course Recipe
Logo Event Review
Sitelinks Searchbox Fact Check Video
Social Profile Job Posting TV and Movie
Local Business Podcast
100
Structured Data
‫‪Breadcrumb‬‬
‫ساختار درختی سایت و محل قرارگیری صفحه را مشخص میکند‬
‫تگ های ‪ name ،item‬و ‪ position‬اجباری هستند ولی تگ ‪ image‬ضروری نیست‪.‬‬
‫میتوان برای یک صفحه حتی ‪ 2‬مسیر دسترسی متفاوت داشت‪.‬‬
‫‪101‬‬
<script type="application/ld+json"> {
{ "@type": "ListItem",
"@context": "http://schema.org", "position": 2,
"@type": "BreadcrumbList", "item": {
"itemListElement": [{ "@id": "https://example.com/books/authors",
"@type": "ListItem", "name": "Authors",
"position": 1, "image": "http://example.com/images/icon-author.png"
"item": { }
"@id": "https://example.com/books", }
"name": "Books", }]
}
"image": "http://example.com/images/icon-book.png"
</script>
}
},
102
Structured Data
‫‪Sitelinks Searchbox‬‬
‫نمایش نوار جستجو در نتایج گوگل‬
‫قرار دادن این کدها به معنی نمایش صد درصدی باکس جستجو نیست‪ .‬معموال زمانیکه نام برند یا یک‬
‫موضوع کلی در سایت شما جستجو میشود این باکس نمایش داده خواهد شد‪.‬‬
‫‪103‬‬
"@type": "WebSite",
"url": "https://www.example.com/", ‫آدرس سایت شما‬

"potentialAction": {
"@type": "SearchAction",
"target": "https://query.example.com/search?q={search_term_string}", ‫آدرس صفحه جستجو‬

"query-input": "required name=search_term_string" ‫نام فیلد ورودی عبارت جستجو در فرم‬
}
}
</script>
104
Structured Data
‫‪Corporate Contact‬‬
‫نمایش اطالعات تماس شرکت یا سایت‬
‫برای زمانیکه کاربر مستقیم نام برند شما را جستجو میکند مناسب است و برای برندهای معتبر که عموما‬
‫صفحه ویکی پدیا دارند کاربرد دارد‪ .‬میتوانید چندین شماره تماس با عنوان های متفاوت مشخص کنید‪.‬‬
‫‪105‬‬
"@type": "Organization",
"url": "http://www.your-company-site.com", ‫آدرس سایت شما‬

"contactPoint": [
{ "@type": "ContactPoint",
"telephone": "+1-401-555-1212", ‫شماره تلفن شما‬

"contactType": "customer service" ‫عنوان این شماره تلفن‬
}
}
</script>
106
Structured Data
‫‪Logo‬‬
‫نمایش لوگوی شرکت در نتایج گوگل‬
‫با این کد لوگوی شما در نتایج ‪ opengraph‬نمایش داده میشود و گوگل به درستی درک میکند که لوگوی‬
‫شرکت شما چه تصویری است‪.‬‬
‫‪107‬‬
"@type": "Organization", ‫ است‬organization ‫زیر مجموعه ای از‬

"url": "http://www.example.com",
"logo": "http://www.example.com/images/logo.png" ‫آدرس لوگوی سایت از هاست خودتان‬

}
</script>
108
Structured Data
‫‪Social Profile‬‬
‫نمایش لینک شبکه های اجتماعی سایت شما‬
‫با این کد لینک شبکه های اجتماعی شما در نتایج‬
‫‪ opengraph‬نمایش داده میشود‪ .‬البته به شرطی که‬
‫سایت شما به صورت ‪ opengraph‬نمایش داده شود‪.‬‬
‫دقت کنید که ‪ ،Logo‬شبکه های اجتماعی‪ ،‬اطالعات‬
‫تماس‪ ،‬نام برند و آدرس سایت همگی زیر مجموعه‬
‫‪ organization‬هستند و میتوانند همزمان در یک‬
‫قطعه کد استفاده شوند‪.‬‬
‫‪109‬‬
"@type": "Organization",
"name": "your name", ‫نام برند شما هنگام معرفی سازمان‬

"url": "http://www.your-site.com",
"sameAs": [
"http://www.facebook.com/your-profile", ‫آدرس شبکه های اجتماعی شما‬

"http://instagram.com/yourProfile",
"http://www.linkedin.com/in/yourprofile",
"http://plus.google.com/your_profile"
}
</script>
110
Structured Data
‫‪Carousels‬‬
‫نمایش اسالیدر آخرین مطالب‬
‫این قابلیت تنها در موبایل و برای انواع خاصی از‬
‫محتوا شامل ‪ Recipe, Film, Course, Article‬نمایش‬
‫داده میشود‪.‬‬
‫استفاده از این اسالید برای دو حالت مختلف کاربرد‬
‫دارد‪:‬‬
‫‪ -1‬یک صفحه شامل چکیده محتوا و لینک به صفحات اصلی‬
‫‪ -2‬یک صفحه شامل چند محتوای زیر مجموعه بدون صفحات داخلی‬
‫‪111‬‬
<script type="application/ld+json"> "url":"http://example.com/desserts/cherry-pie"
{ },
"@context": "http://schema.org", {
"@type": "ItemList", "@type":"ListItem",
"itemListElement":[ "position":3,
{ "url":"http://example.com/desserts/blueberry-pie"
"@type":"ListItem", }
"position":1, ‫ترتیب نمایش‬ ]
"url":"http://example.com/desserts/apple-pie" }
‫آدرس صفحه مطلب‬ </script>
},
{ ‫هر مطلب برای خود یک صفحه مجزا دارد‬

"@type":"ListItem",
‫آدرس صفحات باید در همین سایت باشد‬
"position":2,
‫محدودیتی در تعداد محتوای زیرمجموعه ندارد‬
112
Structured Data
<script type="application/ld+json"> }
{ "@type":"ListItem",
"@context": "http://schema.org", "position":2,
"@type": "ItemList", item: {
"itemListElement":[ … More Data ….

{ {
"@type":"ListItem", },
"position":1, ]
item: { }
@type: recipe </script>
url: http://example.com/big_list_of_recipes#recipe_2 .‫همه مطالب در همین صفحه در دسترس هستند‬

name: Martha's Apple Pie ‫ تعریف شوند‬item ‫کلیه اطالعات مربوط به آن محتوا باید در‬
author: Martha Smith
‫ باید در همین صفحه باشد‬item ‫آدرس دهی هر‬
... all other required Recipe type properties ...}
‫محدودیتی در تعداد محتوای زیرمجموعه ندارد‬
},
113
Structured Data
‫‪Article‬‬
‫نشانه گذای مقاالت و اخبار‬
‫استفاده از این روش موجب نمایش تاریخ‪ ،‬تصویر شاخص و امتیازدهی محتوا در نتایج میشود‪.‬‬
‫در صورت نشانه گذاری نسخه ‪ AMP‬شما شانس نمایش در ‪ carousel‬گوگل را خواهید داشت‪.‬‬
‫‪114‬‬
<script type="application/ld+json"> "author": {
{ "@type": "Person",
"@context": "http://schema.org", "name": "John Doe"
"@type": "NewsArticle", },
"mainEntityOfPage": { "publisher": {
"@type": "WebPage", "@type": "Organization",
"@id": "https://google.com/article" "name": "Google",
}, "logo": {
"headline": "Article headline", "@type": "ImageObject",
"image": [ "url": "https://google.com/logo.jpg"
"https://example.com/photos/1x1/photo.jpg", }
"https://example.com/photos/4x3/photo.jpg", },
"https://example.com/photos/16x9/photo.jpg" "description": "A most wonderful article"
], }
"datePublished": "2015-02-05T08:00:00+08:00", </script>
"dateModified": "2015-02-05T09:20:00+08:00",
115
Structured Data
‫‪Article‬‬
‫نشانه گذای مقاالت و اخبار‬
‫‪ Date Published‬تاریخ انتشار مقاله یا خبر در اینترنت است‪.‬‬
‫‪ Date Modified‬زمان انجام آخرین تغییرات در صفحه را مشخص میکند‪.‬‬
‫‪ mainEntityOfPage‬آدرس نسخه اصلی صفحه یا همان ‪ canonical‬را مشخص میکند‪.‬‬
‫‪ mainEntityOfPage‬و ‪ Description‬و ‪ Date Modified‬اجباری نیستند‪.‬‬
‫پیشنهاد میشود عرض تصاویر حداقل ‪ 1200‬پیکسل باشد‪.‬‬
‫هر صفحه حداقل باید یک عکس داشته باشد‪ ،‬گوگل عکس شاخص را خودش انتخاب میکند‪.‬‬
‫تصاویر در فرمت های ‪ png ،jpg‬و ‪ gif‬مورد تایید گوگل هستند‪.‬‬
‫نسبت ابعاد تصاویر بهتر است ‪16x9, 4x3‬یا ‪ 1x1‬باشد‪.‬‬
‫سایز پیشنهادی برای لوگو عرض ‪ 600‬پیکسل و ارتفاع ‪ 60‬پیکسل است‪ .‬بهتر است زمینه سفید باشد‪.‬‬
‫‪116‬‬
‫‪Video‬‬
‫نشانه گذاری ویدئوها برای نمایش در جستجوی ویدئو‬
‫‪117‬‬
{ "duration": "PT1M33S",
"@context": "http://schema.org", “expires": 2018-02-05T08:00:00+08:00 ",

"@type": "VideoObject", "contentUrl": "http://www.example.com/video123.flv",
"name": "Title", "embedUrl": "http://www.example.com/videoplayer.swf?video=123",
"description": "Video description", "interactionCount": "2347"
"thumbnailUrl": [
"https://example.com/photos/1x1/photo.jpg", }
"https://example.com/photos/4x3/photo.jpg", </script>
"https://example.com/photos/16x9/photo.jpg"
],
"uploadDate": "2015-02-05T08:00:00+08:00",
118
Structured Data
‫‪Video‬‬
‫فرمت های استاندارد ویدئو از نظر گوگل ‪.mpg, .mpeg, .mp4, .m4v, .mov, .wmv, .asf, .avi, .ra, .ram,‬‬
‫‪ .rm, .flv,‬هستند‪.‬‬
‫‪ contentUrl‬آدرس فایل اصلی ویدئو را مشخص میکند‪.‬‬
‫‪ embedUrl‬آدرس صفحه ای که شامل پلیر ویدئو است را مشخص میکند‪.‬‬
‫‪ interactionCount‬برای تعیین تعداد نمایش ویدئو به کار میرود‪.‬‬
‫‪ uploadDate‬تاریخ بارگذاری ویدئو در اینترنت است‪.‬‬
‫‪ Expires‬تاریخ انقضای ویدئو را مشخص میکند و اجباری نیست‪.‬‬
‫‪ Duration‬مدت ویدئو را به دقیقه و ثانیه مشخص میکند‪.‬‬
‫‪ Title‬و ‪ Description‬توضیحاتی در مورد ویدئو ارایه میدهند‪.‬‬
‫‪119‬‬
‫‪Course‬‬
‫نشانه گذاری برای محتوای آموزشی‬
‫‪120‬‬
<script type="application/ld+json"> <script type="application/ld+json">
{ {
"@context": "http://schema.org", "@context": "http://schema.org",
"@type": "Course", "@type": "ItemList",
"name": "Introduction to Computer Science and Programming", "itemListElement":[
"description": "Introductory CS course laying out the basics.", {
"provider": { "@type":"ListItem",
"@type": "Organization", "position":1,
"name": "University of Technology - Eureka", "url":"http://example.com/desserts/apple-pie"
"sameAs": "http://www.ut-eureka.edu" },
} …
} ]
</script> }
</script>
121
Structured Data
‫‪Course‬‬
‫برای تعریف ‪ Course‬از کد اختصاصی و برای تعریف درس ها از کدهای مربوط به ‪ Carousel‬که قبال معرفی‬
‫کردیم استفاده خواهیم کرد‪.‬‬
‫‪ Provider‬اجباری نیست ولی میتوان تمام اطالعات مربوط به ‪ organization‬را در آن قرار داد‪.‬‬
‫‪ Course‬را فقط برای محتوای آموزشی استفاده نمایید‪ ،‬محتوایی که بیش از یک درس باشد‪.‬‬
‫یک ویدئو چند دقیقه ای نمیتواند یک ‪ Course‬باشد‪.‬‬
‫عنوان محتوای آموزشی شما نباید خیلی عمومی یا غیر آموزشی باشد‪.‬‬
‫‪122‬‬
Review snippet
‫سیستم امتیاز دهی به محتوا‬
123
Structured Data
‫‪Review snippet‬‬
‫سیستم نظردهی در مورد محتوا‬
‫سیستم ‪ Review‬تنها مختص نمایش ستاره ها نیست و میتوان برای انواع خاصی از محتوا یک نظر‬
‫تخصصی از طرف شخصی خاص درج نمود‪.‬‬
‫مشخصات نویسنده‪ ،‬محتوای نظر داده شده و امتیاز داده شده توسط او اجباری هستند‪.‬‬
‫مشخصات منتشر کننده نظر و متن نظر نویسنده اجباری نیستند‪.‬‬
‫‪124‬‬
"@context": "http://schema.org", "reviewRating": {
"@type": "Review", "@type": "Rating",
"itemReviewed": { "ratingValue": "7",
"@type": "Thing", "bestRating": "10"
"name": "Super Book" },
}, "publisher": {
"author": { "@type": "Organization",
"@type": "Person", "name": "Washington Times"
"name": "Joe" }
}, }
“reviewBody”: “Some Text About Thing…” </script>
125
Structured Data
‫‪Aggregate Rating‬‬
‫سیستم امتیاز دهی گروهی به محتوا‬
‫در این سیستم امتیاز کاربران به صورت گروهی محاسبه شده و متوسط امتیاز آنها به کاربر نمایش‬
‫داده میشود‪ .‬این سبک در داخل کدهای تعریف یک نوع خاص محتوا استفاده میشود‪.‬‬
‫تعداد کل آرا‪ ،‬امتیاز متوسط و حداکثر امتیاز ضروری هستند‪.‬‬
‫میتوان هم زمان از ‪ Review‬و ‪ Aggregate Rating‬در یک محتوا استفاده نمود‪.‬‬
‫‪126‬‬
<script type="application/ld+json"> "@type": "Organization",
{ "name": "Google",
"@context": "http://schema.org", "logo": {
"@type": "NewsArticle", "@type": "ImageObject",
"mainEntityOfPage": { "url": "https://google.com/logo.jpg"
"@type": "WebPage", }
"@id": "https://google.com/article" },
}, "description": "A most wonderful article“,

"headline": "Article headline", "aggregateRating": {
"image": [ "https://example.com/photos/1x1/photo.jpg" ], "@type": "AggregateRating",
"datePublished": "2015-02-05T08:00:00+08:00", "ratingValue": "88",
"author": { "bestRating": "100",
"@type": "Person", "ratingCount": "20"
"name": "John Doe" }
}, }
"publisher": { </script>
127
Structured Data
‫‪Product‬‬
‫نمایش اطالعات محصول در نتایج گوگل‬
‫‪128‬‬
‫‪Product‬‬
‫با نشانه گذاری محصوالت شما میتوانید قیمت‪ ،‬وضعیت موجودی‪ ،‬امتیاز کاربران‪ ،‬تصویر محصول و‬
‫تخفیف را در نتایج گوگل نشان دهید‪.‬‬
‫محصوالت هم در نتایج جستجوی گوگل و هم در جستجوی تصاویر متفاوت دیده میشوند‪.‬‬
‫این سیستم برای معرفی یک محصول استفاده میشود و مناسب صفحه لیست محصوالت نیست‪.‬‬
‫‪ shopping aggregator‬برای نمایش اطالعات یک محصول با چندین فروشنده و قیمت استفاده میشود‪.‬‬
‫‪129‬‬
<script type="application/ld+json"> "offers": {
{ "@type": "Offer",
"@context": "http://schema.org", "priceCurrency": "USD",
"@type": "Product", "price": "119.99",
"name": "Executive Anvil", "priceValidUntil": "2020-11-05",
"image": [ "https://example.com/photos/1x1/photo.jpg"], "itemCondition": "http://schema.org/UsedCondition",
"mpn": "925872", "availability": "http://schema.org/InStock",
"brand": { "seller": {
"@type": "Thing", "@type": "Organization",
"name": "ACME" "name": "Executive Objects"
}, }
"aggregateRating": { }
"@type": "AggregateRating", "description": "Sleeker than ACME's Classic Anvil, ...",
"ratingValue": "4.4", }
"reviewCount": "89" </script>
},
130
Structured Data
‫‪Product‬‬
‫استفاده از ‪ offer‬ضروری نیست ولی در صورت استفاده از آن بخش های قیمت‪ ،‬واحد پولی و وضعیت‬
‫موجودی باید ذکر شوند‪.‬‬
‫برای یک محصول میتوان هم زمان از سیستم امتیاز دهی کاربران نیز استفاده نمود‪.‬‬
‫اطالعات مربوط به برند و شناسه محصول اجباری نیستند ولی بهتر است قرار داده شود‪.‬‬
‫توضیحات محصول اجباری نیست ولی نام و تصاویر آن باید در نشانه گذاری شما ذکر شود‪.‬‬
‫برای محصوالتی که چند قیمت دارند سیستم نمایش قیمت متفاوت است‪.‬‬
‫در این حالت باید حداقل و حداکثر قیمت به همراه واحد پولی مشخص شوند‪.‬‬
‫‪131‬‬
<script type="application/ld+json"> "brand": {
{ "@type": "Thing",
"@context": "http://schema.org", "name": "ACME"
"@type": "Product", },
"name": "Executive Anvil", "offers": {
"image": [ "https://example.com/photos/1x1/photo.jpg"], "@type": "AggregateOffer",
"mpn": "925872", "lowPrice": "119.99",
"aggregateRating": { "highPrice": "199.99",
"@type": "AggregateRating", "priceCurrency": "USD"
"ratingValue": "4.4", }
"reviewCount": "89" "description": "Sleeker than ACME's Classic Anvil, ...",
}, }
</script>
132
Structured Data
‫‪Multiple elements on a page‬‬
‫استفاده از چند نشانه گذاری در یک صفحه‬
‫اگر در صفحه یک مقاله یا محصول شما ویدئو هم دارید میتوانید از دو تگ ‪ script‬مجزا برای نشانه گذاری‬
‫هرکدام از آنها در صفحه استفاده کنید‪.‬‬
‫برای صفحات دسته بندی مقاالت یا محصوالت ابتدا باید هر صفحه محصول یا مقاله به صورت مجزا و در‬
‫خود صفحه نهایی نشانه گذاری شده باشد‪ .‬سپس میتوانید صفحات دسته بندی را به وسیله ‪listitem‬‬
‫مانند آنچه در ‪ Carousel‬گفته شد نشانه گذاری کنید‪.‬‬
‫اگر در یک صفحه چندین ویدئو مهم قرار گرفته است میتوانید برای هریک از آنها به صورت مجزا از‬
‫سیستم نشانه گذاری استفاده کنید‪.‬‬
‫‪133‬‬
‫‪Other Content Types‬‬
‫انواع دیگر نشانه گذاری محتوا‬
‫عالوه بر موارد ذکر شده سیستم های نشانه گذاری برای انواع دیگری از محتوا مانند رویداد‪ ،‬دستور غذا‪،‬‬
‫رستوران‪ ،‬موزیک و ‪ ...‬نیز وجود دارد‪.‬‬
‫با توجه به سخت گیری بیشتر گوگل برای نمایش این آیتم ها و کم کاربرد بودن آنها به نسبت موارد ذکر‬
‫شده در این بخش از بررسی دقیق هریک اجتناب میکنیم‪.‬‬
‫برای کسب اطالعات بیشتر در مورد موارد باقی مانده با توجه به آموخته های خود به آموزش اصلی گوگل‬
‫در آدرس زیر مراجعه کنید‪.‬‬
‫‪Search Gallery‬‬
‫‪https://developers.google.com/search/docs/guides/search-gallery‬‬
‫‪134‬‬
‫‪Structured Data testing Tool‬‬
‫ابزار بررسی صحت نشانه گذاری صفحات‬
‫برای آنکه از صحت عملکرد خود در کدنویسی و نشانه گذاری صفحات مطمئن شوید گوگل یک ابزار کاربردی‬
‫طراحی کرده است‪.‬‬
‫در این ابزار شما میتوانید مستقیما کد خود را کپی کرده و یا آدرس صفحه مورد نظر خود را وارد نمایید تا‬
‫آنالیز دقیقی بر روی نشانه گذاری شما انجام شود‪.‬‬
‫اگر کد شما صحیح باشد و نوع محتوای شما قابل نمایش باشد گوگل یک دکمه ‪ preview‬برای نمایش‬
‫خروجی صفحه در نتایج جستجو در اختیار شما قرار میدهد‪.‬‬
‫‪Structured Data Testing Tool‬‬

‫‪https://search.google.com/structured-data/testing-tool‬‬
‫‪135‬‬
136
Structured Data
137
Structured Data
‫‪ AMP‬چیست؟‬
‫‪Accelerated Mobile Pages‬‬
‫‪ )⚡( AMP‬یک کتابخانه متن باز برای طراحی صفحات وب است که توجهی ویژه ای به کارایی‪ ،‬سرعت و‬
‫بهینه سازی داشته است‪ .‬این پروژه توسط گوگل راه اندازی شده و به سرعت در حال گسترش است‪.‬‬
‫کتابخانه کد ‪ AMP‬از سه بخش اصلی تشکیل شده است‪:‬‬
‫کدهای نوشته شده در صفحه برای نمایش محتوا‬ ‫‪AMP HTML‬‬ ‫⚡‬
‫کتابخانه اختصاصی ‪ JS‬برای نمایش المان های ‪AMP‬‬ ‫‪AMP JS‬‬ ‫⚡‬
‫سرویس کش گوگل برای خوانش سریع صفحات ‪AMP‬‬ ‫‪AMP Cache‬‬ ‫⚡‬
‫‪138‬‬

139
Accelerated Mobile Pages

‫داستان موفقیت‬
WEGO
140

‫داستان موفقیت‬
BMW
141

‫‪AMP HTML‬‬
‫راهنمای کدونویسی و انتشار صفحات ‪amp‬‬
‫در ادامه استانداردهای کدنویسی ‪ AMP‬و المان های موجود برای استفاده در آن را بررسی خواهیم کرد‪.‬‬
‫‪142‬‬

<!DOCTYPE html>
<html amp lang="en“>
<head>
</head>
<body>
</body>
</html>
.‫ است شروع میشود‬HTML5 ‫!< که مختص‬DOCTYPE html> ‫صفحه همیشه با تگ‬ ⚡

.‫ یا کاراکتر ⚡ باشد‬amp ‫ باید دارای عبارت‬html ‫تگ‬ ⚡
.‫ در صفحه اجباری است‬body ‫ و‬head ‫وجود تگ های‬ ⚡
143

>head<
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate> ... </style>
<noscript><style amp-boilerplate> ... </style></noscript>
.‫ بهترین است‬Utf-8 .‫ صفحه به چه صورت است‬encoding ‫ مشخص میکند‬Charset ‫تگ‬ ⚡

.‫ باید در هد صفحه فراخوان شود‬AMP ‫ اصلی‬JS ‫کتابخانه‬ ⚡
.‫ برای عملکرد صحیح در موبایل بوده و استفاده از آن به همین شکل اجباری است‬Viewport ‫تگ‬ ⚡
.‫ را فراخوان میکند‬AMP ‫ مورد نیاز برای‬CSS ‫ دستورات‬amp-boilerplate ‫تگ‬ ⚡
144

‫<‪>head‬‬
‫>‪<title>Hello, AMPs</title‬‬
‫>‪<meta name="description" content=“Description of Page" /‬‬
‫>"‪<link rel="canonical" href="$SOME_URL‬‬
‫تگ ‪ title‬عنوان صفحه را مشخص میکند و باید با عنوان نسخه اصلی یکسان باشد‪.‬‬ ‫⚡‬
‫تگ ‪ description‬برای درج توضیحات است و باید با توضیحات نسخه اصلی یکی باشد‪.‬‬ ‫⚡‬
‫وجود تگ ‪ canonical‬اجباری بوده و آدرس صفحه با نسخه بدون ‪ AMP‬را مشخص میکند‪.‬‬ ‫⚡‬
‫‪145‬‬

>head<
{
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
head ‫ میتوان استفاده کرد و کدها بهتر است در‬JSON-LD ‫برای نشانه گذاری محتوا فقط از روش‬ ⚡
.‫صفحه باشد‬
.‫ است‬Schema.org ‫ کامال یکسان و براساس کتابخانه‬html ‫استانداردهای نشانه گذاری با نسخه‬ ⚡

146

>head<
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
AMP ‫ در‬.‫ در هدر صفحه استفاده نمود‬amp-custom ‫ باید از تگ‬CSS ‫برای استفاده از دستورات‬ ⚡
.‫ وجود ندارد‬amp-custom ‫ های بیرونی و یا استفاده از دو‬style ‫امکان فراخوانی‬
147

‫<‪>head‬‬
‫>"‪<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html‬‬
‫در صفحه مربوط به نسخه اصلی با استفاده از تگ ‪ amphtml‬آدرس نسخه ‪ AMP‬قرار داده میشود‪.‬‬ ‫⚡‬
‫در نسخه ‪ AMP‬با استفاده از تگ ‪ canonical‬آدرس صفحه اصلی مشخص میشود‪.‬‬ ‫⚡‬
‫با ترکیب این دو گوگل قادر به تشخیص ارتباط این دو صفحه بوده و از ایندکس شدن مجزای دو‬ ‫⚡‬
‫صفحه به عنوان محتوای تکراری جلوگیری میشود‪.‬‬
‫‪148‬‬

‫المان های ‪ HTML‬در ‪body‬‬
‫تگ های ‪ span ،div ،a ،p ،h‬و ‪ ...‬مشترک هستند‬
‫ویژگی ‪ layout‬در تمام المان های ‪ amp‬مورد استفاده بوده و نحوه نمایش را مدیریت میکند‪.‬‬ ‫⚡‬
‫این المان در صفحه نمایش داده نمیشود‪.‬‬ ‫‪nodisplay‬‬
‫این المان عرض و ارتفاع مشخصی داشته و با تغییر سایز ثابت می ماند‪.‬‬ ‫‪fixed‬‬
‫این المان عرض و ارتفاع مشخصی نداشته و ابعاد آن با سایز صفحه تغییر میکند‪.‬‬ ‫‪responsive‬‬
‫این المان ارتفاع مشخصی داشته و عرض آن براساس فضای موجود تعیین میشود‪.‬‬ ‫‪fixed-height‬‬
‫ابعاد این المان براساس عرض و ارتفاع فضایی که در آن قرار گرفته تعیین میشود‪.‬‬ ‫‪fill‬‬
‫ابعاد این المان براساس محتوای قرار گرفته در آن مشخص میشود‪.‬‬ ‫‪container‬‬
‫فضای موجود در المان باالیی که ‪ flex‬است بین تمام ‪ flex-item‬ها تقسیم میشود‪.‬‬ ‫‪flex-item‬‬
‫مشابه المان ‪ responsive‬عمل میکند ولی امکان تعیین عرض و ارتفاع برای آن وجود دارد‪.‬‬ ‫‪intrinsic‬‬
‫‪149‬‬

‫‪AMP-IMG‬‬
‫تگ ‪ img‬در ‪ amp‬وجود نداشته و به جای آن از تگ ‪ amp-img‬استفاده میشود‪.‬‬ ‫⚡‬

‫برای یک تصویر شما میتوانید ویژگی هایی مانند ‪ height ،width ،src ،alt‬و ‪ Layout‬را مشخص کنید‬ ‫⚡‬
‫برای استفاده از تصاویر متحرک مانند ‪ gif‬باید کتابخانه ‪ amp-anim‬را در هدر صفحه لود کنید‪.‬‬ ‫⚡‬
‫در این حالت با استفاده از ویژگی ‪ placeholder‬تصویر جایگزین تا زمان لود ‪ gif‬را مشخص میکنیم‪.‬‬ ‫⚡‬
‫در ‪ AMP‬قابلیت تعریف تصاویر ریسپانسیو و نمایش سایزهای مختلف براساس صفحه نمایش کاربر‬ ‫⚡‬
‫وجود دارد‪.‬‬
‫‪150‬‬

>body< ‫نمایش یک تصویر به صورت ریسپانسیو‬
<amp-img alt="A view of the sea"
src="images/sea.jpg"
width="900" height="675" layout="responsive">
</amp-img>
>body< ‫نمایش تصاویر مختلف براساس سایز صفحه نمایش‬

<amp-img alt="Hummingbird"
src="images/hummingbird-wide.jpg"
width="640" height="457" layout="responsive"
srcset="images/hummingbird-wide.jpg 640w,
images/hummingbird-narrow.jpg 320w">
</amp-img>
151

>head<
<script async custom-element="amp-anim“

src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
>/head<
>body< ‫ و نمایش یک تصویر قبل از لود آن‬gif ‫استفاده از‬
<amp-anim width="400“ height="300"

src="images/wavepool.gif">
<amp-img placeholder
width="400“ height="300"
src="images/wavepool.png">
</amp-img>
</amp-anim>
>/body<
152

‫‪AMP-Video‬‬
‫برای نمایش ویدئو نیاز به کتابخانه جانبی در هدر نیست‪.‬‬ ‫⚡‬

‫با استفاده از تگ ‪ poster‬میتوانید تصویر پیش فرض قبل از اجرا را مشخص کنید‪.‬‬ ‫⚡‬
‫تگ ‪ fallback‬پیام مناسب برای مرورگرهایی که این ویدیو را پشتیبانی نمیکنند را مشخص میکند‪.‬‬ ‫⚡‬
‫تگ ‪ controls‬و ‪ autoplay‬مانند تگ های پیش فرض ‪ html‬عمل میکنند‪.‬‬ ‫⚡‬
‫‪153‬‬

>body<
<amp-video controls
width="640" height="360"
src="videos/kitten-playing.mp4"
poster="images/kitten-playing.png">
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
154

‫‪AMP-AUDIO‬‬
‫تگ ‪ audio‬در ‪ amp‬وجود نداشته و به جای آن از تگ ‪ amp-audio‬استفاده میشود‪.‬‬ ‫⚡‬

‫برای استفاده از پخش کننده فایل های صوتی باید کتابخانه ‪ amp-audio‬را در هدر صفحه لود کنید‪.‬‬ ‫⚡‬
‫تگ ‪ source‬برای مشخص کردن فرمت های مختلف فایل صوتی استفاده میشود‪.‬‬ ‫⚡‬
‫تگ ‪ fallback‬پیام مناسب برای مرورگرهایی که فرمت صوتی را پشتیبانی نمیکنند را مشخص میکند‪.‬‬ ‫⚡‬
‫تگ ‪ controls‬و ‪ autoplay‬مانند تگ های پیش فرض ‪ html‬عمل میکنند‪.‬‬ ‫⚡‬
‫در تمام تگ های مربوط به ‪ media‬میتوانید از انواع ‪ layout‬استفاده نمایید‪.‬‬
‫‪155‬‬

>head<
<script async custom-element="amp-audio"

src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
>/head<
>body<
<amp-audio width="400" height="200"
src="audio/cat-meow.mp3">
<div fallback>
<p>Your browser doesn’t support HTML5 audio.</p>
</div>
<source type="audio/mpeg" src="audio/cat-meow.mp3">
<source type="audio/ogg" src="audio/cat-meow.ogg">
</amp-audio>
>/body<
156

‫‪AMP-Iframe‬‬
‫تگ ‪ iframe‬در ‪ amp‬به صورت ‪ amp-iframe‬فراخوان میشود‪..‬‬ ‫⚡‬

‫برای استفاده از ‪ iframe‬باید کتابخانه ‪ amp-iframe‬را در هدر صفحه لود کنید‪.‬‬ ‫⚡‬
‫تگ ‪ src‬برای مشخص کردن آدرس صفحه جهت نمایش در ‪ iframe‬استفاده میشود‪.‬‬ ‫⚡‬
‫تگ ‪ sandbox‬برای خوانش فایل های جانبی از صفحه نمایش داده شده مورد استفاده است‪.‬‬ ‫⚡‬
‫از تگ ‪ iframe‬میتوان برای نمایش نقشه گوگل یا فرم های مورد نظر در ‪ amp‬استفاده کرد‪.‬‬ ‫⚡‬
‫تگ ‪ iframe‬در صفحات ‪ amp‬ایندکس نمیشود و تاثیری بر محتوا و جایگاه آنها ندارد‪.‬‬ ‫⚡‬
‫‪157‬‬

>head<
<script async custom-element="amp-iframe"

src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
>/head<
>body<
<amp-iframe width="200" height="100"

sandbox="allow-scripts allow-same-origin"
layout="responsive"
src=“URL">
</amp-iframe>
>/body<
158

‫‪AMP-Analytics‬‬
‫برای استفاده از سیستم های آمارگیر سایت از تگ ‪ amp-analytics‬استفاده میشود‪.‬‬ ‫⚡‬

‫برای استفاده از این سیستم باید کتابخانه ‪ amp-analytics‬را در هدر صفحه لود کنید‪.‬‬ ‫⚡‬
‫تگ ‪ googleanalytics‬برای مشخص کردن گوگل به عنوان سیستم آمارگیر استفاده میشود‪.‬‬ ‫⚡‬
‫تگ ‪ account‬باید شامل شناسه اختصاصی شما در گوگل آنالیتیکز باشد‪.‬‬ ‫⚡‬
‫این سیستم قابلیت اتصال به انواع سایت های آمارگیر را داشته و مختص گوگل نیست‪.‬‬ ‫⚡‬
‫‪159‬‬

>head<
<script async custom-element="amp-analytics"

src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
>/head<
>body<
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": { "account": "UA-XXXXX-Y" },
"triggers": { "trackPageview": { "on": "visible", "request": "pageview" } }
}
</script>
</amp-analytics>
>/body<
160

‫افزودن فونت دلخواه‬
‫ منابع مورد نیاز را دریافت کنید‬link ‫برای اضافه کردن فونت دلخواه به صفحه میتوانید با استفاده از‬ ⚡
:‫ وجود دارد که عبارتند از‬link ‫ منبع تایید شده برای فراخوان فونت به صورت‬5 ‫فقط‬ ⚡
Typography.com: https://cloud.typography.com
Fonts.com: https://fast.fonts.net
Google Fonts: https://fonts.googleapis.com
Typekit: https://use.typekit.net
Font Awesome: https://maxcdn.bootstrapcdn.com
.‫ استفاده کنید‬amp-custom ‫@ در‬font-face ‫برای افزودن فونت دلخواه میتوانید از تگ های‬ ⚡
161

>head<
‫استفاده از منابع تایید شده برای فونت‬
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<style amp-custom> ‫افزودن فونت از آدرس دلخواه‬

@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://somedomain.org/VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif; }
</style>
>/head<
162

‫‪AMP-Carousel‬‬
‫این تگ برای نمایش یک اسالیدر در صفحات ‪ amp‬استفاده میشود‪.‬‬ ‫⚡‬

‫برای استفاده از این سیستم باید کتابخانه ‪ amp-carousel‬را در هدر صفحه لود کنید‪.‬‬ ‫⚡‬
‫نمایش ریسپانسیو‪ autoplay ،‬و استفاده از دکمه های بعدی و قبلی از ویژگی های ‪ carousel‬است‪.‬‬ ‫⚡‬
‫تصاویر به صورت ‪ lazy‬و بعد از نمایش کامل صفحه در آن لود میشوند تا سرعت صفحات بسیار باال‬ ‫⚡‬
‫دو مدل ‪ slides‬و ‪ carousel‬برای این سیستم طراحی شده است که نمایش و کارایی متفاوتی دارند‪.‬‬ ‫⚡‬
‫میتوان به جای تصویر از ‪ video ،div‬یا المان های دیگر برای اسالید استفاده نمود‪.‬‬ ‫⚡‬
‫ویژگی هایی مانند ‪ fallback ،placeholder ،layout‬و ‪ sizes‬برای المان های ‪ carousel‬قابل استفاده‬ ‫⚡‬
‫هستند‪.‬‬
‫‪163‬‬

Carousel
‫نمایش دو تصویر در کنار هم در هر اسالید‬
164

>head<
<script async custom-element="amp-carousel"

src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
>/head<
>body<
<amp-carousel type=“carousel” width="450" height="300">

<amp-img src="images/image1.jpg" width="450" height="300"></amp-img>
</amp-carousel>
>/body<
165

Slides
‫نمایش یک تصویر در هر اسالید‬
166

>body<
<amp-carousel type="slides" width="450" height="300"
controls
loop
autoplay
delay="3000"
data-next-button-aria-label="Go to next slide"
data-previous-button-aria-label="Go to previous slide">

</amp-carousel>
>/body<
167

‫‪AMP-Sidebar‬‬
‫این تگ برای نمایش یک سایدبار بازشونده از چپ و راست صفحه استفاده میشود‪.‬‬ ‫⚡‬
‫برای استفاده از این سیستم باید کتابخانه ‪ amp-sidebar‬را در هدر صفحه لود کنید‪.‬‬ ‫⚡‬
‫سایدبار باید مستقیما زیرمجموعه از تگ ‪ body‬باشد و نباید در المان دیگری قرار گیرد‪.‬‬ ‫⚡‬
‫داخل یک سایدبار میتوان از همه المان های ‪ amp‬مانند تصویر‪ ،‬لیست‪ ،‬متن‪ ،‬منو و ‪ ...‬استفاده نمود‬ ‫⚡‬
‫و محدودیتی از نظر محتوا ندارد‪.‬‬
‫سایدبار میتواند از سمت راست یا چپ صفحه باز شود‪.‬‬ ‫⚡‬

‫باز و بسته شدن سایدبار از طریق کلیک روی دکمه هایی مشخص انجام میشود‪.‬‬ ‫⚡‬
‫در یک صفحه میتوان چند سایدبار مختلف داشت‪.‬‬ ‫⚡‬
‫‪168‬‬

AMP-Sidebar
169

>head<
<script async custom-element="amp-sidebar"

src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
>/head<
>body< ‫افزودن سایدبار بدون دکمه های باز و بسته‬

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
<ul>
<li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
<li>Nav item 3</li>
<li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
<li>Nav item 6</li>
</ul>
</amp-sidebar>
>/body<
170

>body< ‫افزودن سایدبار به همراه دکمه های مناسب باز و بسته کردن آن‬
<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
<button on='tap:sidebar1.close'>x</button>
<ul>
<li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
<li>Nav item 3</li>
<li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
<li>Nav item 6</li>
</ul>
</amp-sidebar>
<button class="hamburger" on='tap:sidebar1.toggle'></button>

<button on='tap:sidebar1.open'>Open</button>
>/body<
171

‫‪AMP-Social-Share‬‬
‫این تگ برای نمایش دکمه های اشتراک گذاری در صفحه ‪ amp‬استفاده میشود‪.‬‬ ‫⚡‬
‫برای استفاده از این سیستم باید کتابخانه ‪ amp-social-share‬را در هدر صفحه لود کنید‪.‬‬ ‫⚡‬
‫برخی از شبکه های اجتماعی و روش های اشتراک گذاری به صورت پیش فرض تعریف شده اند‪.‬‬ ‫⚡‬
‫‪Web Share API‬‬ ‫‪LinkedIn‬‬ ‫‪Twitter‬‬
‫‪Email‬‬ ‫‪Pinterest‬‬ ‫‪Whatsapp‬‬
‫‪Facebook‬‬ ‫‪G+‬‬ ‫‪SMS‬‬
‫برای سایر شبکه های اجتماعی مانند ‪ telegram‬از لینک دهی اختصاصی استفاده میشود‪.‬‬ ‫⚡‬
‫‪172‬‬

Web Share API
173

>head<
<script async custom-element="amp-social-share"
src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
>/head<
>body< ‫دکمه های اشتراک گذاری با مقادیر پیش فرض‬
<amp-social-share type="email"></amp-social-share>
<amp-social-share type="facebook"
data-param-app_id="254325784911610">
</amp-social-share>
<amp-social-share type="linkedin"></amp-social-share>
<amp-social-share type="pinterest"
data-param-media="https://ampbyexample.com/img/amp.jpg">
</amp-social-share>
<amp-social-share type="twitter"></amp-social-share>
>/body<
174

>body< ‫دکمه های اشتراک گذاری با محتویات دلخواه‬
<amp-social-share type="linkedin"
width="40"
height="40"
data-param-text="Check out these AMP Examples!"
data-param-url="https://ampbyexample.com/"
</amp-social-share>
>/body<
.‫ دریافت میشود‬title ‫ عنوان را مشخص میکند که به صورت پیش فرض از تگ‬data-param-text ‫تگ‬ ⚡
‫ آدرس اشتراک گذاشته شده را مشخص میکند که به صورت پیش فرض آدرس‬data-param-url ‫تگ‬ ⚡
.‫صفحه است‬
175

‫‪AMP-Accordion‬‬
‫این تگ برای نمایش منوهای بازشوند و دکمه های نمایش بیشتر استفاده میشود‪.‬‬ ‫⚡‬
‫برای استفاده از این سیستم باید کتابخانه ‪ amp-accordion‬را در هدر صفحه لود کنید‪.‬‬ ‫⚡‬
‫از این گزینه در سایدبار و برای ساخت منو نیز میتوان استفاده کرد‪.‬‬ ‫⚡‬
‫‪176‬‬

>body<
<amp-accordion expand-single-section>
<section>
<h2>Section 1</h2>
<p>Content in section 1.</p>
</section>
<section expanded>
<h2>Section 3</h2>
<amp-img src="images/squirrel.jpg"
width="320"
height="256"></amp-img>
</section>
</amp-accordion>
>/body<
177

‫<‪>head‬‬
‫"‪<script async custom-element="amp-accordion‬‬
‫>‪src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script‬‬
‫<‪>/head‬‬
‫هر ‪ accordion‬باید حداقل یک ‪ section‬داشته باشد‪.‬‬ ‫⚡‬

‫هر ‪ section‬باید دقیقا از دو المان زیر مجموعه تشکیل شده باشد‪.‬‬ ‫⚡‬
‫اولین المان زیرمجموعه ‪ section‬باید تگ ‪ h‬باشد و بعنوان عنوان دکمه استفاده میشود‪.‬‬ ‫⚡‬
‫المان زیر مجموعه دوم میتواند هر نوع محتوایی باشد‪.‬‬ ‫⚡‬
‫میتوان در داخل یک ‪ accordion‬یک ‪ accordion‬زیر مجموعه تعریف کرد‪.‬‬ ‫⚡‬
‫عبارت ‪ expanded‬مشخص میکند که کدام بخش به صورت پیش فرض باز باشد‪.‬‬ ‫⚡‬
‫عبارت ‪ expand-single-section‬موجب میشود همیشه تنها یک بخش باز باشد‪.‬‬ ‫⚡‬
‫‪178‬‬

‫سایر امکانات ‪AMP‬‬
‫کتابخانه ‪ AMP‬شامل دستورات و المان های بسیاری می باشد که معرفی همه آنها زمان زیادی نیاز دارد‪.‬‬
‫در این آموزش ما مهمترین و کاربردی ترین ها را بررسی کردیم‪.‬‬
‫برای آشنایی با سایر امکانات و توانایی های ‪ AMP‬به سایت ‪ ampproject.org‬مراجعه کنید‪ .‬برخی از‬
‫مهمترین امکانات باقی مانده به شرح زیر است‪:‬‬
‫‪Forms‬‬ ‫‪Web Push‬‬ ‫‪Parallax‬‬
‫‪Ad banner‬‬ ‫‪Lightbox‬‬ ‫‪Sticky Ad‬‬
‫‪Notification‬‬ ‫‪Fx Collection‬‬ ‫‪List‬‬
‫‪179‬‬

‫‪AMP Validator‬‬
‫بررسی صحت کدهای ‪ AMP‬برای هر صفحه‬
‫در صورت وجود خطا در صفحات ‪ amp‬و عدم رعایت استانداردها‪ ،‬نسخه ‪ amp‬سایت شما در نتایج گوگل‬
‫نمایش داده نمیشود‪.‬‬
‫برای آنکه از صحت کدهای خود در نسخه ‪ AMP‬مطمئن شوید گوگل یک ابزار تست ارایه کرده است‪.‬‬
‫‪https://validator.ampproject.org‬‬
‫‪180‬‬

AMP Validator
‫ برای هر صفحه‬AMP ‫بررسی صحت کدهای‬
181

Technical SEO

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Technical SEO

Uploaded by

Copyright:

Available Formats

Complete Technical SEO Guide for Developers

‫و ارتباط میان صفحات است‪.‬‬

‫‪Meta Tags‬‬ ‫‪ -1‬تگ های ‪HTML‬‬

‫‪Page Speed Optimization‬‬ ‫‪ -2‬بهینه سازی سرعت سایت‬

‫‪Structured Data‬‬ ‫‪ -3‬نشانه گذاری استاندارد‬

‫‪Accelerated Mobile Pages‬‬ ‫‪ -4‬استفاده از ‪AMP‬‬

‫سئو تکنیکال چیست؟‬

‫هر صفحه ‪ HTML‬از دو بخش اصلی ‪ head‬و ‪ body‬تشکیل شده است‪.‬‬

‫… ‪H ,a, p, span, img, div,‬‬ ‫صفحه است‪.‬‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫ و تاثیر آنها بر سئو‬HTML ‫تگ های‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫این تگ مستقیما بر روی سئو تاثیرگذار نیست‪.‬‬ ‫>‪<3‬‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫سایت هایی که ریسپانسیو نیستند این تگ را در هدر خود ندارند‪.‬‬ ‫>‪<4‬‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫عبارت ‪ noindex‬به گوگل دستور میدهد که صفحه را ایندکس نکند‪.‬‬ ‫>‪<2‬‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫ و تاثیر آنها بر سئو‬HTML ‫تگ های‬

‫ و تاثیر آنها بر سئو‬HTML ‫تگ های‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫داده و سریعتر محتوا را دریافت میکند‪.‬‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫… ‪H ,a, p, span, img, div,‬‬ ‫صفحه است‪.‬‬

‫تگ های ‪ HTML‬به دو دسته ‪( semantic‬معنایی) و ‪( non-semantic‬بدون معنا) تقسیم میشوند‪.‬‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ ‪ a‬برای لینک سازی داخلی و خارجی استفاده میشود‪.‬‬ ‫>‪<1‬‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ ‪ img‬یکی از تگ های تاثیرگذار و مهم در سئو است‪.‬‬ ‫>‪<1‬‬

‫ریسپانسیو استفاده میکنیم‪.‬‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ ‪ span‬از انواع ‪ non-semantic‬است و مفهوم خاصی ندارد‪.‬‬ ‫>‪<1‬‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫‪ Section‬برای جداسازی بخشی از محتوا در صفحه استفاده میشود‪.‬‬ ‫>‪<1‬‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫محدودیتی در استفاده از تگ ‪ article‬در یک صفحه وجود ندارد‪.‬‬ ‫>‪<4‬‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

.‫ داشت‬header ‫در یک صفحه میتوان چندین تگ‬ <2>

‫ و تاثیر آنها بر سئو‬HTML ‫تگ های‬

‫در یک صفحه میتوان چندین تگ ‪ footer‬داشت‪.‬‬ ‫>‪<2‬‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬

‫‪ aside‬یک محتوای وابسته به صفحه یا ‪ section‬را شامل میشود‪.‬‬ ‫>‪<1‬‬

‫محدودیتی در استفاده از تگ ‪ aside‬در یک صفحه وجود ندارد‪.‬‬ ‫>‪<4‬‬

‫تگ های ‪ HTML‬و تاثیر آنها بر سئو‬