بررسی ده اشتباه بزرگ در کدهای HTML که نباید مرتکب شوید
HTML ( اچ تی ام ال ) اولین ، ساده ترین ، پرکاربردترین و مهم ترین زبان برای طراحی سایت است. صفحات اینترنتی شامل اطلاعاتی است که حاوی متن ، تصویر ، ویدئو ، صوت و… می باشد . این محتوا توسط سه لایه به کاربر نمایش داده می شود . لایه محتوا همیشه وجود دارد و حاوی محتوایی می باشد که طراح سایت قصد دارد آن را به کاربر نمایش دهد . این محتوا بصورت کدهای HTML مابین دو تگ <html> قرار میگیرد .
HTML زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساختار بندی اطلاعات و جدایش اجزای منطقی یک نوشتار ، نظیر عناوین، تصاویر، فهرست‌ها، بندها و جداول به کار می‌رود. از سوی دیگر، کدهای HTML را نباید به عنوان زبانی برای صفحه آرایی یا نقاشی صفحات وب سایت به کار برد، این وظیفه اکنون بر دوش فناوری‌های دیگری همچون CSS است.
یادگیری اصول کدنویسی کار بسیار پیچیده ای نیست اما آشنایی و تسلط بر این قوانین و رعایت اصول استاندارد و صحیح در کدنویسی نیاز به تجربه و کار فراوان دارد . در این مجموعه به بررسی ده اشتباه بزرگ در نوشتن کدهای HTML می پردازیم که رعایت آنها می تواند در استاندارد سازی کدهای HTML شما تاثیر بسیاری داشته باشد و همچنین اثر مثبتی بر سئوی سایت شما داشته باشد.
تفاوت یک طراح وب سایت و سئو کار حرفه ای و آماتور در رعایت همین اصول و قوانین است که در زیر به ده مورد از آنها اشاره می شود.
استفاده نکردن از لیست ها ul ، ol در جای لازم
تگ های ul، ol ، li برای لیست کردن مطالب ساخته شده اند و کار با آنها بسیار ساده است و توانایی های بسیاری را برای کنترل لیست به وسیله css ایجاد خواهد نمود . استفاده از تگ های p ، br و هر نوع دیگر از کدهای HTML به غیر از تگ های تعریف شده لیست ها ، برای شکل دهی یک لیست کار اشتباهی است که نباید انجام دهید.
استفاده از تگهای s ، strike برای نمایش متن های حذف شده
در نسخه های جدید از تگهای del – برای نشان دادن متن حذف شده – و از تگ ins – برای نشان دادن متن وارد شده به جای متن حذف شده – به همراه هم استفاده می شود. بنابراین دچار اشتباه نشوید و از strike و s استفاده نکنید .
در نسخه های قدیمی تری از HTML از این دو نوع تگ برای نشان دادن کلمات حذف شده ( Strikethrough ) – با ایجاد یک خط بر روی آنها – استفاده می شده است . این نوع از تگ ها با ورود نسخه های جدیدی از HTML دگرگون شده اند و تگ های strike و s که قبلا برای این منظور استفاده می شده اند دیگر کاربردی نخواهند داشت و استفاده از آنها غیر استاندارد خواهد بود.
استفاده نکردن از تگهای Heading
حتما از اهمیت تگ های heading – h1,h2,h3,h4,h5,h6 – در طراحی سایت و سئوی سایت با خبر هستید از این تگ ها برای مشخص نمودن سر فصل ها و تیتر ها برای مطالب منتشر شده در وب سایت با توجه به درجه اهمیت آنها استفاده می شود.
سر فصل هایی که با تگهایی غیر از تگهای Heading ایجاد شده اند در مرورگرهای متنی قابل تشخیص نخواهند بود و همچنین از نظر موتورهای جستجو اهمیتی نخواهند داشت.
استفاده از انواع تگ های دیگر و استفاده از CSS برای تغییر ظاهری عناصری غیر از تگهای heading ، برای ایجاد سر فصل اشتباه بزرگی خواهد بود.
اضافه نکردن خصوصیت alt به تصاویر
استفاده از alt برای تصاویر به بازدیدکنندگان صفحات وب سایت شما و همچنین موتورهای جستجو کمک میکند تا موضوع تصویر منتشر شده در وب سایت شما را تشخیص دهند.
موتورهای جستجو به توضیحات یا همان alt تصاویر خیلی توجه می کنند و این alt ها روی سئو اثر بسیار مثبتی دارد. استفاده از خصوصیت alt برای تصاویر یک قانون است .برای استاندارد بودن کدهای HTML خود حتما این نکته را رعایت کنید . این نکته زمانی پر رنگ تر و مهم تر میشود که مخاطبان شما از سرعت اینترنت پایین و یا مرورگرهای متنی ( مانند موتورهای جستجو ) استفاده میکنند و یا به هر دلیلی این تصویر در مرورگر بازدیدکننده وب سایت شما نمایش داده نشده است .
از این خصوصیت حتی در هنگامی که توضیحی برای تصویر خود ندارید نیز استفاده نمائید و مقدار آن را خالی بگذارید .
استفاده از تگهای b ،I ،strong ،em برای bold و italic کردن متن بدون در نظر گرفتن موتورهای جستجو
از b و i در زمانی که نیازی به پر اهمیت کردن متن داخل این تگ ها نیست و فقط می خواهید شکل ظاهری را تغییر دهید و از strong و em در مواردی که علاوه بر شکل ظاهری می خواهید درجه اهمیت متن داخل آن را نیز نسبت به سایر کلمات افزایش دهید استفاده نمائید.
اگر شما به بهینه سازی و سئوی سایت خود برای موتورهای جستجو اهمیت می دهید بهتر است از تگ های strong و em به صورت مستقیم در کد HTML به جای تگهای b و i و همچنین style ها استفاده نمائید . به این نکته بسیار مهم توجه داشته باشید که تگ های b و i تگهای نمایشی هستند و تگهای strong و em تگ های مفهومی و نمایشی هستند . مفهوم این جمله این خواهد بود که متن ها به وسیله b و i فقط یک تغییر حالت ظاهری پیدا کرده اند و به همین دلیل مورد توجه موتورهای جستجو قرار نخواهند گرفت . اما با استفاده از تگهای strong و em شما به همراه تغییرات ظاهری یک شخصیت نیز به متن خود خواهید بخشید و اعلام خواهید کرد که این متن در داخل این نوع از تگ ها از اهمیت بیشتری برخوردار خواهد بود . بنابراین سعی کنید از این نوع از تگ ها در جای مناسب خود استفاده نمائید .
تگهای b و i میتوانند یک متن و یا کلمه را به حالت bold و Italic تغییر دهند . شاید با وجود CSS و توانائی های فوق العاده در کنترل متن ها به ذهن شما برسد که از این ابزار برای راحتی کار خود استفاده نمائید . توانائی های font-weight و font-style می توانند جایگزین خوبی برای b و i باشند اما مشکلاتی را نیز خواهد داشت . در مواردی مخاطبان شما از مرورگرهای متنی بدون استفاده از style ها استفاده خواهند کرد که در این صورت تفاوتی مابین کلمات bold و italic شده توسط CSS با سایر کلمات نخواهند دید و این مشکل باعث کاهش خوانایی مطالب شما می شود و کلمات با درجه اهمیت بیشتر مورد توجه مخاطب قرار نخواهد گرفت.
استفاده از تگهای blink و marquee
این گونه از تگ ها بر خلاف تصور شما ممکن است موجب عدم توجه به وب سایت شما شود. جدای از غیر استاندارد اعلام شدن این تگ ها توسط سازمان جهانی استانداردهای وب wc3 ، استفاده از این نوع از تگ ها در طراحی سایت می تواند فاجعه ساز شود.
برای ایجاد جلب توجه و نشان دادن اهمیت یک موضوع بهتر است از روش های دیگری استفاده نمائید .
اضافه و حذف کردن border در تگ HTML
در استاندارد های امروزی استفاده از این نوع خصوصیت به صورت مستقیم در تگ های HTML توصیه نمی شود و بهتر است به جای استفاده از این خصوصیت در تگهای HTML چشم پوشی نمائید و تغییرات مورد نظر خود را با استفاده از خصوصیت border در CSS انجام دهید . شما با استفاده از CSS توانایی بیشتری در کنترل این خصوصیت خواهید داشت .
Border ها یکی دیگر از خصوصیات تعدادی از عناصر HTML هستند که شما می توانید با استفاده از این خصوصیت به صورت مستقیم در تعدادی از تگ های HTML آنها را حذف ، اضافه و ویرایش نمائید .
قرار دادن تگ های Block در بین تگ های Inline
عناصر HTML به دو گروه inline و block تقسیم بندی می شوند . هر تگ به صورت پیش فرض دارای خصوصیت inline و یا block است . عناصر Inline با توجه به نوع و خصوصیت شان باید در درون عناصر block قرار بگیرند تا بتوانند با استفاده از این نوع از تگ ها در جریان صفحه قرار بگیرند . عناصر block تگ هایی مانند div ،p و مواردی دیگر را شامل می شوند که بیشتر در ایجاد ساختار صفحات مورد استفاده قرار میگیرند . استفاده از عناصر block در بین تگ های inline کار نادرستی است که هرگز انجام ندهید، اما عناصر inline به راحتی درون عناصر block قرار خواهند گرفت.
استفاده از inline style
استفاده از style های inline یک کار غیر استاندارد نیست اما دارای مشکلات و معایبی است که می تواند ما را برای استفاده از این نوع از style منصرف کند، هر چند که از style ها می توان به سه روش متفاوت استفاده نمود و یکی از این سه روش استفاده از style های inline در داخل هر تگ است . اما توصیه می شود که از inline style استفاده کمتری نمائید.
ویرایش این نوع از style با توجه به خطی بودن آنها بسیار مشکل است و با افزایش تعداد سندهای HTML گاهی به کار غیر ممکنی تبدیل می شود . این نوع از style حجم صفحات را به شدت افزایش می دهد و این نکته ای بسیار منفی در طراحس سایت و سئوی سایت است . استفاده از inline style کدها را به هم ریخته و ناخوانا خواهند کرد و ویرایش کد ها را از نظر خوانایی بسیار سخت خواهد نمود.
گاهی کدهای CSS خارجی را دچار مشکل می کنند، باید بدانید که کدهای inline بر کدهای CSS خارجی تقدم دارند. با همه ی این مشکلات در موارد بسیار خاصی استفاده از این تگ ها می تواند مشکلات شما را برطرف نماید . اما به صورت عمومی استفاده از inline style توصیه نمی شود .
استفاده بیش از حد از تگ br
استفاده از تگ br برای ایجاد فاصله هایی بیشتر از یک خط در بین خطوط و یا عناصر دیگر اشتباه است . تگ br برای ایجاد فاصله و شکست تنها یک خط در متن مورد استفاده قرار می گیرد . برای ایجاد فاصله بیشتر از یک خط در بین خطوط می توانید به راحتی از تگهای p و یا خصویت padding و margin و حتی line-height استفاده نمائید.
نکات ذکر شده چندین اشتباه های مهم در کدهای HTML است که باید در طراحی سایت و سئوی سایت به آنها توجه شود، تیم طراحی سایت وب کو وب همیشه سعی می کند با توجه به آخرین استانداردهای جهانی کدنویسی و برنامه نویسی سایت های خود را طراحی و سئو نماید، به جز نکات ذکر شده نکات بسیار مهم دیگری وجود دارد که یک طراح باید به آن توجه نماید و سعی می کنیم در مقالات دیگر به آنها اشاره نماییم.
اشتراک گذاری در :
مقالاتی که پیشنهاد می شود بخوانید
اصطلاح Fold درطراحی سایت به چه معناست و چه اهمیتی دارد؟
بازدید: 1222
با ورود مفهوم Fold به دنیای دیجیتال، صاحبان سایت نیز باید با دقت بیشتری اولویت مطالب موجود بر روی صفحه را مشخص کنند تا کاربران سریع تر مطالب مهم سایت را مشاهده نمایند. کارشناسان طراحی سایت معمولا بر اساس اهمیت مطالب و میزان تاثیر آن بر روی کاربر نسبت به قرارگیری مطالب روی Fold یا زیر Fold تصمیم گیری می نمایند؛ هدف از این مقاله اصلاح Fold درطراحی سایت ارائه راهکار هایی برای انجام بهتر این امر می باشد.اصطلاحا Fold خطی است که [...]
Anchor Text چیست و تاثیر و اهمیت Anchor text در سئو
بازدید: 1479
Anchor معنی لنگر را میدهد، در اصطلاح Anchor Text عبارت از متنی نامی میباشد که پیوندی به آن لینک میشود گوگل و تعداد دیگری از موتورهای جستجو، صفحات وب سایت ها را تحت تاثیر مستقیم متن پیوندی یا (Anchor Text ) به آن صفحات در نتایج جستجو نمایش می دهد. این موضوع یعنی اهمیت این متن ها در سئو را میتوان با نگاه كردن به نمونه های فوق العاده ای از صفحات وب سایت ها كه رتبه بالای نتایج جستجو در اختیار دارند درک نمود . Google bombs تقریباً آسان ترین [...]
پروتوتایپ چیست و چه کاربردی در طراحی سایت دارد؟
بازدید: 4603
وقتی صحبت از پروتوتایپ می شود منظور طرحی محاوره ای است که به کاربر اجازه می دهد تا بین صفحات سایت بگردد و از قابلیت هایی مثل منو های دراپ داون استفاده کند. پروتوتایپ وب می تواند نسخه ی آزمایشی از یک وب سایت بعد از تولید و طراحی آن باشد. پروتوتایپ می تواند از یک طراحی کاغذی گرفته تا html ، و قابل کلیک کردن باشد.. راه های مختلفی برای ساختن پروتوتابپ وجود دارد. ما مثال های قابل کلیک پروتوتایپ را در پاورپوینت و سندهای [...]
الگوریتم گوگل پنگوئن چیست - بررسی الگوریتم جدید گوگل
بازدید: 1340
گوگل پنگوئن از تاریخ 24 آپریل 2012 (5 اردیبهشت ماه سال 1391) منتشر شده است. هدف از این الگوریتم حذف سایت هایی که از روش های ایجاد لینک استفاده می کنند از نتایج گوگل است. بر اساس تخمینی که گوگل ارائه داده است این نسخه جدید بر روی 3.2 درصد سایت های انگلیسی و 3 درصد سایت ها به زبان های دیگر تاثیر گذاشته است. سایت هایی که بر اثر این نسخه جدید از نتایج جستجو حذف میشوند می توانند از طریق ابزار مدیر سایت گوگل درخواست بازبینی بدهند. [...]
طراحی وب سایت استاندارد و جلوگیری از خروج کاربران وب سایت و روش کاهش Bounce rate سایت
بازدید: 1255
ساختار استاندارد و مناسب با تکیه بر محتوای مناسب و کاربردی میتوانید میزان خروج کاربران از وب سایت قبل از بازدید تنها یک صفحه را بگیرید و بازدید کننده را ترغیب به دیدن تمامی صفحات وب سایت نماید .یک طراحی مناسب می تواند میزان خروج کاربران از وب سایت را کاهش داده و موجب افزایش فعالیت کاربران در وب سایت شود .تنها راه جلوگیری از خروج کاربران از وب سایت کاهش کاهش Bounce rate می باشد.Bounce rate چیست ؟مقیاسی است مناسب جهت بررسی [...]
الگوریتم گوگل پاندا در سئو چه نقشی دارد؟
بازدید: 999
گوگل پاندا (Google Panda) به تغییراتی گفته می شود که از اواخر اسفند 1389 (فوریه 2011) در الگوریتم نمایش نتایج جستجو در گوگل اعمال شد و همچنان ادامه دارد. این تغییرات با هدف کاهش سایت های رتبه بندی شده یا کیفیت پایین دنبال می شود و سایت های با کیفیت را در بالای صفحه نمایش نتایج جستجو نشان می دهد. در اثر این تغییرات، سایت هایی که حجم بسیار زیادی آگهی تبلیغاتی در خود جای داده بودند به رده های پایین سقوط کننند و وب [...]