یکی از اقدامات مهم در سئو، بهینهسازی داخلی سایت است. در این زمینه به کارگیری تگهای مهم Html در سئو در زمان طراحی و بعد از آن بسیار با اهمیت است. این موضوع در بسیاری از موارد در حین طراحی نادیده گرفته میشود، اما یک طراح سایت کاربلد باید با این مباحث اولیه سئو آشنایی داشته باشد.
در این مقاله قصد داریم مهمترین تگهای HTML که در سئو و بهینهسازی نقش مهمی ایفا میکنند را بررسی کنیم. تمامی این متاتگها در بخش head قالب سایت قرار دارند و اکثر آنها برای کاربران خروجی نوشتاری ندارند.
متاتگهای مهم Html در سئو و بهینه سازی
۱- تگ عنوان
تگ عنوان که به عنوان سئو هم معروف میباشد، همان تگی است که در نتایج گوگل و تب مرورگر نمایش داده میشود. این تگ پرتاثیرترین متاتگ از میان تگهای مهم Html در سئو است که باید در تک تک صفحات استفاده شود. بهتر است کلمهکلیدی و نام سایت در این تگ نوشته شود:
<title> تگ عنوان چیست؟ | ادمینسایت </title>
۲- رمزگذاری کارکتر
یکی از تگها مهمی که نباید حین طراحی فراموش کنید استفاده از تگ رمزگذاری برای نمایش صحیح تمام کارکترهای صفحات وب است. برای این منظور تگ زیر را در بخش head در Html قرار دهید.
1
|
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
|
۳- متاتگ توضیحات
متا تگ توضیحات هم تاثیری بسیار زیادی در سئو صفحات سایت شما دارد. برای هر صفحه از سایت باید توضیحاتی بنویسید که در نتایج گوگل نمایش داده میشود. در گذشته گوگل به این متاتگ اهمیت زیادی میداد. امروزه اگرچه توجه موتورهای جستجو به این تگ کمتر شده است اما همچنان تاثیر خوبی در بالا بردن نرخ کلیک دارد. اگر بتوانید یک متن جذاب در این تگ بنویسید، میتوانید نرخ ورودی و کلیک خود را افزایش دهید.
۴- متاتگ رباتها
متاتگهای ربات ربات های خزنده را به ایندکس شدن یا نشدن مطلب راهنمایی میکنند تا وضعیت دسترسی برای ایندکس صفحات را مشخص کنند. برای مثال تگ زیر به رباتهای خزنده میفهماند که اجازه ایندکس این صفحه وجود دارد:
<meta name=”robots” content=”index, follow” />
۵- متاتگ کلمهکلیدی
شما میتوانید یک تگ کلمهی کلیدی در بخش head سند html سایت بزارید و کلمات کلیدی اصلی خود را در قرار بدید. البته لازم به ذکر است که گوگل طی این چند سال به این تگ توجهی چندانی ندارد و از آن استفاده نمیکند اما سایر موتورهای جستجو همچنان به آن توجه دارند و آن را بررسی میکنند.
1
|
<meta name=“keywords” content=“کلمهکلیدی۱, کلمه کلیدی۲”>
|
۶- تگ کنونیکال
این تگ زمانی استفاده میشود که شما محتوای تکراری در وبسایت خود قرار دادید. محتوای تکراری معمولاً ناشی از استفاده نادرست تگها، کپی کردن مقاله ها و بازشدن همزمان سایت با آدرسهای http و https ایجاد میشود! برای رفع این مشکل تگ کنونیکال کارکرد مناسبی دارد.
1
|
<link rel=“canonical” href=“https://adminesite.com/best-sms-gateway/” />
|
۷- تگ Viewport
این تگ برای نمایش صفحات وبسایت در نمایشگر گوشی بسیار کاربردی میباشد. به کمک این تگ میتوان اندازه صفحه سایت را با اندازه نمایشگر تطبیق داد. برای طراحی صحیح و responsive کردن سایت وجود این تگ واجب است.
1
|
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
|
۸- تگ hreflang
این تگ برای مشخص کردن زبان سایت مورد استفاده قرار میگیرد. به کمک این تگ میتوانید به موتورهای جستجو بفهمانید که زبان اصلی سایت شما چه زبانی است و استفاده از این تگ در سایتهای چند زبانه توصیه میشود.
1
|
<link rel=“alternate” href=“http://example.com” hreflang=“en-us” />
|
9-تگ head
تگ head اولین تگی است که بلافاصله بعد از تگ باز <html> و در بدنه تگ html نوشته میشود. این تگ که همانند تگ html دارای دو تگ باز و بسته است، حاوی یک سری اطلاعات برای مرورگرها و نیز ربات های جستجوگر وب است.
اطلاعات این بخش در قسمت بدنه ی سند html ما نمایش داده نمی شود ولی اطلاعاتی همچون عنوان صفحه، کلمات کلیدی، استایل های خارجی و داخلی، جاوا اسکریپت های خارجی و داخلی، آیکون صفحه، توضیحاتی راجع به سازنده و … را در بر دارد که برای مرورگر و نیز ایندکس شدن توسط جستجوگرهای وب مانند گوگل و یاهو بسیار مهم است.
تگ های قابل استفاده در داخل این تگ شامل موارد زیر است:
<title>, <meta>, <link>, <script>, <style>
در واقع می توان تگ Head را به عنوان هسته اصلی صفحات وب بیان کرد چرا که کارهایی مانند تعامل با موتور جستجو، تعامل با فایل های CSS و جاوا اسکریپت و… وظیفه اوست.
فراموش نکنید که در تگ Head همه ی موارد نوشته شده نشان داده نمی شود و در این تگ فقط تگ های Base,Link,Meta,Title,Style,Script قابل مشاهده می باشند.
10-تگ body
تگ body بعد از تگ بسته <head/> نوشته می شود. همانطور که از نامش پیداست بدنه صفحه وب سایت را تشکیل می دهد و به جرات یکی از مهمترین تگ های html است. درواقع تگ body تمام محتویاتی که باید توسط مرورگرها نمایش داده بشود را بین دو تگ باز و بسته خود قرار داده است. متن و عکس و بطور کلی اطلاعاتی که قرار است در سند html ما به کاربران توسط مرورگرهای وب نمایش داده شود در این بخش نوشته خواهد شد. شما می توانید سایز قلم، رنگ قلم و سایر مواردی که در صفحات وب نشان داده میشود را در این تگ مشخص کنید.
فراموش نکنید که تمام عناصری که مربوط به ظاهر صفحه وب سایت هستند باید در این تگ باشند. در غیر اینصورت نمایش داده نخواهند شد.
11-متا تگ در HTML
تگ متا یکی از تگ های پر مصرف HTML است که در تگ Head قرار دارد. شما با استفاده از این تگ که از کلمه metadata می آید می توانید یکسری اطلاعات را در قالب برخی اتریبیوت های خاص به موتور های جستجو نشان دهید. اطلاعاتی که احتمالا برای بهینه سازی و سئو یک صفحه بسیار مهم هستند.
لازم به ذکر است که تمام اطلاعات و محتویات تک متا برای کاربرانی که در حال بررسی صفحه شما هستند قابل مشاهده نیست، ولی این اطلاعات یا متا داده ها توسط مرورگرها و موتورهای جستجوگر قابل تجزیه و تحلیل بوده و میتواند به یک وبسایت برای نمایش هرچه بهتر در مرورگرها و موتورهای جستجوگر کمک کند.
12-تگ style در html
همانطور که در پارت آموزشی قبل توضیح داده شد، تگ style در html تگی است که به عنوان تگ تو در تو در میان تگ head قرار می گیرد. با استفاده از آن میتوان برای صفحات وب سایت استایل تعریف و یا ایجاد کرد. و به نوعی برای css دهی داخلی صفحه از این تگ استفاده می شود. بطور کلی شما در داخل این تگ تعیین می کنید عناصر HTML چگونه و با چه استایلی در مرورگر نمایش داده شود.
منظور از استایل هم یعنی رنگ لعاب دادن به صفحه وب سایت، و بطور کلی استایل دادن یعنی هر کاری که بتواند در ظاهر سایت تغییرات دلخواه را ایجاد بکند. نمونه ای نحوه نوشتن تگ style در html را در شکل زیر می بینید. توجه داشته باشید که شما می توانید از چندین تگ استایل در میان تگ head استفاده کنید. هرچن این کار توصیه نمی شود.
13-تگ link در html
همانطور که در فیلم آموزشی نحوه CSS دادن به HTML توضیح داده شد، تگ link تگی است که با استفاده از آن میتوان یک لینک بین یک سند HTML ( صفحه وب ) و یک فایل CSS یا به عبارتی منبع ( سورس ) خارجی ( چیزی که خارج از صفحه جاری باشد ) ایجاد کرد. این تگ همانند تگ قبلی بین تگ های باز و بسته head قرار گرفته و خودش یک تگ تنها است (تگ پایانی ندارد) است.
بنابراین در کد نویسی HTML برای اتصال فایل های خارجی به سند اچ تی ام ال از تگ لینک استفاده می وشد و شما می توانید از چندین تگ link بصورت هم زمان داخل تگ html استفاده کنید.
14-تگ h
از تگ H در HTML برای ایجاد سرتیتر یا عنوان استفاده می شود. تک h یا اصطلاحا تگهای heading بر اساس درجه اهمیت در شش سایز (h1 , h2 , h3 , h4 , h5 , h6) استفاده میشوند و درجه اهمیت از h1 به h6 کاهش مییابد. یعنی تگ h1 دارای بیشترین اهمیت و تگ h6 دارای کمترین اهمیت از دید موتورهای جست و جو است.
15-تگ p در html
تگ p در html علاوه بر اینکه یکی از مهترین تگ های html است یکی از پرکاربردترین تگ های html نیز هست. این تگ معرفی کننده عنصر پاراگراف در صفحات وب بوده و با دو تگ باز و بسته خود بین تگ body قرار می گیرد.
تگ پاراگراف یا P در دسته ی تگ های بلاکی (تگ های block-level) قرار دارند و تمام عرض سطر رو به خودشان اختصاص می دهند. به عبارتی دیگر هیچ تگ block-level و inline-level دیگری اجازه همراهی با تگ P در یک خط را ندارند و با وجود محتوای کمتر از یک خط نیز یک خط ( بلاک ) کامل را به خود اختصاص می دهد.
16-تگ br
کمی پیش تر در مورد تگ p صحبت کردیم. یکی از از تگ های داخلی که همراه با تگ p یا تگ پاراگراف استفاده می شود تگ br است. با استفاده از تگ br در HTML میتوانیم در خط و پاراگراف شکستگی ایجاد کرده و به سطر بعدی برویم، تگ br یا بی آر که از کلمه ( Break ) گرفته شده است از جمله عناصر تهی به شمار میآید و به تگ پایانی نیاز ندارد. شما میتوانید تگ br را به شکل <br> در بین متون پارارگراف به کار ببرید. بطور کلی می توان گفت این تگ وظیفه دکمه Enter را در مقاله نویسی برای ما انجام می دهد.
17-تگ b در html
در ادامه استفاده از تگ p یا پاراگراف، یکی دیگر از کاربردی ترین تگ های html تگ b است. تگ b در html که از کلمه Bold گرفته شده است باعث میشود که محتوای قرار گفته در بین تگ باز و بسته آن بصورت توپر ، برجسته و یا اصلاحا bold (کلفت) نشان داده شود. تگ b مانند بسیاری از مهمترین تگ های html دارای یک تگ باز ( opening tag ) و یک تگ بسته ( closing tag ) می باشد. درون تگ باز و بسته محتوایی که می خواهید در سند html برجسته کنید را قرار می دهید.
18-تگ strong
تگ strong دقیقا مشابه تگ b عمل می کند با این تفاوت که تگ strong یکی از کاربردی ترین تگ های HTML در سئو سایت محسوب می شود. تگ b و strong هر دو باعث ضخیم شدن محتوای قرار گرفته در بین تگ های باز و بسته خود خواهند شد با این تفاوت که زمانی که بخواهیم به موتورهای جست و جو بگوییم که محتوایی که ضخیم شده محتوای مهمی است از تگ strong استفاده میکنیم.
19-تگ i
تگ i مخفف کلمه italic نیز یکی از تگ های فرمت بندی یا قالب بندی متن ها در HTML است که محتوای قرار گرفته بین دو تگ باز و بسته خود را به شکل مورب و کج نمایش می دهد. مراقب باشد که با وجو تگ هایی مثل em و mark بی خودی از این تگ استفاده نکنید چرا که به سئو سایت ضربه خواهید زد.
20-تگ em
تگ em عمکردی شبیه به تگ i دارد با این تفاوت که معنای این تگ برای مرورگرها و موتورهای جستجو مهم تر است. تگ em از کلمه لاتین (emphasize) به معنی “تاکید” گرفته شده و در دسته ی تگ های عبارتی یا Phrase می باشد. زمانی که بخواهیم بر روی یک محتوا تاکید کنیم از تگ em استفاده میکنیم.
21-تگ u در html
تگ u مخفف کلمه انگلیسی Underline ( یعنی خط زیر ) می باشد. شما با استفاده از این تگ میتوانید یک خط صاف را زیر یک کلمه یا عبارت خاص بکشید و به کمک این کار متن یا محتوا مورد نظر ار از دیگر متن ها جدا کنیم یا به عبارتی یک متن را متفاوت تر نمایش دهیم.
22-تگ ins
تگ ins در html مشابه تگ i نمایش داده می شود. با این تفاوت محتوای داخل تگ باز و بسته ins که مخفف Inserted است برای مرورگرها و موتور های جستجو بسیار مهمتر می باشد.
درو واقع تگ u فقط یک خط ساده زیر یک متن و یا محتوا کشیده و تغییرات ایجاد شده توسط آن برای موتورھای جستجوگر خیلی بارازش نیست. این درحالی است که تگ ins به کمک صفات و اتریبیوتی هایی که می پذیر می تواند آدرس و زمان عمل انجام شده را برای موتورھای جستجوگر مشخص کرده و این یعنی تگ ins برای موتورهای جستجوگر یک تگ دارای ارزش می باشد.