دسته: سئو

انواع فیلد 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 یا نسبت کلیک به نمایش، تاثیر غیر مستقیم در بهبود رنکینگ خواهد داشت. بنابراین یکی از مواردی که در سئوی حرفه ای به آن دقت ویژه می شود، استفاده از اطلاعات ساختار یافته است.

میانگین ارزیابی
پنج دلیل بانس ریت بالا

5 علت رایج bounce rate بالای سایت

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

bounce rate سایت چیست؟

عبارت bounce rate بیانگر درصد بازدیدکنندگانی است که پس از ورود به وبسایت، فقط یک صفحه را دیده اند و از سایت خارج شده ‌اند. در حقیقت کاربرانی که وارد سایت شده و فقط یک صفحه را مشاهده کرده باشند و به صفحات دیگر نرفته باشند به عنوان bounce تلقی می شوند.
واحد اندازه‌گیری نرخ bounce به صورت درصد است. به عنوان نمونه اگر از یک سایت در مدت زمان مشخصی یکصد بازدید انجام شود و کاربران در بیست عدد از بازدیدها فقط یک صفحه را دیده باشند، آنگاه سایت مورد نظر در همان مدت زمان مشخص دارای 20 درصد bounce rate خواهد بود.

مشاهده bounce rate سایت از طریق گوگل آنالیتیکس با توجه به تصویر زیر از طریق منوی Audience Overview امکان‌پذیر است. البته راه های بسیاری بدین منظور وجود دارد که در ایجا به یکی از آن روشها اشاره شده است:

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

اگر هنوز سایت خود را در Google Analytics ثبت نکرده اید، مقاله آموزش اضافه کردن سایت در گوگل آنالیتیکس برای شما مفید خواهد بود.

آیا bounce rate خطرناک است؟

میزان bounce rate با توجه به نوع طراحی و همچنین نوع کاربری یک وبسایت می تواند متفاوت باشد. به عنوان مثال سایتی که با فلش طراحی شده باشد و فقط یک آدرس URL داشته باشد، به طور طبیعی دارای bounce rate صد درصد است و جای نگرانی ندارد. معمولا نرخ bounce نرمال در سایت های غیر از فلش در حدود ۴۰ تا ۵۵ درصد است و در صورتیکه این عدد از ۷۰ درصد عبور کرد باید سایت از نظر مشکلات احتمالی بررسی گردد. البته همانطور که اشاره شد سایتهای گوناگون با توجه به نوع کاربریشان نیز می توانند bounce rateهای گوناگونی داشته باشند و داشتن bounce rate بالا الزاما جای نگرانی ندارد ولی باید بررسی گردد. به عنوان نمونه کاربران در یک فروم معمولا از صفحات بیشتری نسبت به یک سایت فروشگاهی بازدید می کنند.

علت bounce rate بالا در بسیاری از سایت ها:

موارد زیادی هستند که منجر به bounce rate بالا می شوند که در ادامه به پنج عدد از علت های رایج آن اشاره شده است:

1- سرعت کم بارگذاری صفحه

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

همانطور که در مقاله سئوی حرفه ای و سایت موبایل فرندلی سریع گفته شد، بر اساس آمار رسمی گوگل، به طور میانگین 53 درصد از کاربرانی که از دستگاه‌هایی مانند تلفن همراه برای استفاده از اینترنت استفاده می کنند، در صورت باز نشدن یک صفحه در زمان ۳ ثانیه، آن صفحه را ترک کرده و به سراغ صفحه دیگری خواهند رفت.

بارگذاری سایت در سه ثانیه2- صفحه بی کیفیت یا کم کیفیت

یکی از دلایل رایج bounce rate بالای سایت، بی کیفیت یا کم کیفیت بودن محتوای صفحات است که منجر به آزرده شدن کاربر و در نهایت بستن صفحه و یا خروج از سایت می گردد. پس تلاش کنید:

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

3- وجود back-link غیر مرتبط

وجود بنرهای تبلیغاتی و یا هر نوع back-link در سایتهای غیر مرتبط و یا با موضوعات غیر مرتبط منجر به bounce rate بالا خواهد شد. پس سعی کنید بنرهای تبلیغاتی خود را در سایت های مرتبط با موضوع فعالیت سایت خودتان منتشر نمایید و یا جهت تبلیغات، از سرویس هایی مانند گوگل ادوردز استفاده کنید که از نظر میزان هدفمندی تبلیغات در اینترنت از کیفیت بسیار بالایی برخوردار است و البته استفاده صحیح از امکانات Google AdWords نیاز به تخصص خاص خودش را دارد.

4- طراحی UX نامناسب

مواردی مانند باز شدن pop-up ناخواسته در صفحه، نمایش تبلیغات متعدد به کاربر، نمایش تبلیغاتی که از نظر ظاهری به علت مواردی مانند چشمک زدن بیش از حد باعث آزار کاربر می شوند و یا اجبار کاربر به ثبت نام جهت استفاده از سایت، منجر به خروج کاربر از سایت و در نهایت افزایش bounce rate می گردد. پس در طراحی UX یا همان User Experience حداکثر تلاشتان را بکنید که رضایت کاربر را از استفاده از سایتتان جلب نمایید.

5- طراحی UI نامناسب

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

میانگین ارزیابی
دوره آموزش سئو در مجتمع فنی تهران

دوره آموزش سئو در مجتمع فنی تهران

مجتمع فنی تهران در سال 1358 تاسیس گردیده و همواره در آموزش دوره های فنی و مهندسی، طراحی وب سایت، انواع برنامه نویسی، عکاسی، معماری و موارد متعدد فنی و مهندسی دیگر پیشرو بوده است و با داشتن بیش از 60 شعبه در سراسر کشور، سهم بسیار مهمی در آموزش بیش از 1.5 میلیون نفر را داشته است.

ثبت نام دوره SEO در مجتمع فنی تهران:

دوره آموزش SEO یا بهینه سازی برای موتورهای جستجو توسط پارتنر رسمی گوگل کانادا در مجتمع فنی تهران نمایندگی سیدخندان از مهر سال 1395 در حال برگذاریست و در هر دوره علاقه مندان به سئوی علمی و حرفه ای مطالبی در مورد عملکرد الگوریتم های گوگل، سرویس هایی مانند گوگل سرچ کنسول، گوگل آنالیتیکس و همچنین مواردی مانند اصول تولید محتوا، نقشه سایت، استراکچرد دیتا، دستورالعمل های گوگل وبمستر و موارد متعدد دیگر می آموزند. شما می توانید جهت ثبت نام در کلاس آموزش سئو مجتمع فنی تهران نمایندگی سید خندان به وبسایت آن مرکز به آدرس https://www.mftsk.com مراجعه نمایید.

مجتمع فنی تهران نمایندگی سید خندان

آزمون های آنلاین SEO در مجتمع فنی تهران نمایندگی سید خندان:

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

آزمون SEO شماره 1

آزمون SEO شماره 2

میانگین ارزیابی
اطلاعات ساختار یافته یا Structured data چیست

اطلاعات ساختار یافته یا Structured data چیست؟

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

استراکچرد دیتا فیلم
کاربرد استراکچرد دیتا در نمایش اطلاعات یک فیلم

تاثیر استراکچرد دیتا بر سئو:

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

در نتیجه استفاده از Structured data در سئوی حرفه ای بسیار حائز اهمیت است و یک سئوکار مجرب باید با انواع استانداردهای استراکچرد دیتا آشنا باشد و بتواند به بهترین نحو از آنها استفاده کند. ضمنا استفاده غیر اصولی از استراکچکرد دیتا که به قصد فریب الگوریتم های موتور جستجو به سایت اضافه شده باشد ممکن است به جریمه گوگل منجر شود.

نحوه نمایش صفحات دارای استراکچرد دیتا در SERP:

استراکچرد دیتا ریویو
کاربرد استراکچرد دیتا در نمایش تعداد ریویوکنندگان و میانگین امتیاز داده شده توسط آنان

 

استراکچرد دیتا دستور پخت غذا
کاربرد استراکچرد دیتا در نمایش دستورالعمل طبخ غذا

 

استراکچرد دیتا محصول
کاربرد استراکچرد دیتا در نمایش مشخصات فنی یک محصول

آموزش استفاده از Structured data:

استانداردهای استراکچرد دیتا بسیار متعدد هستند و همواره در حال تکمیل شدن نیز هستند. نحوه پیاده سازی Structured data در سایت یکی از موارد مهمی است که در دوره آموزش سئوی حرفه ای که توسط پارتنر رسمی گوگل کانادا در ایران و در محل دفتر وب یوز و یا در مجتمع فنی تهران برگذار می گردد، تدریس می شود.

استانداردهای استراکچرد دیتا از کجا می آیند؟

معروف ترین سایت برای معرفی استانداردهای استراکچرد دیتا، سایت schema.org است که در سال 2011 توسط موتورهای جستجوی بزرگی مانند گوگل، بینگ، یاهو و یاندکس ایجاد شده و هموراه توسعه داده می شود و استانداردهای بسیاری تا کنون برای محصولات، محل ها، رویدادها، افراد، مقاله، کتاب، شرکت ها و موارد متعدد دیگر توسط این شرکتها وضع شده است که همگی به درک موتورهای جستجو از سایت یا ایمیل کمک خواهند کرد.

فرمت های قابل استفاده برای پیاده سازی استراکچرد دیتا:

روشهای متعددی برای پیاده سازی Structured data در سایت و یا ایمیل وجود دارند از قبیل RDFa و Microdata و JSON-LD. در حال حاضر همه موتورهای جستجوی بزرگ قابلیت فهم هر سه نوع را دارند ولی از سال 2016 گوگل به همه سئوکاران توصیه میکند که از JSON-LD برای پیاده سازی استراکچرد دیتا در سایت ها استفاده کنند و این بدان معنی است که ممکن است در آینده روش RDF-a و Microdata دیگر پشتیبانی نشود.

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