انجمنصفحه اولجستجوی انجمن

[Lantern]

برای طراحی یه صفحه وب ، طراح صفحات وب باید پارامترهای مختلفی رو مد نظر داشته باشه و زمانی میتونه ادعا کنه که یه صفحه وب یا بطور جامع تر یه وب سایت خوب و استاندارد طراحی کرده که جنبه های مختلف مثل کارآیی و زیبایی و بهینه بودن برای موتور های جستجو و استانداردهای اولیه و اساسی لازم برای طراحی وب رو رعایت کرده باشه.
معمولاًً مواردی رو که ذکر کردم تعداد زیادی از پارامترها رو در برمیگیره که گاهاً طراح ممکنه بعضی رو فراموش کنه یا حتی با تاثیرگذار بودن بعضی آشنا نباشه.
چند وقت پیش مطلبی رو توی یه فایل pdf که درباره استاندارهای طراحی مطالبی رو مطرح کرده بود و عنوان ترجمه و تالیف هم روی فایل بود خوندم.به نظرم مطالب بسیار خوب و تقریباً جامع و کاملی رو درباره مسائلی که مطرح کردم بیان کرده بود.منم با اجازه مولف و مترجم متن آقای وحید قربانی مطلب رو برای استفاده شما دوستان اینجا قرار میدم. البته مطلب نسبتاً طولانیه و من سعی میکنم اون رو در چندین پست آماده کنم واینجا قرار بدم.
در واقع طراح وب میتونه از این مطلب به عنوان یه check list ضمن طراحی خودش استفاده کنه.
===============================================================================

موارد مربوط به بهینه سازی سایت برای موتورهای جستجو

۱ - آیا صفحه شما حاوی اطلاعات مناسب است ؟
یکی از مواردی که باید مد نظر داشته باشید محتوای سایت شماست. گاها افراد میخواهند در گوگل بالاترین رتبه را داشته باشند ولی سایت آنها حاوی هیچ محتوایی نیست. محتوای با کیفیت برای سایت خود فراهم کنید.

۲ - آیا کلمات کلیدی مناسب را برای متن خود انتخاب کرده اید ؟
یافتن کلمات کلیدی مناسب برای نوشتن مطلب اهمیت فراوانی دارد. کلمات کلیدی مناسب را میتوانید با استفاده از ابزارهای همچون adwords keyword tool انتخاب کنید.

۳ - آیا در هنگام کد نویسی صفحه از کدنویسی semantic استفاده کرده اید ؟
در کدنویسی HTML باید همیشه تگها را به شکل درست به کار ببرید. تیترها را داخل تگهای H1 تا H6 قرار داده و هر بخشی را در تگ مربوط به خود قرار دهید. از این طریق موتورهای جستجو درک بهتری از محتوای صفحه خواهند داشت.

۴ - آیا محتوای صفحات و تکنیکهایی که به کار گرفته اید، منطقیاند؟
گاهاً طراحان سعی میکنند مطالبی را در صفحه بگنجانند که اصلا ربطی به موضوع اصلی مقاله ندارد.تنها هدفشان این است که کلمات کلیدی خاص را در صفحه جاسازی کنند. و یا کلمات کلیدی غیر مرتبط زیادی را در metatag ها قرار میدهند. موتورهای جستجو از شما باهوشترند! این ترفندها نیز از سوی آنها شناسایی میشود و سایت شما به خاطر تخلف جریمه خواهد شد و از لیست جستجو حذف
میشوید.

۵ - آیا آدرس صفحه شما کاربر پسند است ؟
یکی از موارد مهم این است که باید آدرس صفحات را کاربر پسند تنظیم کنید. آدرسها باید ساده و قابل حفظ کردن و همچنین کوتاه باشد. از به کار گیری آدرسهای طولانی و مملو از پارامتر پرهیز کنید ؟

۶ - تیتر صفحه شما به درستی انتخاب شده است ؟
تیتر صفحه که در داخل تگ title قرار میگیرد بسیار مهم است. متن داخل این تگ باید به درستی انتخاب شود زیرا بیشتری تاثیر را در فهرست شدن صفحه شما در موتورهای جستجو دارد.

۷ - آیا کلمات کلیدی را داخل keyword metatag قرار داده اید ؟
قرار دادن کلمات کلیدی داخل متاتگ keyword از دید گوگل ارزش چندانی ندارد و این موتور جستجو اهمیتی به این متاتگ نمیدهد ولی موتورهای جستجوی دیگر به این بخش توجه نشان میدهند. محتوای این متاتگ را کوتاه و مرتبط با محتوای صفحه تنظیم کنید. از قرار دادن یک متاتگ ثابت برای همه صفحات به شدت پرهیز کنید.

۸ - آیا برای مطالب خود description metatag در نظر گرفته اید ؟
این متاتگ نیز در بالا رفتن موقعیت سایت شما در صفحه نتایج تاثیر چندانی ندارد و تنها متن داخل این متاتگ در صفحه نتایج به عنوان توضیح در زیر لینک صفحه شما قرار میگیرد. اگر این متن را به درستی تنظیم کنید، شانس بیشتری دارید که کاربران بر روی لینک شما کلیک کنند و وارد سایت شما شوند.

۹ - آیا کلمات کلیدی را در آدرس صفحه قرار داده اید ؟
کلمات کلیدی داخل آدرس صفحه از دید موتورهای جستجو با اهمیت است. سعی کنید کلمات کلیدی متن را داخل آدرس صفحه نیز قرار دهید. البته تا جایی که امکان دارد از وارد کردن کلمات کلیدی فارسی در آدرس صفحه پرهیز کنید زیرا این آدرس تبدیل به کد شده و آدرس صفحه شما را بسیار طولانی میکند.

۱۰ - آیا کلمات کلیدی مورد نظر را در متن صفحه تکرار کرده اید ؟
یکی از موارد مهم در بالا بردن ارزش یک صفحه برای یک کلمه کلیدی خاص، تکرار کردن آن کلمه در صفحه است. البته در تکرار کلمه باید احتیاط به خرج دهید و کلمه مورد نظر را تنها چند بار تکرار کنید. تکرار بیش از حد یک کلمه از دید موتورهای جستجو spam به حساب خواهد آمد.

۱۱ - آیا بخش navigation سایت خود را به درستی طراحی کرده اید ؟
بخش navigation اهمیت بسیار زیادی دارد. موتورهای جستجو از طریق این بخش میتوانند صفحات داخلی سایت شما بیابند. اگر در طراحی این بخش از JavaScript استفاده کرده باشید و این استفاده به شکلی باشد که در نبود جاوا اسکریپت نشود از این بخش استفاده کرد، موتورهای جستجو در فهرست کردن محتوای سایت شما با مشکل جدی مواجه خواهند شد. این بخش را ساده و مرتبط نگاه دارید.

۱۲ - آیا به مطالب داخل سایت خود لینک داده اید ؟
یکی از مواردی که به فهرست شدن سریعتر سایت شما کمک میکند، لینک دادن از داخل یک مطلب به مطلب مرتبط دیگر است. این کار به موتورهای جستجو کمک میکند تا مطالب مرتبط به هم را در سایت شما بهتر بیابند و شانس شما برای فهرست شدن صفحه مورد نظرتان بالا میرود. سعی کنید به مطالب مرتبط در سایت خود لینک دهید.

۱۳ - آیا متن داخل لینکهای شما مناسب است ؟
متن داخل لینکهای شما باید مفهوم باشد. از به کاربردن عباراتی همچون اینجا کلیک کنید و یا این مقاله را بخوانید پرهیز کنید و به جای آن تیتر مقاله را داخل تگ لینک قرار دهید. به این شکل به گوگل کمک میکنید تا درک بهتری از صفحه مقصد به دست بیاورد.

۱۴ - آیا تصاویر داخل صفحه شما alt دارد؟
موتورهای جستجو نمیتوانند متن داخل تصاویر را ببینند و یا تصاویر را درک کنند. این متن alt است که اطلاعات مربوط به تصویر را در اختیار موتورهای جستجو قرار میدهد. متن داخل این خصوصیت را به درستی و با دقت بنویسید تا موقعیت بهتری در موتورهای جستجو به دست آورید.

۱۵ - آیا برای سایت خود sitemap ساخته اید ؟
سایتمپ یا همان نقشه سایت به کاربران و موتورهای جستجو کمک میکند تا مطالب مورد نظرشان را به آسانی بیابند و ساختار سایت شما را به شکل بهتری درک کنند. از این رو داشتن این بخش در سایت اهمیت ویژه ای دارد.

۱۶ - آیا برای سایت خود XML Sitemap ساخته اید؟
این فایل یک فایل متنی با فرمت XML است که آدرس کلیه صفحات شما و میزان به روزشدنشان را شامل میشود. این پروتکل نخست توسط گوگل ارائه شد و سپس توسط یاهو و مایکروسافت نیز استفاد شد. ابزارهای زیادی وجود دارند که این بخش را برای سایت شما میسازند. پس از ساخت این بخش باید آن را به موتورهای جستجو معرفی کنید.

۱۷- آیا از فایل robots.txt استفاده میکنید ؟
این فایل به موتورهای جستجو میگوید که اجازه دسترسی به کدام قسمت از سایت را دارند. با استفاده از این فایل میتوانید برای موتورهای جستجو تعیین کنید که حق دسترسی و فهرست کردن چه مطالبی را ندارند. با استفاده از این فایل میتوانید از فهرستشدن مطالب بی محتوا و بدون استفاده خود جلوگیری کنید.

۱۸- تعداد لینکهای سایت خود را زیر ۲۰۰ لینک نگه داشته اید ؟
گوگل پیشنهاد کرده بود که لینکهای خروجی از یک صفحه را زیر ۱۰۰ لینک نگه دارید ولی اکنون میتوان تا ۲۰۰ لینک را در یک صفحه داشت. مقدار بیش از این ممکن است ارزش صفحه شما را کاهش دهد.

۱۹ - برای سایت خود لینک جمع آوری کرده اید ؟
هر چقدر لینکهایی که به سایت شما داده میشود بیشتر باشد از دید گوگل شما سایت ارزشمندتری دارید. تا جایی که میتوانید سعی کنید از سایتهای دیگر لینک به دست آورید و به سایت خود لینک دهید. اینکار ارزش سایت شما را نزد گوگل افزایش میدهد.

۲۰ - لینکهای شکسته سایت خود را کنترل کرده اید ؟
گاها بعد از تغییر آدرس صفحه شما، همچنان از دیگر سایتها به صفحه قبلی لینک داده شده است.اینکار باعث دریافت یک پیغام خطای ۴۰۴ میشود. اگر آدرس صفحه ای را تغییر میدهید، حتما آدرس قبلی را به آدرس جدید redirect کنید.

[Lantern]

موارد مربوط به performance سایت

۱ - درخواستهای HTTP را تا حد امکان کاهش داده اید ؟
یکی از مهمترین فاکتورها برای افزایش سرعت بارگذاری سایت، کاهش درخواستهای HTTP است. هر چقدر این درخواستها کمتر شود صفحات شما با سرعت بیشتری باز خواهد شد. با تکنیکهای مختلفی از جمله cache کردن محتوا و یا استفاده از CSS Sprite ها میتوان تعداد این درخواستها را کاهش داد.

۲ - از CDN ها استفاده می کنید ؟
درخواست فایلها از طریق اینترنت همیشه با تاخیر همراه است. اگر فایلها را در جایی نزدیک به محل زندگی کاربر قرار دهید، سرعت دریافت فایل بالاتر میرود زیرا این تاخیر کاهش مییابد. با استفاده از سرویس های CDN میتوانید فایلها خود را در کشورهای مختلف و بر روی سرورهای مختلف قرار دهید و به نسبت درخواست کاربر همیشه فایل از نزدیک ترین Server برای او ارسال خواهد شد.

۳ - برای فایلهای استاتیک expire header در نظر گرفته اید ؟
زمانی که مرورگر فایلی را دریافت میکند آن را درون cache خود قرار میدهد. حال در مراجعه بعدی از سایت میپرسد که آیا فایلی که درون cache دارد تغییر کرده است یا خیر. این پرسش و پاسخ زمانبر است ولی اگر برای فایل expire header مشخص کنید دیگر مرورگر از server سوال نمیکند و به تاریخ انقضای مشخص شده برای فایل دقت میکند.

۴ - آیا صفحات را با فرمت Gzip فشرده کرده اید ؟
در صورتی که صفحات را با فرمت Gzip فشرده کنید. حجم صفحات تقریبا ۷۰ درصد کاهش می یابد. از این طریق کاربر فایل کوچکتری را دریافت میکند و زمان بارگذاری صفحات کاهش مییابد از طرفی پهنای باند کمتری نیز از سوی server استفاده میشود. همیشه سعی کنید صفحات را Gzip کنید.

۵ - DNS Lookup ها را کاهش داده اید ؟
هر زمانی که فایلی از یک server درخواست میشود، سیستم شما باید نخست آدرس IP سرور مربوط را پیدا کند. این فرآیند زمانبر است و هر چقدر فایلهای شما بر روی سرورهای بیشتری پراکنده باشد زمان بیشتری برای یافتن آدرس سرورها صرف میشود. فایلها را تنها بر روی سرورهای معدودی قرار دهید.

۶ - فایل های CSS را در بالای سند قرار داده اید ؟
فایل های CSS را باید در بالای سند خود قرار دهید در غیر این صورت مرورگرها تا دریافت کامل فایل CSS صفحه شما را به کاربر نشان نمی دهند. این مورد برای کاربران مناسب نیست. سعی کنید همیشه فایل های CSS را در بالای صفحه قرار دهید.

۷ - فایلهای javascript را در پایین سند قرار داده اید ؟
مرورگرهای وب تا زمانی که فایل جاوا اسکریپت به طور کامل دانلود نشده و اجرا نشده باشد نه صفحه را به کاربر نشان میدهند و نه فایل دیگری را به طور همزمان از server دریافت میکنند از این رو اگر این فایلها در بالای سند قرار بگیرند، صفحه دیرتر برای کاربر نمایش داده میشود. این فایلها را درزیر صفحه خود قرار دهید.

۸ - از CSS Expression ها استفاده نکنید.
استفاده از Expression ها باعث کندی صفحه میشود زیرا با هر event ای که اتفاق میافتد این دستورات بارها اجرا میشوند. به جای ستفاده از این expression ها از جاوا اسکریپت استفاده کنید. با استفاده ازجاوا اسکریپت میتوانید اجرا شدن کد را به یک event خاص محدود کنید و از اجرا شدن بیهوده دستورات جلوگیری کنید.

======================================

ان شاءالله باقی مطالب در فرصت بعدی...

(البته ظاهراً استقبال از این گونه مطالب در حد صفر هست و کسی بجز تعدادی از دوستان عزیز اون رو دنبال نمیکنن)
فکر میکردم این مطلب و سایر مطالب این بخش مباحث کاربردی با استقبال و بازدید بیشتری دنبال بشه ولی نمیدونم چرا دوستان به این بخش ها راغب نیستن؟؟؟؟
فکر کنم با این روند ما چند نفر هم دیگه ادامه ندیم و مباحث به حال خودش رها بشه!

[Lantern]

ادامه موارد مربوط به performance سایت

۹ - فایل های CSS و JS را در فایلهای external قرار داده اید ؟
زمانی که فایلهای CSS و JS را در فایلهای خارجی قرار دهید. مرورگرها میتوانند فایلها را cache کنند. از این طریق در مراجعات بعدی دیگر این فایلها دریافت نمیشوند و زمان بارگذاری صفحات سریع تر میشود. البته استفاده از فایلهای CSS و JS به شکل inline سریعتر است چون دیگر برای دریافت inline دستورات هیچ درخواست HTTP ای ارسال نمیشود ولی اگر دستورات inline استفاده شوند با هر بار بازدید از صفحه کلیه دستورات باید از اول دریافت شوند چون دستورات inline بخشی از کد صفحه به حساب میآیند.

۱۰ - فایلهای javascript و CSS را minify کرده اید ؟
با استفاده از برخی ابزارهای آنلاین میتوانید کلیه فاصله های خالی موجود در این فایلها را حذف کنید که برای CSS اغلب تا ۱۵ درصد صرفه جویی سایز و برای جاوا اسکریپت نیز گاها تا ۳۰ درصد صرفهجویی در اندازه فایل حاصل میشود. از این طریق میتوانید حجم فایلها را تا جایی که امکان داردکوچک کنید.

۱۱ - آیا Etag ها را تنظیم کرده اید ؟
Etag ها به مرورگرها کمک میکنند که فایلها را شناسایی کنند و اگر فایل را در cache خود در اختیار دارند، دیگر آن را از server درخواست نکنند. البته مشکل اینجاست که این etag ها بر روی سرورهای مختلف به شکلی مختلف نمایش داده میشوند. برای حل این مشکل میتوانید etag ها را به طور کامل حذف کنید و یا بخشهایی که باعث بروز مشکل میشوند را از درون etag ها حذف کنید.

۱۲ - تصاویر را بهینه کرده اید ؟
تصاویر تقریباً ۵۰ درصد از حجم صفحات را شامل میشوند، با بهینه و کمحجم کردن تصاویر میتوانید حجم صفحات را کاهش دهید. ابزارهای مختلفی برای بهینه کردن تصاویر وجود دارد از طرفی با داشتن شناخت از فرمتهای تصویری میتوانید فرمت مناسب را برای هر تصویری انتخاب کنید تا کمترین حجم را برای فایل مورد نظر داشته باشید.

موارد مربوط به استانداردهای طراحی

۱ - آیا Doctype استفاده شده است و آیا این دستور اولین خط کد شماست ؟
همیشه باید doctype سند خود را مشخص کنید تا صفحه شما بر اساس استانداردها نمایش داده شود. اگر این دستور را وارد نکنید، صفحه شما بر اساس استانداردهای قدیمی نمایش داده میشود و باگهایی در طرح بروز خواهد کرد که رفعشان همیشه دردسر ساز و وقتگیر است. علاوه بر این اگر این خط اولین خط کد شما نباشد مرورگر IE6 این این دستور را کلا نادیده میگیرد و صفحه را بر اساس استانداردهای قدیمی به نمایش خواهد گذاشت.

۲ - آیا طرح کاملا tabeless است ؟
Table ها دیگر برای طراحی کلی صفحه استفاده نمیشوند و سالهاست که استفاده از table برای طراحی کلی صفحه منسوخ شده است. از table ها تنها زمانی استفاده کنید که قصد نمایش اطلاعات جدولی را دارید. در حالت کلی باید با استفاده از div و اختصاص کلاس و ID به این div ها صفحات خود را دسته بندی و سبک دهی کنید.

۳ - آیا از فایل reset.css استفاده شده است ؟
مرورگرهای مختلف مقادیر پیش فرضی برای یک سری از خصوصیات هر تگ در نظر میگیرند. این تفاوتها در شیوه نمایش باعث بروز شکلاتی میشود. با استفاده از دستورات reset CSS میتوان استایل پیش فرض در نظر گرفته شده برای عناصر مختلف صفحه را حذف کرد تا بتوان صفحه ای یکسان در مرورگرها ایجاد کرد. معروفترین دستورات reset CSS را آقای eric meyer تهیه کرده است.

۴ - آیا طرح در سایز مناسب به شکل درستی دیده میشود ؟
در حال حاضر کوچکترین سایز مانیتور را ۱۰۲۴ در ۷۶۸ در نظر میگیرند. سایت شما باید در این سایز به درستی و بدون نمایش scroll در زیر صفحه نمایش داده شود. از سویی باید شرایطی را فراهم کنید که کاربرانی که مانیتورهای بزرگتری در اختیار دارند نیز بتوانند سایت شما را به درستی ببینند.

---------------------------------------------------------------
ان شاءالله باقی مطالب در فرصت بعدی...

[Lantern]

ادامه موارد مربوط به استانداردهای طراحی

۵ - آیا متن صفحه را میتوان در اینترنت اکسپلورر بزرگتر کرد ؟
اگر چه مرورگرهای جدید از قابلیت zoom کردن بر روی صفحه پشتیبانی میکنند ولی اینترنت اکسپلورر به کاربران اجازه نمیدهد که متن هایی که سایزشان با pixel مشخص شده است را تغییر سایز دهند. بهتر است سایز متن در صفحه با درصد و یا مقیاس em مشخص شده باشد. در این حالت کاربران مرورگر IE هم میتوانند سایز متن را در صورت لزوم افزایش دهند.

۶ - آیا CSS و HTML را validate کرده اید ؟
Validate کردن فایلهای CSS و HTML از ملزومات نیست ولی اگر فایلهای شما validate شوند با اطمینان خاطر بیشتری میتوانید مشکلات طرح را برطرف کنید. گاها همین مشکلات موجود در فایلهاست که باعث میشود تا صفحه شما به شکل دلخواه به نمایش در نیاید. سعی کنید همیشه صفحات را validate کنید.

۷ - آیا طرح شما در مرورگرهای مختلف یکسان دیده میشود ؟
طرح باید در مرورگرهای مختلف تقریبا یکسان دیده شود. البته شباهت ۱۰۰ درصد طرح در مرورگرهای مختلف الزامی نیست ولی باید شرایطی را فراهم کنید که محتوای سایت شما در مرورگرهای مختلف به شکل درست نمایش داده شود و برای کاربر قابل استفاده باشد. اول طرح را برای مرورگرهای جدید طراحی کنید و سپس در مرورگرهای قدیمی (نسخه های قدیمی) همچون IE آن را ببینید و مشکلاتش را رفع کنید.

۸ - اگر از قابلیت float در CSS استفاده کردهاید آیا در همه جا عناصر بعد از float را clear کرده اید ؟
زمانی که عنصری را float میکنید، عناصر بعد از عنصر مورد نظر دیگر عنصر float شده را نادیده میگیرند و جایش را اشغال میکنند. باید با استفاده از دستور clear از بروز مشکل جلوگیری کنید. البته IE نسخههای ۶ و ۷ مشکلاتی دارند و همیشه box ها را به شکل clear شده نمایش میدهند ولی باگهایی نیز وجود دارد که با اختصاص layout به عنصر مورد نظر میتوان مشکل را برطرف کرد.

۹ - آیا در navigation از جاوا اسکریپت استفاده کرده اید ؟
در صورتی که برای بخش navigation از جاوااسکریپت استفاده کنید و این بخش بدون حضور جاوا اسکریپت فعال نباشد، سایت شما با مشکلات مختلفی روبرو میشود. کاربرانی که این بخش را در مرورگر خود فعال ندارند، قادر به دیدن این بخش نیستند و موتورهای جستجو نیز نمیتوانند این بخش از سایت شما را ببینند.

۱۰ - آیا سایت بدون وجود تصویر و یا در صورت عدم وجود CSS قابل استفاده است ؟
سایت باید به شکلی طراحی شود که در صورت load نشدن تصاویر و یا CSS محتوای متنی صفحات کاملا قابل استفاده باشد. باید سعی شود برای همه بخشهایی که تصاویر پس زمینه در نظر گرفته شده، رنگ پس زمینه با رنگی مشابه تصویر نیز در نظر گرفته شود و در ضمن direction صفحه را نیز بهتر است داخل فایل HTML مشخص کنیم تا در صورت عدم وجود CSS محتوای صفحه قابل خواندن باشد.