تگ های HTML | مهم‌ترین تگ های HTML در طراحی سایت و سئو
17 اردیبهشت 1400 1400-02-21 11:13تگ های HTML | مهم‌ترین تگ های HTML در طراحی سایت و سئو
تگ های HTML | مهم‌ترین تگ های HTML در طراحی سایت و سئو
زهرا جعفری فهرست مطالب
یکی از اصول مهم در بهینه سازی و سئو وب سایت‌ها استفاده درست از تگ های HTML می‌باشد. طراحان سایت باید با این تگ ها به اندازه کافی آشنایی داشته باشند تا بتوانند وب سایت‌ها را مطابق فاکتورهای مهم گوگل برای رتبه بندی طراحی کنند. در ادامه این مقاله از وب سایت وب کد با ساختار تگ ها و کاربرد هر یک از آنها آشنا می‌شویم.
تگ چیست؟
تگ های HTML در واقع دستورهایی هستند که برای نشانه گذاری محتويات صفحات استفاده می‌شوند و باعث می‌شوند مرورگر بتواند تشخيص دهد که در هر بخش از صفحه چه نوع عنصری قرار گرفته است. به عنوان مثال تگ‌های ایجاد لینک‚ بولد کردن بخشی از متن و … از تگ های HTML می‌باشند. استفاده درست از این تگ‌ها موجب خوانایی بهتر مطالب و بهبود تجربه کاربری (ٔUX) سایت شده و باعث می‌شود که یک مطلب کاربردی داشته باشید.
بیشتر بخوانیم:
چگونه از تگ ها استفاده می‌شود؟
همانطور که می‌دانید یک در فایل HTML داخل تگ HTML دارای دو بخش اصلی می‌باشد. این دو بخش شامل تگ head و تگ body می‌شود. body به معنی بدنه محتوا است و تگ‌ها نیز در بخش body قرار می‌گیرند.
<html>
<head>
بلاک مربوط به head
</head>
<body>
بلاک مربوط به body
</body>
</html>هر تگ HTML ، دارای يک بخش ابتدايی و يک بخش انتهايی است که نمایان گر شروع تگ و پایان تگ می‌باشند. این دو بخش هر دو یک نام دارند. با این تفاوت که در بخش انتهایی یک اسلش نیز وجود دارد. شکل استاندارد نوشتن اسن تگ‌ها به صورت زير می‌باشد.
< تگ انتها / > محتويات < تگ ابتدا >
برخی تگ های HTML
در ادامه به برخی از تگ‌های پر استفاده و مهم در HTML اشاره می‌کنیم.
تگ Title
تگ تایتل یکی از تگ های بسیار مهم است که برای صفحات وب سایتفاده می‌شود. این تگ در بخش head یک فایل HTML قرار می‌گیرد. تگ تایتل یا تگ عنوان در واقع عنوان یک صفحه وب را مشخص می‌کند. تگ عنوان در صفحات نتایج موتور جستجو یا همان صفحه SERP به صورت یک عنوان قابل کلیک نمایش داده می شود.
این عنوان نمایانگر محتوای سایت شما در نتایج جستجو است. پس انتخاب درست آن در میزان ورودی‌های شما تاثیرگذار است. علاوه بر این وظیفه نمایش عنوان صفحه سایت به ربات‌های موتور جستجو برای رتبه بندی در صفحه نتایج نیز به عهده این تگ است. پس برای همه صفحات وب سایت باید حتما فقط یک بار از این تگ استفاده کنید. تگ تایتل به صورت زیر استفاده می‌شود.
<head>
<title>عنوان مورد نظررا بنویسید</title>
</head>تگ H
تگ های H که با نام تگ‌های heading نیز شناخته می‌شوند و در بخش body استفاده می‌شود. این تگ ها شامل تگ های h1 تا h6 که جهت قالب بندی متن برای ایجاد تیتر و زیر تیترها در HTML استفاده می‌شوند. درجه اهمیت و اندازه تیترها در این تگ از h1 به h6 کاهش می‌یابد. به این معنی که تگ h1 دارای بیشترین اهمیت و تگ h6 دارای کمترین اهمیت از دید موتور جستجو است.حتما در استفاده از این تگ ها برای طراحی سایت خود دقت کنید.
<h1>
متن مورد نظر را وارد کنید
</h1>
<h2>
متن مورد نظر را وارد کنید
</h2>
<h3>
متن مورد نظر را وارد کنید
</h3>
<h4>
متن مورد نظر را وارد کنید
</h4>
<h5>
متن مورد نظر را وارد کنید
</h5>
<h6>
متن مورد نظر را وارد کنید
</h6>استفاده از این تگ در خروجی به صورت زیر خواهد بود.
تگ style
تگ style برای استایل نویسی عناصر صفحه استفاده می‌شود. وقتی که بخواهید کدهای css خود را به صورت داخلی و بدون لینک به خارج در صفحات html معرفی کنید از این تگ استفاده کنید. هر سند HTML می تواند حاوی چند تگ style باشد. این تگ می‌تواند در بخش head و یا body قرار بگیرد. توسط این تگ می‌توانید مشخص کنید که عناصر HTML چگونه و با چه استایلی در مرورگر نمایش داده شوند. برای پیاده سازی این تگ نیاز به نوشتن کدهای CSS دارید.
تگ P
تگ p در واقع برای ایجاد پاراگراف در صفحات استفاده می‌شود. این تگ در بخش body نوشته شده و موتور جستجو با دیدن آن متوجه می‌شود که با یک پاراگراف روبه رو است. در حالت عادی اگر برای نوشتن متن‌ها از اینتر استفاده کنید و به پاراگراف بعدی بروید این متن در مرورگر به صورت پیوسته نمایش داده می‌شود. شما حتما برای ایجاد پاراگراف باید از تگ P استفاده کنید. این تگ به صورت زیر استفاده می‌شود.
<p>
متن مورد نظر را اینجا وارد کنید
<p/>تگ a
تگ a در HTML برای ایجاد لینک بین دو صفحه مورد استفاده قرار می‌گیرد. این تگ برای لینک کردن به همراه خاصیت href استفاده می‌شود. لینک مورد نظر در بخش href قرار می‌گیرد و متنی که در بین تگ شروع و پایان نوشته می‌شود لینک خواهد شد.
<a href="لینک مورد نظر را اینجا وارد کنید">
متن مورد نظر برای لینک به صفحه دیگر را اینجا بنویسید
</a>تگ link
با استفاده از تگ link می‌توان ارتباط بین یک سند HTML و یک فایل CSS یا به عبارتی منبع خارجی یعنی چیزی که خارج از صفحه جاری باشد‚ ایجاد کرد. این تگ در بخش head صفحه HTML قرار گرفته و یک تگ تنها است یعنی تگ پایانی ندارد. این تگ به شکل زیر نوشته می‌شود. در بخش href نام فایل CSS مورد نظر را وارد کنید.
بیشتر بخوانیم:
تگ img
تگ img برای اضافه کردن تصاویر به وب سایت شما استفاده می‌شود. برای اضافه کردن یک تصویر در HTML با استفاده از تگ مانند دستور زیر را بنویسید. خیلی بهتر است که موقع قرار دادن یک تصویر در صفحه وب خود حتما ویژگی alt آن را مقدار دهی کنید. این ویژگی یعنی اگر به هر دلیلی تصویر شما نمایش داده نشد متن موجود در alt نمایش داده شود. این مورد در سئو نیز بسیار مهم است.
<img src="آدرس تصویر را اینجا وارد کنید" alt="متن جایگزین را اینجا وارد کنید">از دیگر تگ های HTML
- تگ br که مخفف Break است و برای ایجاد شکستگی و رفتن به سطر بعدی از آن استفاده می‌شود. این تگ به صورت تنها است و پایان ندارد.
- تگ b که مخفف Bold است و محتوای قرار گفته در بین تگ باز و بسته آن بصورت توپر، یا اصلاحا کلفت نمایش داده می‌شود.
- تگ strong همان کاربرد تگ b را دارد. با این تفاوت که این تگ به موتورهای جستجو می‌گوید که محتوایی که ضخیم شده محتوای مهمی است. این تگ هم دارای تگ باز و بسته می‌باشد.
- تگ i که برای مورب یا همان italic کردن قسمتی از متن استفاده می‌شود که دارای تگ باز و بسته می‌باشد.
- تگ em که عمکردی مشابه تگ i دارد. با این تفاوت که محتوای این تگ برای موتورهای جستجو مهم‌تر خواهد بود. وقتی بخواهیم روی یک محتوا تاکید داشته باشیم از تگ em استفاده می‌کنیم.
- تگ u که مخفف Underline است. متنی و یا عبارتی که در تگ باز و بسته تگ u قرار می‌گیرد به صورت زیر خط دار نمایش داده خواهد شد.
- تگ ins که عملکردی مشابه تگ u دارد. اما چون این تگ دارای صفات و اتریبیوت‌های کاربردی می‌باشد که آن را برای موتورهای جستجو و مرورگرها مهم‌تر از تگ u خواهد کرد.
متا تگ چیست؟
متا تگ یا تگ Meta در واقع تگ‌هایی از کدهای HTML هستند که برای درک بهتر محتوای صفحات سایت توسط موتورهای جستجو و کاربران کمک می‌کنند و محتوا را بهتر توصیف می‌کنند. آنها اطلاعات مربوط به یک صفحه وب را در خود نگهداری می‌کنند. این اطلاعات شامل توضیحات‚ کلیدواژه‌ها و… می‌شوند.
این متا تگ‌ها در کد نویسی این صفحات در بخش head قرار می‌گیرند و محتویات تگ متا در صفحه نمایش داده نمی‌شود و فقط روی نحوه عملکرد و تفسیر صفحه تاثیر دارد. در واقع متا تگ ها توسط ربات‌هایی مثل ربات گوگل دیده می‌شوند تا بتوانند بهتر و دقیق‌تر صفحات سایت را درک کنند و عملکرد مناسبی داشته باشند. اما کاربر آنها را مستقیم مشاهده نمی‌کند.
اما به صورت کلی می‌توان گفت که تفاوت اصلی بین تگ و متا تگ این است که استفاده تگ‌ها برای کاربران سایت است و کاربران می‌توانند تاثیر تگ‌ها را در وب سایت ببینید. اما متا تگ ها در قسمت head فایل HTML نوشته می‌شوند. یعنی برای کاربران نمایش داده نمی‌شوند و سمت سرور هستند. متا تگ ها تنها برای موتورهای جستجو و … مورد استفاده قرار می‌گیرند و البته وجود آنها برای صفحات وب سایت بسیار مهم است.
اهمیت متا تگ ها به چه علت است؟
وقتی شما عبارتی را در موتورهای جستجو‚ سرچ می‌کنید توقع دارید که مطالب مرتبط با آن عبارت به شما نمایش داده شود. کاربران در صفحه نتایج گوگل به دنبال آیتم‌هایی هستند که متناسب با عبارت جستجو شده آنها باشد و عبارت جستجو شده در آن وجود داشته است. برای این که وب سایت شما در نتایج گوگل قرار داشته باشد یکی از کارهایی که لازم است انجام دهیم ایت است که موتورهای جستجو درک درستی از مطالب وب سایت‌های مختلف پیدا کنند. شما برای این که موضوع و مفهوم محتواهای وب سایت خود را به موتور جستجو بفهمانید باید از متا تگ های مختلف در محتواهای خود استفاده کنید.
متا تگ ها در واقع به به سئو صفحات کمک می‌کنند. اما به شرطی که از آنها درست استفاده شود و در استفاده از آنها زیاده روی نشود. شما می‌توانید متا تگ های هر صفحه‌ای را ببینید. برای این کار روی آن صفحه کلیک راست کرده و گزینه View Page Source را انتخاب کنید. در تب جدید تمامی متا تگ‌های این صفحه نمایش داده خواهند شد.
برخی متا تگ های HTML
در ادامه به برخی از متا تگ‌های پر استفاده و مهم در HTML اشاره می‌کنیم.
متا تگ توضیحات
متا تگ توضیحات یکی از متا تگ‌های موثر در سئو صفحات سایت است. وقتی که شما عبارتی را جستجو می‌کنید در صفحه نتایج گوگل لینک‌هایی ظاهر می‌شود که زیر هر یک از آنها توضیح کوتاهی درباره محتوای آن صفحه وجود دارد. متا تگ توضیحات یا description آن توضیحات را برای صفحات سایت شما تعیین می‌کند. بهتر است که شما از این تگ برای هر صفحه از سایت استفاده کنید و توضیحاتی بنویسید تا در صفحه نتایج گوگل نمایش پیدا کند. نوشتن یک متن جذاب در این متا تگ تاثیر خوبی در افزایش نرخ ورودی و نرخ کلیک دارد. این تگ به صورت زیر نوشته می‌شود.
<meta name=”description” content=”توضیحات را اینجا وارد کنید”>
بیشتر بخوانیم:
متای کلمات کلیدی
برای تعریف عبارت کلیدی برای هر یک از مطالب وب سایت خود برای موتور جستجو از متا تگ Keywords استفاده می‌شود. این متا تگ در گذشته اهمیت زیادی برای سئو و موتورهای جستجو داشت. ولی در حال حاضر اهمیت چندانی ندارد. ولی توصیه می‌شود که حتما از آن استفاده شود. این متا تگ به صورت زیر نوشته می‌شود.
<meta name=”keywords” content=”کلمه کلیدی 1, کلمه کلیدی 2, …”>
شما باید تمام عبارات کلیدی مورد نظر خود را با استفاده از خاصیت content مشخص کنید. سپس آنها را با کاما از هم جدا کنید. البته می‌توانید فقط از یک عبارت کلیدی هم استفاده کنید.
متا تگ Viewport
این تگ برای طراحی responsive و نمایش صفحات سایت در نمایشگرهای مختلف مانند گوشی بسیار کاربردی است. به کمک این تگ می‌توان اندازه صفحه سایت را با اندازه نمایشگر منطبق کرد.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
