با ورود نرم افزارهای مدیریت محتوا به بازار، قالب سایت از محتوای سایت جدا شد. طراحان سایت کدهای قالب را در فایل هایی نوشته، و این فایل ها محتوای سایت را از بانک داده فراخوانی می کنند.
قالب سایت تعیین کننده مکان قرار گیری عناصر سایت است. قالب سایت در نرم افزارهای مدیریت محتوا بصورت ماژولار طراحی میشود، یعنی یک صفحه، قالب هدر سایت را نگه داری می کند، یک صفحه قالب بخش محتوای صفحات را، صفحه دیگر قالب بخش ساید بار، و به همین ترتیب، برای هر قسمت سایت، یک صفحه وجود دارد، قالب کلی سایت هر کدام از این تکه ها را فراخوانی می کند. به این ترتیب برای طراحی قالب لازم نیست مدام کدهای خود را تکرار کنیم. مثلا میخواهیم قالبی متفاوت برای صفحه محصولات ایجاد کنیم، هدر سایت باید در این صفحه با صفحات دیگر یکی باشد. بنابراین در صفحه قالب برای بخش هدر دستور فراخوانی صفحه هدر را درج می کنیم، به این ترتیب میتوانیم کدهای خود را در خلاصه ترین روش ممکن ایجاد کنیم.
قالب سایت تعیین کننده تگ هایی مانند H1 وغیره در سایت است. بنابراین هنگام طراحی قالب سایت باید به نحوه بکارگیری این تگ ها دقت لازم را داشته باشید.
ویژگی های قالب سایت
تفاوت صفحه و پست در قالب سایت اولین مسئله ای است که در سئو سایت شما بسیار تاثیر میگذارد. صفحه اصلی سایت شما نمی تواند بصورت پست باشد. اگر اینطور است، سایت شما از نظر موتورهای جستجو یک وبلاگ در نظر گرفته میشود و نه یک سایت، این موضوع در رتبه گرفتن سایت شما در موتورهای جسجتو بسیار مهم است. بنابراین اولین قدم شما این است که برای صفحه اصلی سایت خود یک صفحه طراحی کنید. سعی کنید بیش از ۷۰ درصد صفحات سایت همواره ثابت باشند. تعریف صفحه میگوید که صفحات دارای مطالبی هستند که بروز رسانی نمی شوند، بنابراین صفحات سایت خود را مدام بروز رسانی نکنید. بروز رسانی سایت باید در پست های شما انجام شود. برخی از سایت ها قسمتی از صفحه اصلی خود را به نمایش پست های بروز شده اختصاص میدهند. که تکنیک بسیار خوب و موثری برای جذب مخاطبان است و مشکلی هم از نظر سئو ندارد.
استفاده از سیستم کد نویسی HTML5
با ورود HTML5 بسیاری از تگ های جدید برای طراحی سایت اضافه شده اند. در این مورد ما شاهد دو خطای بارز در میان طراحان سایت هستیم : ۱- طراحی با همان روش های قدیمی بجای استفاده از کد های HTML5 2- طراحی با کدهای HTML5 بدون استفاده از Doctype مناسب. هر دو این اشتباهات را باید کنار گذاشت. بزودی تمام سایت ها به HTML5 مهاجرت خواهند کرد. HTML5 خیلی بهتر از نسخه های قبلی با موتورهای جستجو ارتباط برقرار می کند. با استفاده از HTML5 احتمال بروز مشکل در سایت بسیار کمتر است. زیرا HTML5 بسیاری از خطا ها را هندل می کند.
اگر میخواهیم به موتور جستجو بگویید که در یک بخش از سایت یک مقاله وجود دارد، میتوانید براحتی با یک تگ HTML5 این مطلب را به اطلاع موتور جستجو برسانیم. اگر میخواهیم مطلبی را از سایتی کپی کرده و در سایت خود قرار دهیم، میتوانیم براحتی به موتور جستجو اعلام کنیم، که این متن با رفرنس به سایت اصلی کپی شده است. این مسائل منجر به این شده است، که امروزه برای بدست آوردن رتبه های بهتر در موتورهای جستجو سایت های بیشتری با HTML5 قالب خود را طراحی کنند.
تمام قسمت های سایت از Doctype تا سایر تگ ها را با سیستم HTML5 کد نویسی کنید. بخاطر داشته باشید که استایل دهی Css3 برای Html5 طراحی شده است و ممکن است در نسخه های قدیمی بدرستی کار نکند. با توجه به اینکه سرعت اینترنت امروزه بسیار بالاتر رفته است. کاربران سایت ها انتظار دارند که گرافیک متحرک بیشتری در سایت ببیند که با کمک CSS3 و canvas این امکان وجود دارد که با حداقل حجم، گرافیک های بسیار زیبایی در وب خلق کرد.
طراحی ریسپانسیو
این قالب سایت است که باید در هنگام نمایش در صفحه های مختلف تغییر شکل دهد. امروزه ریسپانسیو بودن به تنهایی کافی نیست. سایتها، امروزه تلاش می کنند که در گوشی ها و تبلت ها به زیبایی نمایش داده شوند. گاهی لازم است بخش هایی از مطالب سایت در گوشی ها حذف شود، تا کاربران با صفحه زیباتری روبرو شوند. طراحی منوی متفاوت برای گوشی ها و تغییرات گرافیکی مانند آن، از جمله مواردی است که امروزه یک ضرورت در طراحی قالب سایت ها است.
در این مقاله از ذکر مواردی مانند با جدول، سایت را قالب بندی نکنید، میگذریم. زیرا که این مسائل آنقدر تکرار شده اند که نیازی به تکرار مجدد نیست.
هنگام طراحی ریسپانسیو اگر از پلت فرم های آماده مانند بوت استرپ برای طراحی ریسپانسیو استفاده می کنید. باید مهارت لازم برای تغییر این کدها را داشته باشید. از بکاربردن فایل های استال دهی اضافه برای تغییر کدهای بوت استرپ بپرهیزید. افزایش حجم فایل های استایل دهی به ضرر سئو خواهد بود. میتوان با اصلاح کد های موجود تمام قابلیت های مورد نظر مشتریان را ایجاد کرد.
طراحی ریسپانسیو برای ابعاد کوچتر از ۷۶۸px بزرگتر و مساوی ۷۶۸pxو بزرگتر مساوی ۹۹۲px و بزگتر از۱۲۰۰px بعنوان اصول ریسپانسیو در پلتفرم بوت استرپ شناخته میشوند، بهتر است که حد اقل این اندازه های استایل دهی مناسب داشته باشید. طراحی ریسپانسیو غالبا بصورتی انجام میشود، که اگر کاربر اندازه پنجره را کوچک کند نیز بخوبی با اندازه صفحه سایت تغییر شکل دهد.
رعایت اصول طراحی
عدم ایجاد کدهای تهی برای استایل دهی یکی از مواردی است که اهمیت بسیاری دارد. ایجاد کدهای DIV تهی برای استایل دهی به کدها امری است که تنها توسط مبتدیان انجام میشود و استفاده از چنین کدهایی به هیچ عنوان حرفه ای است.
رعایت حجم فایل
قالب سایت تعیین کننده تعداد عکس های یک قالب است. اندازه این عکس ها نیز در قالب تعیین میشود. بنابراین قالب سایت تعیین کننده حجم صفحات سایت خواهند بود. استفاده بیش از اندازه از تصاویر و ویدئو ها میتواند به کند شدن صفحات سایت منتهی شود.
دلیل اهیمت قالب سایت در سئو
هنگامی که موتورهای جستجو به سایت مراجعه می کنند، یک تصویر کلی از سایت، که شامل کدهای قالب و محتوا است را مشاهده می کنند. بنابراین کدهای قالب را جزئی از محتوای سایت در نظر می گیرند. رعایت اصول کد نویسی در قالب سایت باعث میشود که موتورهای جستجو بتوانند، با سایت ارتباط بر قرار کرده و کدهای سایت را استاندارد تشخیص دهند. یکی از ویژگی های Html5 ایجاد امکان استفاده از کدهای غیر استاندارد بصورت استاندارد است. که میتواند یک ویژگی حیاتی برای سئو سایت های طراحی شده باشد. اگر تازه کار طراحی سایت را آغاز کرده اید این ویژگی HTML5 باعث میشود که خطاهای شما باعث جریمه شدن مشتریان شما نگردد.
رعایت اصول کد نویسی قالب امروزه یک امر بدیهی است و تمام شرکت های حرفه ای طراحی سایت این اصول را رعایت می کنند. ولی با توجه به اینکه تعداد اشخاصی که بدون داشتن تخصص لازم اقدام به طراحی قالب سایت می کنند. باید خاطر نشان کرد که شاید یکی از دلایل عقب ماندن یک سایت نسبت به رقبایش همین کدنویسی غلط در قالب سایت باشد. ما میدانیم که موتورهای جستجو عوامل زیادی را برای رتبه دهی به یک سایت در نظر می گیرند و هنگامیکه رقابت بر سر کلمه ای در گوگل بالا باشد رعایت کوچکترین نکات طراحی میتواند موجب دریافت رنک بهتر در گوگل توسط سایت ها گردد.
با توجه به اینکه تگ های عنوان بندی اغلب در قالب سایت تعیین میشوند، و اهمیت این تگ ها در سئو برای همگان مشخص است. هنگام طراحی قالب سایت باید به تبدیل کردن عنوان صفحات و پست ها به تگ H1 و استفاده درست از سایر تگ های عنوان بندی توجه داشت. باید خاطر نشان کنیم که در HTML5 قوانین عنوان بندی در قسمت های مختلف سایت تغییرات زیادی کرده است. رعایت این قوانین میتواند بر سئو سایت تاثیر مثبتی زیادی داشته باشد.
کد های جاوا اسکریپت و کتابخانه های آن مانند جی کوئری و یا آنگولار در قالب سایت نوشته میشوند. استفاده از این کدها باید با استاندارد های نرم افزار مدیریت محتوا هم آهنگ باشد. امروزه در بسیاری از سایت های متن باز که توسط اشخاص غیر حرفه ای نوشته شده اند، شاهد کد های جاوا اسکریپتی هستیم که بدلیل عدم رعایت استاندارد به درستی اجرا نمی شوند.
نتیجه گیری:
قالب سایت حاوی اطلاعات صفحه بندی سایت است و علاوه بر تعیین ظاهر سایت بر روی سئو سایت نیز تاثیر دارد. کد نویسی درست قالب سایت میتواند موجب افزایش سرعت بارگذاری سایت و شناسایی بهتر سایت به موتورهای جستجو شود. یک قالب استاندارد فاقد کدهای خراب و اضافه میباشد. یک قالب سایت استاندارد در انواع تبلت ها گوشی ها و پی سی ها و تلویزیون های هوشمند بدرستی نمایش داده میشود.