در این مقاله میخواهیم تگ و متا تگهایی را به شما معرفی کنیم که با استفاده از آنها میتوانید به خوبی با موتورهای جستجو ارتباط برقرار کنید. این تگها و متا تگهایی که در پشت پرده سایت ایفای نقش میکنند؛ همان نردبانی هستند که میتوانند شما را تا رتبه اول نتایج جستجو بالا ببرند. پس اگر شما یک کارشناس سئو، طراح سایت یا صاحب وبسایت هستید؛ تا انتها با این مقاله همراه شوید.
تگ html چیست؟
تگهای html را میتوان همانند نشانههای مسیریابی در جادههای شهری و بین شهری دانست. با استفاده از این تگها موتورهای جستجو خواهند فهمید که چگونه میتوانند به قسمتهای مختلف وب سایت شما دسترسی پیدا کنند. این تگها مسیرهای وب سایت را برای موتورهای جستجو روشن کرده و به آنها برای رتبهبندی سایت شما دسترسی میدهند.
متا تگ html چیست؟
متا تگها قطعه کدهای html هستند که بنیان و پایه اساسی را در وب سایت شما میسازند و با عبارت meta شروع میشوند. هرچند این کدها هرگز در صفحه وب سایت نمایش داده نمیشوند؛ اما در واقع راهنماهایی هستند که میتوانند نقشه وب سایت شما را برای موتورهای جستجو توضیح دهند. به این ترتیب موتورهای جستجو به سادگی متوجه میشوند که باید به کدام قسمتها دسترسی پیدا کرده و از آنها برای رتبهبندی سایت بهره بگیرند.
آیا متا تگ بر سئو تاثیر دارد؟
سئو در واقع به معنای راهی است که در آن تلاش میشود تا دادههای موجود در یک وب سایت برای موتورهای جستجو قابل فهم شود. به این ترتیب سرچ انجینها میتوانند به راحتی ارتباط میان واژههای جستجو شده و صفحه وب سایت را پیدا کرده و در نتیجه آن را در رتبه بالاتری برای کلیدواژههای خاص قرار دهند.
بهترین راه برای قابل فهم کردن مطالب هر وب سایت در موتورهای جستجو، استفاده از تگها و متا تگهای html است.
با استفاده از این روش میتوان مسیر دسترسی موتورهای جستجو را به قسمتهای مختلف یک صفحه در وب سایت هموار کرد. این موضوع تا حد زیادی به موتورهای جستجو کمک میکند تا مفهوم محتوای منتشرشده در وب سایت شما را درک کردن و بتوانند بهراحتی آن را رتبه بندی کنند.
اگر میخواهید بدانید که متا تگهای html چگونه میتوانند بر روی سئوی سایت شما تاثیر بگذارند؛ باید تاثیر هر یک را به طور جداگانه بررسی کنید. زیرا هر کدام از آنها بر روی قسمت خاصی تاثیرگذار هستند که میتواند تاثیر متفاوتی بر روی مخاطب بگذارد.
چگونه میتوان متا تگهای یک سایت را بررسی کرد؟
همانطور که گفتیم متا تگهای html قطعه کدهایی هستند که در پشت پرده یک سایت قرار دارند؛ بنابراین شاید تصور کنید که امکان دسترسی به آنها برای هر کسی وجود ندارد. اما سخت در اشتباه هستید؛ زیرا شما میتوانید به محض ورود به صفحه هر سایت، با انجام یک کار بسیار ساده، به همه کدهای html آن دسترسی پیدا کرده و متا تگها را بررسی کنید. برای این کار میتوانید از دو طریق اقدام کنید:
1- بر روی صفحه کلیک راست کرده و گزینه inspect را انتخاب کنید
2- به محض ورود به صفحه وبسایت، کلیدهای ترکیبی Ctrl+U را بزنید
به محض انجام این دو کار صفحهای برای شما باز خواهد شد که با استفاده از آن میتوانید به همه متا تگها و تگهای html مخفی شده در پس این صفحه دسترسی پیدا کنید.
کدام متا تگها تاثیر خوبی بر سئو دارند؟
هر وبسایت دارای دو بخش اصلی به نام Head و body است که هر یک متا تگهای خاص خود را دارند. اگر میخواهید با استفاده از سئو سایت خود را از سایر رقبایتان متمایز کنید؛ باید از متا تگهای خاصی در این دو قسمت بهره بگیرید که تاثیر زیادی در فهم بهتر وبسایت برای موتورهای جستجو خواهند داشت.
متا تگهای خوب و اثرگذار در head سایت
بهترین متا تگهای html که وجود آنها در head سایت میتواند برای شما مفید باشد؛ از قرار زیر هستند:
1. DESCRIPTION
متا دسکریپشن از مهمترین تگهای html است که میتواند توضیحات مختصری را از یک صفحه ارائه دهد. متا دسکریپشن در کدهای html به شکل زیر نمایش داده میشود:
متا دیسکریپشن دارای تعداد کاراکتر محدودی است و معمولا نباید از 160 کاراکتر بیشتر شود؛ در غیر این صورت به طور کامل به مخاطب نمایش داده نمیشود. متا دیسکریپشن به طور مستقیم در فرایند رتبه بندی سایت تاثیر ندارد؛ اما میتواند با جذب مخاطب، نرخ کلیک شما را افزایش داده و به این ترتیب تاثیر مثبتی بر روی سئو بگذارد.
2. TITLE
یکی از تگهای مهم در قسمت head سایت، تگ عنوان یا Title است. این تگ در کدهای html به صورت زیر نمایش داده میشود:
این تگ به خواننده و موتورهای جستجو کمک میکند تا بتوانند موضوع اصلی و مغز محتوای شما را دریابند. محتوایی که در قسمت example قطعه کد بالا قرار میگیرد؛ در دو قسمت نمایش داده میشود:
- عنوان صفحه بالای مرورگر
- پیشنمایش لینک در شبکههای اجتماعی
اگر شما چنین تگی را در میان کدهای سایت خود نداشته باشید؛ گوگل به صورت خودکار آن را با بخشی از محتوا پر خواهد کرد. اما بهتر است از این فرصت استفاده کرده و یک عنوان بسیار عالی را برای محتوای خود انتخاب کنید.
3. Robots
متا تگ Robots در زمانی کاربرد دارد که شما بخواهید با استفاده از لینکهای داخلی و خارجی صفحات وبسایت خود را به هم مرتبط کنید. در برخی از موارد لینک سازیهایی که در داخل یک صفحه انجام میشود؛ میتوانند به طور مستقیم بر روی اعتبار سایت تاثیر بگذارند. در نتیجه با استفاده از این متا تگ به موتور جستجو خواهید فهماند که لینکهای مخرب را در صفحه شما دنبال نکنند. متا تگ robots در html به صورت زیر نمایش داده میشود:
با استفاده از این متا تگ میتوانید تکلیف لینک سازیهای داخلی و خارجی را در صفحه خود برای موتور جستجو مشخص کنید. برای این کار از دو نوع تگ robots استفاده میشود:
Noindex
استفاده از این عبارت به موتور جستجو خواهد فهماند که نباید صفحه شما را ایندکس کند. به این ترتیب اگر در مراحل اولیه طراحی سایت یا بازسازی صفحات هستید؛ میتوانید با استفاده از این توضیح؛ از گوگل بخواهید که صفحه شما را تا زمان اتمام کار ایندکس نکند.
Nofollow
با استفاده از این توضیح از موتورهای جستجو میخواهید که لینکهای این صفحه از وب سایت را دنبال نکنند. در نتیجه اعتبار این لینکها بر روی صفحه شما تاثیر نخواهد گذاشت.
4. canonical
متا تگ canonical یکی از مهمترین متا تگهایی است که حتما باید در کدهای html وجود داشته باشند. با استفاده از این تگها میتوانید به موتورهای جستجو بفهمانید که کدام URL، نسخه اصلی یک صفحه است. این متا تگ به صورت زیر نوشته میشود:
شما باید URL مشخصی را که نشان دهنده صفحه اصلی شما است؛ در قسمت href قرار دهید. استفاده از این تگ به موتورهای جستجو کمک میکند که بتوانند به راحتی محتواهای وب سایت شما را از یکدیگر متمایز کنند. برای اینکه از عملکرد این متا تگ بهتر مطلع شوید؛ مثال زیر را در نظر بگیرید:
شما صفحه اول وبسایت خود را در دو نسخه تولید کردهاید که یکی از آنها برای دسکتاپ و دیگری برای موبایل نمایش داده میشود. در این صورت سیستم مدیریت محتوا در زمان راهاندازی صفحه ممکن است آدرس هریک از این صفحات را به یکی از شکلهای زیر نمایش دهد:
همه این صفحات از دید کاربر یکسان هستند. اما به دلیل اینکه شکل نمایش آدرس آنها با هم متفاوت است؛ موتورهای جستجو آنها را به عنوان چهار صفحه مجزا در نظر خواهند گرفت. این در حالی است که محتوای موجود در همه این چهار صفحه با هم یکسان هستند و عملا تفاوتی با هم ندارند. برای جلوگیری از این اتفاق شما باید یک تگ کنونیکال در کدهای html همه صفحات قرار دهید که در همه آنها محتوای نوشته شده در قسمت href با هم یکسان هستند. به این ترتیب به موتور جستجو خواهید فهماند که تمایز در آدرس صفحات، لزوما به معنای تمایز در محتوای آنها نیست. بهتر است برای آشنایی بیشتر مقاله تگ کنونیکال چیست را مطالعه فرمایید.
5. content-type
با استفاده از متا تگ content-type میتوانیم به مرورگر بفهمانیم که این صفحه وب از چه ساختاری استفاده میکند. به ویژه برای سایتهایی که به زبان دیگری به جز انگلیسی نوشته میشوند؛ وجود این متا تگ ضروری است. زیرا به موتور جستجو خواهد فهماند که چگونه باید کاراکترهای مربوط به زبان وبسایت شما را بفهمد و نمایش دهد. برای نمایش این متا تگ از قطعه کد زیر استفاده میشود:
البته اگر از html نسخه 5 استفاده میکنید؛ دیگر نیازی به تعریف مقدار صفت http-equive نخواهید داشت.
6. Viewport
متا تگ viewport مربوط به بخشی از صفحه است که توسط کاربر دیده میشود. با استفاده از این متا تگ میتوان ظاهر صفحه وب را متناسب با اندازه دستگاههای الکترونیکی مختلف مانند لپ تاپ، تبلت و گوشی تغییر داد؛ به عبارت بهتر میتوان گفت که viewport وظیفه ریسپانسیو کردن صفحات را بر عهده دارد. قطعه کد این متا تگ به صورت زیر نمایش داده میشود:
به این ترتیب میتوان ابعاد مختلف صفحه را متناسب با دستگاه الکترونیکی تنظیم کرد.
7. shortcut icon
با استفاده از متا تگ shortcut icon میتوانید لوگوی خود را در کنار آدرس سایت نمایش دهید و به این ترتیب گام موثری در جهت برندسازی بردارید. با استفاده از این کد، زمانی که کاربر سایت شما را در یک تب جدید باز کند؛ میتواند یک تصویر کوچک از لوگو یا نماد وبسایت شما را در کنار عنوان نمایش داده شده در tab مشاهده کند. این قطعه کد به صورت زیر نمایش داده میشود:
با استفاده از این روش میتوانید نام و فرمت تصویری را که میخواهید در این قسمت نمایش داده شود؛ وارد کنید.
متا تگهای خوب و اثرگذار که باید در body سایت وجود داشته باشند
علاوه بر head سایت، وجود برخی از متا تگها در قسمت body هم میتواند بر روی وبسایت شما تاثیر مثبت گذاشته و رتبه آن را در موتورهای جستجو بالا ببرد. از مهمترین این متا تگها میتوان به موارد زیر اشاره کرد:
1. q یا نقل قول
متا تگ نقل قول به شما کمک میکند تا خوانایی محتوای خود را در سایت بالا ببرید. هر عبارتی که در داخل این تگ نوشته شود؛ در نمایش نهایی وب سایت، در میان دابل کوتیشن قرار خواهد گرفت. برای استفاده از این تگ در html از عبارت زیر استفاده میشود:
شما میتوانید عبارت مورد نظر خود را در فاصله میان این دو q وارد کنید.
2. span
یکی دیگر از متا تگهای html که میتواند به شما در زیباسازی متن و بهبود خوانایی آن کمک کند؛ متا تگ span است. با استفاده از این تگ میتوانید رنگ قسمتی از متن را تغییر داده و به این ترتیب توجه کاربر را به این قسمت جلب کنید. قطعه کد این تگ در html به صورت زیر نمایش داده میشود:
قسمتی از متن که قرار است با رنگ متفاوتی نمایش داده شود؛ در فاصله میان دو نشانه > و < نوشته میشود.
3. p
تگ p به شما کمک میکند تا بتوانید محتوای خود را پاراگراف بندی کنید؛ به این ترتیب خوانایی آن بهبود پیدا میکند. با استفاده از این تگ میتوانید به راحتی استایل پاراگرافهای خود را تنظیم کنید. این تگ با استفاده از قطعه کد زیر نمایش داده میشود:
4. a
با استفاده از تگ a میتوانید قسمتهایی را که میخواهید به لینک تبدیل کنید؛ برای موتورهای جستجو تعریف نمایید. این تگ به شما کمک میکند تا لینکهای خود را استایل دهی کرده و به این ترتیب تجربه کاربری را از وبسایت خود بهبود ببخشید. این تگ در html به صورت زیر نمایش داده میشود:
هر متنی که در این تگ جایگزین text شود؛ به عنوان لینک شناخته خواهد شد. از این تگ میتوانید برای لینک سازی داخلی و خارجی استفاده کنید.
5. section
تگ section به شما کمک میکند که یک بخش یا محتوای مستقل را در درون صفحه خود ایجاد کنید. هر یک از این بخشها دارای عنوان هستند و تم مخصوص به خود را دارند. قطعه کد این تگ در html به صورت زیر نمایش داده میشود:
در فاصله میان باز و بسته شدن این تگ، میتوان بسته به نیاز از دیگر تگهای html هم استفاده کرد تا این بخش به طور قابل فهمی در صفحه نمایش داده شود.
6. article
با استفاده از تگ article میتوانید محتواهای مختلف مثل مطالب انجمن، پستهای سایت، خبر و کامنتها را در وبسایت خود منتشر کنید. همه عناصر موجود در این تگ میتوانند ساختار مقالهها و مطالب مختلف را در وب سایت شما به نمایش بگذارند؛ به عبارت بهتر میتوانید از دیگر تگهای معرفی شده برای بخش body، در زیرمجموعه تگ article استفاده کنید. برای نمایش این تگ در html از قطعه کد زیر نمایش داده میشود:
7. aside
با استفاده از تگ aside میتوانید مطالب مربوط به محتوای اصلی را در سایدبار یا در خلال محتوا نمایش دهید تا کاربر برای کسب اطلاعات بیشتر به آنها مراجعه کند. به این ترتیب یک ارتباط معنایی قوی را میان مطالب مختلف وبسایت خود ایجاد خواهید کرد. این تگ به صورت زیر نمایش داده میشود:
8. keywords
متا تگ keywords یکی از مهمترین متا تگهایی است که باید در طراحی وبسایت خود از آن استفاده کنید. با استفاده از این متا تگ میتوانید کلمههای کلیدی صفحهای از وبسایت را مشخص کنید. در نتیجه موتورهای جستجو خواهند فهمید که در پاسخ به کدام عبارتهای جستجوشده، میتوانند وبسایت شما را نمایش دهند. برای نمایش این متا تگ میتوانید از قطعه کد زیر استفاده کنید:
شما میتوانید در قسمت content یک یا چند کلمه کلیدی را برای وبسایت خود تعریف کنید؛ اما توصیه میشود که این تعداد از 20 عدد بیشتر نباشد.
9. header
با استفاده از تگ header میتوانید یک سربرگ مشخص را برای بخشی از یک صفحه یا کل آن ایجاد کنید. به طور معمول از این تگ برای ساخت هدر اصلی سایت به عنوان جایگاهی برای قرار گرفتن منو، لوگو، توضیح کوتاه و مواردی از این دست استفاده میشود. اما اگر از چند هدر در یک صفحه استفاده کنید؛ هیچ مشکلی ایجاد نخواهد شد. این تگ به صورت زیر در html نمایش داده میشود:
10. footer
تگ footer هم کاربرد مشابهی با تگ header دارد؛ با این تفاوت که در قسمت پایینی صفحه قرار میگیرد. اما میتوان در آن لینکهای مرتبط یا اطلاعات تماس را قرار داد. این تگ به صورت زیر نمایش داده میشود:
11. div
با استفاده از تگ div میتوانید قسمتهای مختلف وبسایت مانند هدر، مطالب اصلی و فوتر را از هم جدا کنید. این تگ تاثیر به سزایی در بخش بندی سایت دارد و جایگزین بسیار خوبی برای استفاده از جدول برای جدا کردن قسمتهای مختلف است. شیوه نمایش این تگ در html به صورت زیر است:
12. h1، h2، h3، h4، h5 و h6
از تگهای h1 تا h6 میتوان برای عنوانبندی مقاله یا هر محتوای دیگری استفاده کرد. با استفاده از این تگها، اهمیت هر عنوان در مقاله مشخص میشوند؛ نکته مهم اینجا است که که باید سلسله مراتب را در زمان استفاده از این تگها رعایت کنید. برای نوشتن این تگها از قطعه کد زیر استفاده میشود:
لزومی ندارد که از همه این تگها در وبسایت خود استفاده کنید؛ این موضوع بسته به محتوا و صفحه شما متفاوت خواهد بود.
13. img
از تگ img میتوانید برای اضافه کردن یک تصویر یا عکس در صفحه وب خود استفاده کنید. با استفاده از این تگ میتوان مسیر تصاویر را مشخص کرده و متن جایگزین تصاویر را تعریف کرد. برای نوشتن این تگ در html میتوانید از قطعه کد زیر استفاده کنید:
در این قطعه کد باید مسیر ذخیره تصویر در سیستم خود را روبروی عبارت src بنویسید و توضیح آلت را در قسمت alt وارد کنید. استفاده از توضیحات آلت به تصاویر صفحه شما شناسنامه میدهند. در نتیجه زمانی که کاربر با استفاده از تصویر مطلبی را جستجو خواهد کرد؛ موتورهای جستجو میتوانند با استفاده از این توضیحات به وبسایت شما دسترسی پیدا کنند. به این ترتیب احتمال حضور در میان لینکهای برتر افزایش خواهد یافت.
نکته مهم
تگهای html که در قسمت body سایت به کار میروند؛ در ترکیب با هم میتوانند به زیبایی صفحه وب سایت شما و راحت کردن دسترسی کاربران کمک کنند. برای استفاده صحیح از این تگها باید سلسله مراتب هریک را بشناسید و بدانید که از کدام موارد میتوان در زیر مجموعه سایر تگها استفاده کنید.
کدام متا تگهای html برای سئو ضرر دارند؟
متا تگهای مختلف همانطور که میتوانند به شما برای بهبود سئو سایت کمک کنند؛ ممکن است علیه شما هم استفاده شوند. بعضی از این متا تگها قدیمی شدهاند و به همین دلیل تاثیر بدی بر روی سایت شما میگذارند. برخی از آنها هم دیگر توسط موتورهای جستجو پشتیبانی نمیشوند و عملا هیچ تاثیری بر روی وب سایت نخواهند داشت. در نتیجه اگر آگاهی کافی برای استفاده از این ابزارها نداشته باشید و مواردی را در کد نویسی وبسایت خود به کار بگیرید که هرچه رشتهاید؛ پنبه خواهد شد. پس این متا تگها را بشناسید:
1. resource type
برای اشاره به نوع منبع صفحه استفاده میشود و استفاده از آن میتواند زمان زیادی را از شما بگیرد. به همین دلیل بهتر است از روش DTD استفاده کنید.
2. cache control
برای نظارت بر زمان ذخیره صفحه در حافظه مرورگر استفاده میشود و میتوان با استفاده از آن نحوه ذخیره کردن صفحات در مرورگر کاربران را مدیریت کرد. این در حالی است که موتورهای جستجو امروزه از روشهای بهتری برای این فرایند استفاده میکنند که با استفاده از هدرهای http میتوانید از این قابلیت استفاده کنید.
3. distribution
در زمانی به کار میرود که میخواهید بدانید چه کسانی میتوانند صفحه را مشاهده کنند. استفاده از این تگ برای صفحاتی که در دسترس عموم هستند؛ کاملا بی معنی است.
4. abstract
برای اشاره به چکیده یک مطلب به کار میرود که به جز در مقالههای پژوهشی، در جای دیگری کاربرد ندارد.
5. Copyright
به طور معمول در فوتر وبسایت وجود دارد و نیازی به استفاده مجدد از آن نیست.
6. Revisit after
این متا تگ به موتورهای جستجو دستور میدهد که چه زمانی به وب سایت شما برگردند. اما دیگر هیچ موتور جستجویی از دستورات آن پیروی نمیکند.
7. Authors
نام نویسنده و تصویر او را در صفحه وب سایت مشخص میکند؛ اما دیگر توسط گوگل پشتیبانی نمیشود و به جای آن از Schema استفاده میشود.
8. Expiration/date
برای تعیین تاریخ انقضای یک محتوا و مشخص کردن تاریخ ایجاد آن استفاده میشود. استفاده از این تگ میتواند شما را از تولید محتوای همیشه سبز دور کند. بنابراین اگر اطلاعات صفحه موردنظر شما دیگر به درد کاربر نمیخورند؛ خیلی راحت آن را حذف کنید و درگیر استفاده از این تگها نشوید. به جای استفاده از این متا تگ میتوانید از نقشه سایت XML استفاده کرده و دائما سایت خود را بهروز کنید.
9. Generator
با استفاده از این متا تگ شما میتوانید سیستم مدیریت محتوای خود را مشخص کنید. اما با این کار آدرس دقیق باگهای وب سایت خود را به هکرها دادهاید تا بتوانند به راحتی به وب سایت شما نفوذ کنند.
تگ های بی اثر بر روی سئو سایت
به جز مواردی که در بخش قبل به آنها اشاره کردیم؛ برخی از متا تگهای سئو بود یا نبودشان برای شما تفاوتی ایجاد نمیکند. پس بهتر است خودتان را برای استفاده از این موارد خسته نکنید:
1. refresh
با استفاده از این متا تگ صفحه شما در بازههای زمانی مشخص برای کاربر به روزرسانی میشود. تصور کنید که در حال خواندن یک صفحه هستید و به طور ناگهانی محتوای صفحه پس از مدتی بهروزرسانی شده و تغییر میکند. چه احساسی پیدا میکنید؟ پس بهتر است از این متا تگ استفاده نکنید. همچنین در صورتی که صفحه شما در حال index یا follow هست؛ نیازی به نوشتن آن ندارید.
2. theme-color
با استفاده از این متا تگ میتوانید رنگ نوار آدرس وب سایت را در مرورگرهای موبایل تغییر دهید. فرقی نمیکند که از theme-color استفاده کرده باشید یا نه؟ در هر صورت صفحه شما در این مرورگرها نمایش داده میشود. اما با استفاده از این کار میتوانید صفحه خود را زیباتر کرده و رنگ برندتان را به کاربر نشان دهید. در اینجا تصمیم کاملا بر عهده شما است.
3. dns-prefetch
با قرار دادن این متا تگ در قسمت head سایت میتوانید عملیات تبدیل نام دامنه به IP را در زمان مشاهده صفحه انجام دهید که این کار باعث بهبود سرعت لود سایت میشود. البته برای بهبود سرعت سایت راههای موثرتری هم هست؛ به همین دلیل فرقی نمیکند که از این متا تگ استفاده کنید یا نه.
جمع بندی
متا تگهای html به عبارتی زبان شما برای صحبت با مرورگر به شمار میروند. به همین دلیل لازم است که به خوبی اصول و قواعد این زبان را بشناسید تا بتوانید منظور خود را به درستی منتقل کنید. ما در این مقاله همه اصول نگارشی را در زمان طراحی سایت به شما آموزش دادیم تا بتوانید با دست پر برای کار با موتورهای جستجو عمل کنید.