دسته: بلاگ

کاربرد CSS image Sprite در سئوی حرفه ای

کاربرد CSS image Sprite در سئوی حرفه ای

در تکنیک CSS image Sprites تعدادی عکس کوچک با یکدیگر ادغام می شوند و یک عکس بزرگتر ایجاد می کنند و سپس با استفاده از CSS عکسهای کوچک درون عکس بزرگتر را در صفحات بارگذاری می کنند. تکنیک CSS Sprite جهت بهینه سازی عکس استفاده نمی شود و جهت بهینه سازی تعداد درخواست هایی که به سرور برای بارگذاری عکسها ارسال می شود، استفاده میشود.

کاربرد CSS Sprite در بهینه سازی سایت برای موتور جستجو

با استفاده از CSS Image Sprites، تعداد درخواست هایی که به سرور زده می شود کاهش می یابد و در نتیجه response time سرور بهبود می یابد. یک سئوکار حرفه ای باید دقت داشته باشد که جهت سئوی حرفه ای سایت باید حداکثر تلاش خود را بکند که تعداد درخواست های که به سرور ارسال می شود بهینه شود که ادغام کردن تعدادی عکس با یکدیگر یکی از این راه ها است.

تاریخچه Image Sprites

در دهه 80 میلادی تولیدکنندگان بازی های اتاری و کمدو برای بالا بردن کارایی سخت افزار اقدام به ترکیب عکسهای کوچکی که در صحنه های مختلف بازی استفاده می شد با یکدیگر کردند و سپس با بارگذاری عکس بزرگتر تولید شده در مموری، قسمتهایی از عکس بزرگتر را در صحنه هایی که می خواستند نمایش می دادند.

تکنیک CSS image Sprites دقیقا از همان تئوری دهه 80 بازی های آتاری تبعیت می کند. در تکنیک CSS Sprites شما می توانید تعدادی عکس را در یک عکس جدید در کنار یکدیگر قرار بدهید و در حقیقت یک فایل عکس داشته باشید که تعدادی عکس دیگر در آن در موقعیت های مختلف در کنار یکدیگر قرار گرفته باشند. سپس شما می توانید عکس مذکور را یک مرتبه لود کرده و سپس با استفاده از مشخص کردن فاصله هر عکس کوچک از لبه های عکس بزرگ و همچنین تعیین پهنای هر عکس کوچک در CSS، اقدام به نمایش عکس کوچک مورد نظرتان کنید.

به عنوان نمونه در شکل زیر تعداد 3 عکس یوز با رنگ های زرد و صورتی و آبی نمایش داده شده اند. سه عکس مذکور در حقیقت درون یک عکس بزرگتر هستند و با استفاده از CSS Sprites در محل دلخواه نمایش داده شده اند.

در کجا از CSS Sprite استفاده کنیم

البته باید به این نکته توجه کرد که استفاده از CSS Sprites همیشه جایز نیست و بیشتر برای صفحاتی مناسب است که تعدادی عکس مشترک در آنها لود می شود و با ادغام کردن عکسهایی که در صفحات مختلف بارگذاری می شوند، شما می توانید تعداد درخواست به سرور را کاهش دهید.

چه زمانی از CSS Sprite استفاده نکنیم

ادغام کردن عکسهایی که فقط در یک صفحه لود می شوند با عکسهایی که در صفحات گوناگون لود می شوند باعث بالا رفتن file size عکسی می شود که در CSS Sprite استفاده می شود و عملا باعث دیرتر لود شدن دیگر صفحات می شود. همچنین ادغام عکس های با file size بالا نیز منجر به تولید یک فایل با file size خیلی بالا می شود که لود آن به زمان زیادی نیاز خواهد داشت که از دیدگاه سئو جالب نیست.

استفاده از CSS Sprite Generator

ادغام کردن عکسها و محاسبه فاصله هر عکس کوچک از لبه های عکس بزرگ و نوشتن CSS کمی وقت گیر است. شما می توانید با استفاده از ابزار های آنلاین مانند سایت http://css.spritegen.com/ به راحتی عکسهای خود را آپلود کنید و یک عکس بزرگ به همراه کلاسهای CSS مورد نیاز و نحوه استفاده از آن در HTML را دریافت کنید.

نمایش صفحات امپ در Google Now

نمایش صفحات امپ در Google Now

همان طور که در مقاله لزوم طراحی سایت امپ گفته شد، پروژه AMP از اکتبر 2015 شروع به فعالیت نمود و گوگل از آن موقع تا کنون در حال توسعه پروژه امپ بوده و همواره کاربرد صفحات امپ را در نتایج جستجو گوگل بیشتر کرده است. در اوایل انتشار پروژه، فقط سایت های خبری که دارای صفحات امپ بودند در صفحات نتایج جستجوی گوگل نمایش داده می شدند. سپس گوگل به تدریج سایت های با موضوعات دیگر را نیز پوشش داد و اکنون تقریبا احتمال نمایش نتایج جستجو به صورت AMP برای هر نوع سایتی که دارای صفحات امپ باشد وجود دارد.

AMP rich cards on Google Now
نمایش کارت های امپ در Google Now

طراحی سایت امپ را جدی بگیرید

در راستای کاربردی تر شدن پروژه امپ، اخیرا گوگل اقدام به نمایش کارت های AMP در سرویس Google Now خود نمود و بدین ترتیب بار دیگر بر اهمیت حرکت به سمت طراحی سایت با در نظر گرفتن صفحات امپ و یا توسعه امپ تاکید نمود.

یکی از علل تاکید گوگل بر طراحی سایت امپ، افزایش کاربران موبایلی اینترنت است به طوریکه بیش از نیمی از جستجوهای انجام شده در گوگل توسط دستگاه های همراه انجام می شود و در دستگاه های همراه به دلایل محدود بودن سخت افزار و سرعت اینترنت و همچنین وقت کاربر، بارگذاری سریع صفحات باعث ماندگاری بیشتر کاربر در سایت می شود، بنابراین طراحی سایت موبایل فرندلی سریع یکی از اصول اولیه و بسیار مهم در طراحی سایت و سئوی حرفه ای است.

از چهار ماه پیش در مارچ 2017 نیز موتور جستجوی بایدو چین از صفحات امپ پشتیبانی می کند و سایت های بزرگی مانند لینکداین و توییتر هم که از ابتدا از این پروژه حمایت کردند. همه علائم حاکی از آن است که داشتن سایتی با صفحات امپ از جمله مواردی است که همه طراحان و برنامه نویسان وب باید مد نظر داشته باشند. چراکه اگر هم اکنون در حال طراحی سایت هستید و AMP را نادیده گرفته اید، ممکن است در آینده نه چندان دور مجبور به طراحی مجدد و پرداخت هزینه گردید.

تغییر زبان گوگل ریکپچا

​تغییر زبان گوگل ریکپچا

در مقاله آموزش گوگل ریکپچا با نحوه ثبت سایت در ریکپچای گوگل و اخذ site key و secret key آن آشنا شدید. همان طور که می دانید برای استفاده از ریکپچای گوگل، اسکریپت زیر باید در HTML در قسمت <head> صفحه مورد نظرتان به صورت async defer وجود داشته باشد.

https://www.google.com/recaptcha/api.js

گوگل می تواند زبان کاربر را به صورت اتوماتیک تشخیص دهد ولی اگر قصد دارید گوگل ریکپچا را فقط به زبان مورد نظرتان استفاده کنید، گوگل این امکان را گذاشته است که با استفاده از 3 پارامتر گوناگون بتوانید تغییراتی در ریکپچا بدهید و یکی از آن پارامترها، پارامتر hl برای تغییر زبان ریکپچا است. کافیست که کد زبان مورد نظرتان را از جدول زیر انتخاب نمایید و مانند مثال زیر از آن استفاده کنید تا گوگل ریکپچا به زبان مورد نظر شما به کاربران نمایش داده شود.

https://www.google.com/recaptcha/api.js?hl=fa

گوگل ریکپچا فارسی
گوگل ریکپچا فارسی

 

گوگل ریکپچا انگلیسی
گوگل ریکپچا انگلیسی
پارامترزبان
 en انگلیسی
 fa فارسی
 ar عربی
 de آلمانی
 fr فرانسوی
 ru روسی
 jaژاپنی
 fi فنلاندی
 it ایتالیایی

اگر از CMS های آماده مانند وردپرس و جوملا و دروپال استفاده می کنید، پلاگین هایی هستند که در آنها امکان انتخاب زبان گوگل ریکپچا وجود دارد و در صورت استفاده از آنها دیگر احتیاجی به اضافه نمودن پارامتر زبان hl به اسکریپت گوگل ریکپچا برای تغییر زبان آن نیست و به راحتی می توانید زبان مورد نظرتان را از طریق تنظیمات پلاگین انتخاب نمایید. ولی اگر کدنویسی سایت شما به صورت اختصاصی انجام شده است، با استفاده از پارامتر hl که در ابتدای مقاله در مورد روش استفاده از آن توضیح داده شد، می توانید به راحتی از کپچای گوگل به زبان مورد نظرتان استفاده نمایید.

انواع فیلد HTML5 در طراحی فرم برای موبایل

انواع فیلد HTML5 در طراحی فرم برای موبایل

با توجه به اهمیت بیش از پیش کاربران موبایلی، علاوه بر اهمیت موبایل فرندلی بودن سایت از نظر طراحی و همچنین سریع بودن سایت برای کاربران موبایلی، نکات دیگری در راستای اصول طراحی وبسایت برای موبایل مانند مشخص نمودن نوع فیلد در کد حائز اهمیت است. با پیشرفت زبان HTML و توسعه سیستم عامل های هوشمند مانند اندروید و iOS و ویندوزفون و غیره و همچنین توسعه مرورگرهای اینترنت، امکان نمایش کیبوردهای مجازی متفاوت با توجه به نوع فیلد در تلفن های همراه وجود دارد.

انواع فیلد ورودی در HTML5

فیلدهای ورودی متفاوتی در زبان HTML5 تعریف شده اند که در صورتی که Type یا نوع هر فیلد به درستی انتخاب شود، به علت باز شدن کیبوردهای مجازی مختلف با توجه به نوع فیلد، کاربران موبایل راحت تر می توانند اقدام به ورود اطلاعات و تکمیل فرم در سایت کنند و با افزایش رضایت مندی کاربران از سایت، میزان ماندگاری آنها در سایت بیشتر می شود و به همین دلیل یکی از اصولی که در سئوی حرفه ای به آن دقت می شود، مشخص کردن نوع هر input است که در ادامه به تفکیک در مورد برخی از انواع پرکاربرد input و کاربرد آنها برای کاربران موبایل توضیح داده شده و برای هر نوع input، تصویری از موبایل با سیستم عامل های Android یا iOS نمایش داده شده است.

فیلد url

در صورتیکه فیلد ورودی از نوع url باشد، با توجه به تصویر زیر، کیبورد مناسب جهت نوشتن آدرس URL برای کاربران موبایل باز خواهد شد. ضمنا کاربران فقط می توانند آدرس را به صورت http:// و https:// و ftp:// و mailto: وارد نمایند.
<input type="url">

آدرس URL را وارد نمایید:

 

URL input ios
کیبورد نوشتن URL در iOS

فیلد tel

در صورتیکه ورودی از نوع tel باشد، کیبورد مجازی مناسب جهت نمایش اعداد برای وارد کردن شماره تلفن بر روی موبایل باز می گردد. دقت داشته باشید که استفاده از نوع ورودی tel به معنای اعتبارسنجی دیتای ورودی و یا اجبار نویسنده برای نوشتن شماره تلفن با فرمت خاصی نیست. جهت اجبار کاربر به ورود اطلاعات با فرمت خاص می توانید از pattern در HTML5 استفاده نمایید.

<input type="tel">

شماره تلفن را وارد نمایید:

 

کیپد ورود شماره تلفن در اندروید
کیپد ورود شماره تلفن در اندروید

فیلد number

در صورتیکه ورودی از نوع number باشد، کیبورد مجازی مناسب جهت وارد کردن عدد بر روی موبایل باز می گردد.

<input type="number">

فیلد وارد کردن اعداد:

 

کیپد ورود اعداد در اندروید
کیپد ورود اعداد در اندروید

فیلد email

اگر برای فیلد ورود آدرس ایمیل، نوع input را به صورت email تعریف کنید، کیبوردی که بر روی موبایل باز می شود دارای دکمه @ در دسترس خواهد بود که کاربر موبایل بتواند به راحتی اقدام به وارد کردن آدرس ایمل نماید.

<input type="email">

آدرس ایمیل را وارد نمایید:

 

کیبورد جهت وارد کردن آدرس ایمیل در اندروید
کیبورد نوشتن آدرس ایمیل در اندروید

فیلد date

در صورت استفاده از input با نوع date، مشابه تصویر زیر، تقویم با قابلیت انتخاب روز و ماه و سال به کاربر موبایل نمایش داده می شود.

<input type="date">

تاریخ را انتخاب نمایید:

 

انتخاب تاریخ از تقویم iOS
انتخاب تاریخ از تقویم iOS

فیلد time

اگر از input با نوع time استفاده کنید، مشابه تصویر زیر، امکان انتخاب ساعت و دقیقه و AM و PM وجود خواهد داشت.

<input type="time">

زمان را وارد نمایید:

 

انتخاب زمان در iOS
انتخاب زمان در iOS

فیلد datetime-local

اگر از input با نوع datetime-local استفاده کنید، مشابه تصویر زیر، امکان انتخاب زمان و تاریخ با هم وجود دارد.

<input type="datetime-local">

زمان و تاریخ را وارد نمایید:

 

انتخاب زمان و تاریخ در iOS
انتخاب زمان و تاریخ در iOS

فیلد week

اگر از input با نوع week استفاده کنید، مشابه تصویر زیر، تقویم با قابلیت انتخاب روز و ماه و سال به کاربر موبایل نمایش داده می شود.

<input type="week">

هفته مورد نظرتان را انتخاب نمایید:

 

انتخاب هفته در اندروید
انتخاب هفته در اندروید

فیلد month

اگر از input با نوع time استفاده کنید، مشابه تصویر زیر، تقویم با قابلیت انتخاب روز و ماه و سال به کاربر موبایل نمایش داده می شود.

<input type="month">

ماه مورد نظرتان را انتخاب نمایید:

 

انتخاب ماه در iOS
انتخاب ماه در iOS

فیلد range

اگر از input با نوع time استفاده کنید، مشابه تصویر زیر، تقویم با قابلیت انتخاب روز و ماه و سال به کاربر موبایل نمایش داده می شود.

<input type="range">

محدوده مورد نظرتان را انتخاب نمایید:

 

انتخاب رنج در iOS
انتخاب رنج در iOS

فیلد color

اگر از input با نوع time استفاده کنید، مشابه تصویر زیر، تقویم با قابلیت انتخاب روز و ماه و سال به کاربر موبایل نمایش داده می شود.

<input type="color">

رنگ مورد نظرتان را انتخاب نمایید:

 

انتخاب رنگ در اندروید
انتخاب رنگ در اندروید
انتخاب رنگ با گوگل کروم در اندروید
انتخاب رنگ با گوگل کروم در اندروید

به این نکته توجه داشته باشید که استفاده از نوع صحیح input الزاما به معنی اعتبارسنجی یا validation دیتای ورودی نیست. جهت اعتبارسنجی از تکنیک های مختلف مانند استفاده از Ajax و یا استفاده از pattern در HTML می توانید استفاده نمایید.

Rich result چیست

Rich result چیست؟

گوگل تغییراتی را در نحوه نمایش نتایج جستجو تحت عنوان rich result از اوایل سال 2016 در آمریکا و از اوایل سال 2017 در بیشتر کشورها انجام داد. نتایجی که به صورت rich result هستند، در واقع نتایجی هستند که حاوی اطلاعاتی مانند تعداد رای بازدیدکنندگان، مقدار کالری غذا، تاریخ شروع رویداد، فیلم ها، کتاب ها، شبکه های اجتماعی، اطلاعات شرکت و موارد مشابه دیگری هستند و گوگل این اطلاعات را معمولا از طریق structured data کسب می کند.

با توجه به متفاوت بودن نحوه نمایش rich result نسبت به نتایج عادی در SERP، کلیک بیشتری توسط کاربران بر روی آنها می شود و در نتیجه CTR بالاتر می رود و بدین جهت، استفاده از اطلاعات ساختار یافته بسیار با اهمیت می باشد.

انواع rich result

گوگل نتایج جستجو را هم در موبایل و هم در دسکتاپ می تواند به صورت rich result نمایش دهد که در ادامه به توضیح شیوه های متفاوت نمایش آن پرداخته شده است.

Rich snippet

Rich snippet ها اطلاعات تکمیلی هستند که علاوه بر اسنیپت، در نتایج جستجو نمایش داده می شوند و حاوی اطلاعاتی مانند امتیاز کاربران به کالا یا محصول، قیمت کالا، موجود یا عدم موجودی در انبار و مشخصات فنی است.

Rich snippets

Rich Card

rich card ها نتایجی هستند که در SERP به صورت کارت نمایش داده می شوند و حاوی مواردی مانند اطلاعات دستور طبخ غذا، افراد، مکانها، کتاب ها و موارد بسیار متنوع دیگر هستند و همانطور که در ابتدا به آن اشاره شد، گوگل این اطلاعات را از طریق اطلاعات ساختار یافته به دست می آورد.

rich result برای کتاب و فیلم و دستور طبخ غذا
نحوه نمایش rich result برای کتاب و فیلم و دستور طبخ غذا

Knowledge Graph

Knowledge Graph یا Knowledge Panel باکس اطلاعاتی است که در کنار نتایج جستجو نمایش داده می شود و به عنوان مثال حاوی اطلاعات افراد و شخصیت های شناخته شده، اطلاعات کشورها، شرکت ها و موارد گوناگون دیگر می باشد. همان طور که در قسمت الگوریتم ها توضیح داده شد، یکی از وظایف الگوریتم مرغ مگس خوار گوگل استخراج اطلاعات از سایت ها جهت نمایش آنها در Knowledge Graph است.

Tehran knowledge graph

Featured snippet

Featured snippet نوعی از rich result است که در حقیقت پاسخ عبارتی است که توسط کاربر جستجو شده و این اطلاعات بر خلاف انواع دیگر rich result از اطلاعات ساختار یافته استخراج نشده اند و گوگل آن متن را از درون محتوای صفحه یافته است.

Featured snippet

تاثیر Rich result بر رنکینگ و کاربرد آن در سئو

طبق اعلام رسمی گوگل استفاده از اطلاعات ساختار یافته به صورت مستقیم تاثیری بر محاسبات رنکینگ موتور جستجوی گوگل ندارد ولی اگر شما از اطلاعات ساختار یافته ای استفاده کنید که منجر به نمایش Rich result شود، به دلیل بالاتر رفتن CTR یا نسبت کلیک به نمایش، تاثیر غیر مستقیم در بهبود رنکینگ خواهد داشت. بنابراین یکی از مواردی که در سئوی حرفه ای به آن دقت ویژه می شود، استفاده از اطلاعات ساختار یافته است.

میانگین ارزیابی