رپرتاژ آگهی / سئو و طراحی پارالکس سایت ها

مرواهاست/ پارالکس جزء جديدترين تکنيک‌ها در طراحي وب است که درون بسياري از وب‌سايت‌ها از قبيل Awwwards و theFWA به چشم مي‌خورد. برخي از نويسندگان مقالات عنوان مي‌کنند که طراحي پارالکس با اصول اساسي سئو همخواني ندارد و ايدئال موتورهاي جستجو نيست. موضوع اين است که پارالکس فقط يک تکنيک طراحي وب است و درصورتي‌که به شکل صحيح پياده‌سازي شود، مي‌تواند کاملاً براي موتورهاي جستجو ايدئال باشد. در ادامه ليستي از سايت‌هاي پارالکسي ارائه مي‌کنيم که اتفاقاً تمامي‌شان کاملاً با اصول سئو همگام هستند؛ با بررسي چنين وب‌سايت‌هايي مي‌توانيد با اين تکنيک در سايه سئو آشنا بشويد. تعريف پارالکس و ريشه آن طراحي پارالکس ابتدا در صنعت بازي‌هاي ويدئويي و به‌عنوان يک تکنيک "جلوه‌هاي ويژه" مطرح شد تا مخاطبان بازي‌ها، عمق تصوير را احساس کنند. تعريف ويکي‌پديا از پارالکس به اين صورت است: "طراحي پارالکس نوعي تکنيک خاص براي حرکت درون صفحه در برنامه‌هاي گرافيکي کامپيوتري است که در آن دوربين تصاوير پس‌زمينه را قدري آهسته‌تر حرکت مي‌دهد تا بيننده تصور کند تصوير عمق پيداکرده است." سايت CreativeBloq که از فعالان حوزه طراحي وب است هم اين تعريف را ارائه کرده: "يکي از محبوب‌ترين تکنيک‌هاي طراحي وب در حال حاضر روش پارالکس است که در آن تصوير پس‌زمينه نسبت به تصاويري که بر روي آن قرارگرفته‌اند با سرعت کمتري حرکت مي‌کند تا نوعي افکت سه‌بعدي ايجاد شود. چنين تکنيکي شايد در ابتدا گيج‌کننده به نظر برسد، اما درصورتي‌که به شکل صحيح اجرا شود، مي‌تواند عمق جالبي به تصوير ببخشد." در حقيقت در طراحي پارالکس، لايه‌ها با سرعت مختلفي حرکت مي‌کنند و کاري به ساختار وب يا طراحي يک صفحه خاص نداريم. روش‌هاي رايج فعلي تکنيک پارالکس را بار اول، ايان کويل در سال 2011 بر روي سايت کمپاني نايک پياده‌سازي کرد و اين روزها توانسته طرفداران خاص خودش را پيدا کند. اکثر سايت‌هاي پار الکسي با اصول سئو همخواني ندارند بايد ببينيم دليل اين ادعا چيست؟ اينکه بيشترشان از اصول سئو پيروي نمي‌کنند، دليل خوبي نيست که نتيجه بگيريم نمي‌توانند پيروي کنند. مثال‌هاي زير را در نظر بگيريد: 20 سايت برتر 2013 با طراحي پارالکس 35 سايت نمونه با طراحي پارالکس سايت هاي پارالکسي Awwwards بسياري از اين سايت‌ها معماري وب تک‌صفحه‌اي دارند، درنتيجه بسياري از افراد دچار سوءتفاهم شده‌اند که طراحي پارالکس فقط به سايت‌هاي تک‌صفحه‌اي محدود مي‌شود. اما چطور مي‌توان تکنيک‌هاي پارالکس و سئو را باهم تلفيق کرد؟ چطور يک سايت پار الکسي طراحي کنيم که موتورهاي جستجو هم دوستش داشته باشند؟ قبل از هر چيز بايد چند نکته را در نظر داشته باشيم: • طراحي پارالکس نوعي تکنيک طراحي است که لايه‌هاي مختلف محتوا، عکس يا تصاوير پس‌زمينه را با سرعت‌هاي مختلف حرکت مي‌دهد. • اصول اساسي سئو مثل تهيه schema، تعبيه آدرس داخل فوتر و ... در اين حالت هم کاربرد دارند. بهتر است کار را با يک معماري سئوپسند شروع کنيد و در مرحله آخر، طراحي را بر روي معماري اعمال کنيد. • تکنيک پارالکس براي نسخه‌هاي موبايلي سايت‌ها چندان ايدئال نيست؛ سايت را بيش‌ازحد سنگين مي‌کند و بهتر است از نسخه‌هاي موبايلي حذف شود. در حالت کلي سه تکنيک وجود دارد؛ مثال‌هاي زير وب‌سايت‌هاي پارالکسي را معرفي مي‌کند که کاملاً يا تا حدود زيادي با اصول سئو همگام هستند: تکنيک #1: طراحي سايت "تک‌صفحه‌اي" با استفاده از Jquery: اين فايل آموزشي را کوين الن، متخصص ارشد سئوي کمپاني iProspect آماده کرده و در آن نحوه تلفيق سئو و پارالکس را با استفاده از Jquery توضيح داده است؛ اين تکنيک سايت‌هاي تک‌صفحه‌اي پارالکسي را به نحوي دست‌کاري مي‌کند که براي موتورهاي جستجو هم ايدئال بشوند. ازآنجاکه تعداد سايت‌هاي پارالکسي تک‌صفحه‌اي خيلي زياد است، اين تکنيک را اول‌ازهمه معرفي کردم. توجه داشته باشيد که سايتي که کوين مثال زده واقعاً پارالکسي نيست؛ چون آيتم‌ها را با سرعت‌هاي مختلف حرکت نمي‌دهد؛ بااين‌وجود اين مثال را هم در ليست قراردادم چون مي‌توانيم تکنيکش را بر روي بسياري از سايت‌هاي پارالکسي تک‌صفحه‌اي اعمال کنيم. وبلاگ مديران وب گوگل هم اخيراً مقاله‌اي تحت عنوان طراحي نامتناهي همگام با موتورهاي جستجو منتشر کرده و مسائل مطرح‌شده در مقاله کوين را با جزئيات بيشتري موردبررسي قرار داده است. پيشنهاد مي‌کنم حتماً هر دو مقاله را مطالعه کنيد. درواقع در اين تکنيک از قابليت "PushState" در Jquery استفاده مي‌کنيم تا صفحه موردنظر به چند بخش تفکيک شود و هرکدام با URL و متاديتاي منحصربه‌فرد خودشان داخل صفحات نتايج جستجو ظاهر بشوند. درنتيجه يک صفحه مشخص به ازاي بخش‌هاي مختلف محتوا چند بار انديس گذاري مي‌شود. مزايا: براي سايت‌هاي پارالکسي تک‌صفحه‌اي که تمايل دارند تکنيک‌هاي سئو را اجرا کنند، گزينه بسيار مناسبي است؛ سايت‌هاي کوچکي که چندان به عملکرد سايتشان بها نمي‌دهند هم مي‌توانند بر روي همين تکنيک منعطف باشند. معايب: عملکرد ضعيف سايت؛ ازآنجاکه حرکت داخل سايت و چک کردن محتوا واقعاً سريع اتفاق مي‌افتد، کاربران مدت بسيار کمي داخل سايت باقي مي‌مانند که براي سايت نکته مثبتي نيست. FlowerBeauty.com اين سايت هم هرچند با تعريف سايت‌هاي پارالکسي همخواني ندارد، بااين‌وجود از تکنيک طراحي نامتناهي Jquery استفاده مي‌کند. FlowerBeauty.com به کاربران امکان مي‌دهد داخل کل سايت يا URL هاي مختلف آن بچرخند. درنتيجه ازآنجاکه لايه‌هاي مختلف را با سرعت‌هاي مختلف حرکت نمي‌دهد، جزء دسته‌بندي سايت‌هاي پارالکسي قرار نمي‌گيرد، ولي ازآنجاکه کاملاً به چشم مي‌آيد، داخل ليست قرارگرفته است. تکنيک #2: طراحي پارالکسي سايت‌هاي چندصفحه‌اي بر روي معماري سئو اين تکنيک واقعاً ساده است: کار را با معماري سئوي سايت شروع مي‌کنيم و افکت‌هاي طراحي پارالکس را بر روي هرکدام از URL هاي سئو اعمال مي‌کنيم. واندا انگلين هم مقاله کاملي دراين‌باره نوشته است. وب‌سايت xDawson (که جزء معدود سايت‌هاي چندصفحه‌اي پارالکسي منطبق بر اصول سئو است)، ابتدا معماري سئو را کامل کرده (درواقع حتي بيش‌ازحد لازم بهينه‌سازي شده!) و بعدازآن تکنيک پارالکس را بر روي URL هاي داخلي‌اش اعمال کرده است. البته باوجوداينکه لايه‌ها با سرعت‌هاي مختلف حرکت مي‌کنند، بيننده احساس نمي‌کند تصوير عمق دارد يا يک داستان متحرک مي‌بيند. درنتيجه هرچند جزء دسته‌بندي سايت‌هاي پارالکسي قرار مي‌گيرد، بااين‌حال تکنيک را به آن صورت که امروز مرسوم شده به کار نمي‌برد. مزايا: عملکرد صفحه را بهبود مي‌دهد؛ چون هر URL محتواي مخصوص به خودش را دارد. پياده‌سازي‌اش هم راحت است. معايب: حجيم بودن طراحي پارالکسي، زمان بارگذاري صفحات را بيشتر از حد معمول مي‌کند. ممکن است بيش‌ازحد تعامل‌گرا به نظر برسد. طراحي جداگانه براي هرکدام از URL ها نسبتاً گران از آب درمي‌آيد و طراحي را پيچيده مي‌کند. يک پيشنهاد: به‌جاي اينکه تمام صفحات را به‌صورت پارالکسي طراحي کنيد، بعضي از صفحه‌هاي دلخواه را با اين تکنيک، به شکل متفاوت طراحي کنيد تا سايت در کل طبيعي‌تر به نظر برسد و زمان بارگذاري هم کمتر شود. به‌علاوه هزينه‌هاي طراحي هم کاهش پيدا مي‌کنند و سايت کمي انعطاف‌پذيرتر مي‌شود. Kickpoint.com اين سايت هم فقط صفحه نخست و يکي از صفحات داخلي‌اش (صفحه سرويس‌ها) را به‌صورت پارالکس طراحي کرده است. مزايا: عملکرد مناسب صفحه و طراحي و پياده‌سازي آسان معايب: معماري سئو به‌صورت 100% پياده‌سازي نشده، ملاحظه مي‌کنيد که صفحه سرويس‌ها، بخش‌هاي SEO، PPC، SMM و بازاريابي محتوا در URL هاي منحصربه‌فرد با عنوان و متاتگ مخصوص قرار نگرفته‌اند. يک پيشنهاد: بهتر است محتواي صفحه سرويس‌ها را تفکيک کنند يا به کمک تکنيک شماره 2 از Jquery استفاده کنند. هر بخش بايد عنوان و متاتگ خاص خود را داشته باشد. تکنيک #3: معماري معمولي سئو و طراحي پارالکسي صفحه نخست سايت Spotify.com در تکنيک بعدي فقط صفحه نخست سايت را به‌صورت پارالکس طراحي مي‌کنند و ساير URL ها را که با اصول سئو همگام هستند، به حال خودشان رها مي‌کنند. مزايا: سايت سبک و انعطاف‌پذير مي‌شود؛ طراحي سايت در اين حالت ساده‌تر است و نسبت به تکنيک شماره 1 هزينه‌هاي کمتري به دنبال دارد. معايب: خلاقيت چنداني به خرج نمي‌رود و سايت چندان تعامل‌گرا نمي‌شود. اما اين راه‌حل‌ها واقعاً تعارض موجود بين سئو و پارالکس را حل مي‌کنند؟ به نظر مي‌رسد همين‌طور باشد! به‌شخصه هم به اصول سئو التزام عملي دارم و هم دوست دارم با تکنيک‌هاي طراحي وب مثل پارالکس، ظاهر سايتم را زيباتر کنم و تا حد ممکن خلاقيت به خرج بدهم. اميدوارم به کمک مجموعه تکنيک‌ها و وب‌سايت‌هايي که مثال زديم، بتوانيد هر دو اصل را به‌خوبي باهم تلفيق کنيد. يادتان باشد پارالکس صرفاً يک تکنيک طراحي سايت است که به‌راحتي قابل‌اعمال بر روي تمامي معماري‌هاي وب است...