9 تگ مهم HTML و ویژگی های آنها که برای سئو باید بدانید
آیا متن جایگزین یک فاکتور رتبه بندی گوگل است؟
اکتبر 13, 2022
چگونه یک وب سایت فروشگاهی موفق بسازیم
اکتبر 15, 2022
HTML پایه و اساس یک صفحه وب است. برچسب ها و ویژگی های کلیدی HTML را که برای سئوی خوب بسیار مهم هستند، کشف کنید. کاربرد آنها و نحوه کدنویسی آنها را بیابید.
HTML یک زبان نشانه گذاری است که اساس اکثر صفحات وب را تشکیل می دهد. مسلما یکی از اساسی ترین بخش های سئو فنی است. با استفاده از عناصر HTML، متخصصان سئو می توانند اطلاعات مربوط به صفحه را به کاربران و ربات های جستجو منتقل کنند.
این می تواند به روشن شدن اهمیت، ماهیت و ترتیب محتوا در یک صفحه و همچنین ارتباط آن با سایر صفحات وب کمک کند.
تفاوت بین برچسب ها و ویژگی ها
برای درک تفاوت بین برچسب‌ها و ویژگی‌ها، باید مطمئن شویم که اصطلاحات خود را درست تعریف کرده‌ایم. بسیاری از افراد عبارت “برچسب یا تگ” و “ویژگی یا صفت(Attribute)” را به جای هم استفاده می کنند، اما بیایید دقیق باشیم.
فرمت عنصر HTML زیر در سه بخش است:
- تگ شروع
- محتوای خاص آن برچسب
- تگ بسته شدن
مثلا:
<h1>داده بنیان چیستا: طراحی سایت و سئو</h1>- “<h1>” تگ را باز می کند.
- “داده بنیان چیستا: طراحی سایت و سئو” محتوای این برچسب است.
- “</h1>” تگ را می بندد.
این عنصر یک هدر است و به عنوان قابل مشاهده در یک صفحه وب برای معرفی محتوای مربوط به صفحه استفاده می شود.
برچسب ها
تگ ها باید دارای عناصر باز کننده <X> و </X> باشند تا تگ کار کند. همچنین عناصر خالی مانند <br> وجود دارند که هیچ محتوا یا برچسب پایانی برای آنها ندارند.
ویژگی ها یا Attributes
ویژگی ها به عناصر اضافه می شوند تا آنها را اصلاح کنند. آنها درون عنصر می نشینند، مانند:
<link rel="canonical" href="https://www.example.com" />
3 تگ اصلی HTML
برای ایجاد یک صفحه وب مفید، چند تگ کلیدی مورد نیاز است:
تگ <!DOCTYPE html>
تگ <!DOCTYPE html> اولین تگ در یک صفحه وب است. در اصل صفحه را به عنوان یک صفحه وب معرفی می کند.
تگ <head>
تگ <head> بخش اول صفحه را معرفی می کند. این جایی است که اطلاعات مربوط به صفحه، که در صفحه نمایش داده نمی شود، در آن قرار می گیرد. دانستن در مورد <head> بسیار مهم است زیرا این جایی است که برخی از برچسب های مهم برای سئو باید در آن قرار گیرند.
تگ <body>
تگ بدنه حاوی اطلاعات صفحه ای است که بازدیدکنندگان وب سایت خواهند دید. اینجا جایی است که تصاویر و ویدیوهای شما می روند. بدنه همچنین برخی دیگر از تگ های HTML را که بعداً در مورد آنها صحبت خواهیم کرد، در خود جای خواهد داد.
برچسب های رایج برای سئو و ویژگی های استفاده شده در آنها
تگ <meta>
تگ <meta> در <head> صفحه قرار دارد. می‌تواند حاوی ویژگی‌هایی باشد که اطلاعاتی را در مورد صفحه وب توصیف می‌کنند که واقعاً در محتوای صفحه دیده نمی‌شوند. این متا تگ اغلب به دلیل ویژگی‌هایی که با آن استفاده می‌شود و مواردی مانند «توضیحات متا» و «کلمات کلیدی متا» را که دیگر استفاده نمی‌شوند، «متا داده» می‌نامند.
صفت Name
ویژگی name با تگ <meta> استفاده می شود. این اساساً راهی برای مشخص کردن هر رباتی است که ممکن است از صفحه بازدید کند که آیا اطلاعات زیر در مورد آنها صدق می کند یا خیر. به عنوان مثال، از جمله <meta name=”robots” content=”noindex” /> به این معنی است که همه ربات ها باید به دستورالعمل “noindex” توجه کنند.
شما اغلب این را می شنوید که “برچسب ربات های متا” نامیده می شود. اگر از موارد زیر استفاده می‌شد <meta name=”googlebot” content=”noindex” /> فقط ربات گوگل باید به دستورالعمل “noindex” توجه کند. این یک راه خوب برای دادن دستورات به برخی از ربات های جستجو است که برای همه لازم نیست.
صفت Noindex
ویژگی “noindex” یکی از مواردی است که معمولا در سئو استفاده می شود. اغلب آن را “تگ noindex” می نامند، اما به طور دقیق تر، این یک ویژگی از تگ <meta> است. فرموله شده است:
<meta name="robots" content="noindex" />این قطعه کد به ناشران اجازه می دهد تا تعیین کنند چه محتوایی می تواند در فهرست موتورهای جستجو گنجانده شود. با افزودن ویژگی «noindex»، اساساً به موتور جستجو می‌گویید که ممکن است از این صفحه در فهرست خود استفاده نکند.
برای مثال، اگر محتوای حساسی وجود دارد که می‌خواهید از یک جستجوی ارگانیک در دسترس نباشد، مفید است. به عنوان مثال، اگر مناطقی در سایت خود دارید که فقط باید برای اعضای پولی قابل دسترسی باشد، اجازه دادن به این محتوا در فهرست های جستجو می تواند آن را بدون ورود به سیستم در دسترس قرار دهد.
دستورالعمل “noindex” باید خوانده شود تا دنبال شود. یعنی ربات های جستجو باید بتوانند به صفحه دسترسی داشته باشند تا کد HTML حاوی دستورالعمل را بخوانند. به این ترتیب، مراقب باشید که ربات ها را از دسترسی به صفحه در robots.txt مسدود نکنید.
صفت Description
ویژگی توصیف، که بیشتر به عنوان “متا توضیحات” شناخته می شود، با تگ <meta> استفاده می شود.
محتوای این تگ در SERP ها در زیر محتوای تگ <title> استفاده می شود.
این به ناشران اجازه می دهد تا محتوای صفحه را به گونه ای خلاصه کنند که به جستجوگران کمک کند تشخیص دهند که آیا صفحه نیازهای آنها را برآورده می کند یا خیر.
این روی رتبه‌بندی یک صفحه تأثیری ندارد، اما می‌تواند به تشویق کلیک‌ها از طریق SERP به صفحه کمک کند. توجه به این نکته مهم است که در بسیاری از موارد گوگل محتوای ویژگی توصیف را نادیده می گیرد تا از توضیحات خود در SERP استفاده کند.
تگ <title>
تگ عنوان یکی از مواردی است که اگر مدت زیادی در زمینه سئو بوده باشید با آن آشنا خواهید شد. همچنین در محاوره‌ای به عنوان «عنوان متا» شناخته می‌شود، این برچسبی است که برای تعریف عنوان صفحه استفاده می‌کنید. در <head> سایت قرار دارد.
به این ترتیب، هنگام حضور در صفحه وب برای کاربران قابل مشاهده نیست. با این حال، در نوار مرورگر، در SERP ها ظاهر می شود و به شما امکان می دهد ارتباط یک صفحه را با درخواست جستجوگر – هم برای ربات های جستجو و هم برای کاربران، مشخص کنید.
این یک عنصر مهم در سئو است.
<h1> to <h6>
تگ های عنوان برای نشان دادن اینکه کدام بخش از محتوای HTML باید به عنوان سرفصل استایل دهی شود استفاده می شود.
تگ ها در <body> صفحه قرار می گیرند و بنابراین متن برای کاربرانی که محتوای صفحه را مشاهده می کنند قابل مشاهده است.
از تگ های عنوان باید برای کمک به ساختار صفحه استفاده شود. هنگام ایجاد یک وب سایت، توسعه دهندگان اطمینان حاصل می کنند که سبک ها با هر نوع تگ عنوان مرتبط است.
این بدان معناست که کلمات پیچیده شده در تگ <h1> باید متفاوت از کلمات پیچیده شده در تگ <h2> به نظر برسند. این به کاربران کمک می‌کند تا تعیین کنند که چه زمانی بخشی از متن بخشی از بخش قبل از آن است، مانند عنوان و زیرنویس.
تگ های عنوان همچنین به ربات های جستجو کمک می کنند تا ساختار محتوای یک صفحه را تعیین کنند.
تگ های پیوند و ویژگی Href
به عنوان متخصصان سئو، ما زمان زیادی را صرف دنبال کردن لینک ها می کنیم.
اما آیا می دانید ساختار یک لینک چگونه است و بنابراین چرا ارزش برخی از پیوندها بیشتر از سایرین است؟ یک هایپرلینک استاندارد در اصل یک تگ <a> است. فرمت آن به شرح زیر است:
<a href=”www.example.com”>انکر متن پیوند به اینجا می رود</a>. برچسب<a> نشان می دهد که یک پیوند است.
ویژگی href= مقصد پیوند را تعیین می کند یعنی به چه صفحه ای پیوند داده شده است. متنی که بین تگ <a> باز و تگ </a> بسته می‌شود، متن لنگر یا همان انکرتکست است.
این متنی است که کاربر در صفحه ای که قابل کلیک به نظر می رسد می بیند. این برای پیوندهای قابل کلیکی که در <body> صفحه ظاهر می شوند استفاده می شود. برچسب<link> برای پیوند دادن یک منبع به منبع دیگر استفاده می شود و در <head> صفحه ظاهر می شود.
این لینک ها هایپرلینک نیستند، قابل کلیک نیستند. آنها رابطه بین اسناد وب را نشان می دهند.
ویژگی یا صفت Rel=”nofollow”
ویژگی rel=”nofollow” به ربات‌ها می‌گوید که URL درون ویژگی href، آدرسی نیست که بتوان آنها را دنبال کرد.
استفاده از خصیصه rel=”nofollow” بر توانایی کاربر انسانی برای کلیک بر روی لینک و انتقال به صفحه دیگر تاثیری نخواهد داشت. فقط ربات ها را تحت تاثیر قرار می دهد. این در سئو برای جلوگیری از بازدید موتورهای جستجو از یک صفحه یا نسبت دادن هر گونه مزیتی از پیوند یک صفحه به صفحه دیگر استفاده می شود.
این امر مسلماً یک پیوند را از دیدگاه ساخت لینک سنتی سئو بی‌فایده می‌کند، زیرا ارزش ویژه پیوند از طریق پیوند عبور نمی‌کند.
استدلال هایی وجود دارد که بگوییم اگر باعث شود بازدیدکنندگان صفحه پیوند داده شده را ببینند، همچنان یک پیوند مفید است! ویژگی «nofollow» می‌تواند توسط ناشران برای کمک به موتورهای جستجو استفاده شود تا بدانند چه زمانی یک صفحه پیوند داده شده نتیجه پرداخت است، مثلاً یک آگهی.
این می تواند به جلوگیری از مشکلات مربوط به جریمه های پیوند کمک کند زیرا ناشر اعتراف می کند که پیوند نتیجه یک معامله قانونی است و نه تلاشی برای دستکاری در رتبه بندی. ویژگی rel=”nofollow” را می توان بر اساس پیوند فردی مانند موارد زیر استفاده کرد:
<a href=www.example.com rel="nofollow">تگ های مهم و ویژگی های آنها برای سئو</a>یا می توان از آن برای رندر کردن تمام پیوندهای یک صفحه به عنوان “nofollow” از طریق استفاده از آن در <head> استفاده کرد، مانند ویژگی “noindex” استفاده می شود:
<meta name="robots" content="nofollow" />گوگل چگونه از صفت rel=”nofollow” استفاده می کند
در سال 2019، گوگل اعلام کرد که تغییراتی در نحوه استفاده از ویژگی “nofollow” ایجاد خواهد شد. این شامل آگاه کردن ما از برخی ویژگی‌های اضافی بود که می‌توان به جای «nofollow» برای بیان بهتر رابطه پیوند با صفحه هدف آن استفاده کرد.
این ویژگی‌های جدید rel=”ugc” و rel=”sponsored” هستند. آنها باید برای کمک به Google در درک زمانی که یک ناشر مایل است به صفحه هدف برای اهداف سیگنال رتبه بندی تخفیف داده شود، استفاده شود.
ویژگی rel=”sponsored” برای شناسایی زمانی است که یک لینک نتیجه یک معامله پولی مانند یک تبلیغ یا حمایت مالی است. ویژگی rel=”ugc” برای شناسایی زمانی است که یک لینک از طریق محتوای تولید شده توسط کاربر مانند یک انجمن اضافه شده است.
گوگل همچنین اعلام کرد که اینها و ویژگی “nofollow” تنها به عنوان نکات در نظر گرفته می شود. در حالی که قبلاً ویژگی “nofollow” منجر به نادیده گرفتن ربات Google از پیوند مشخص شده می شد، اکنون آن راهنمایی را تحت نظر می گیرد، اما ممکن است همچنان با آن به گونه ای برخورد کند که گویی “nofollow” وجود ندارد.
صفت Hreflang
هدف از ویژگی hreflang کمک به ناشرانی است که سایت‌هایشان محتوای یکسانی را به چندین زبان نشان می‌دهند. موتورهای جستجو را راهنمایی می کند که کدام نسخه از صفحه باید به کاربران نشان داده شود تا بتوانند آن را به زبان دلخواه خود بخوانند.
ویژگی hreflang با تگ <link> استفاده می شود. این ویژگی زبان محتوا را در URL لینک شده مشخص می کند. در <head> صفحه استفاده می شود و به صورت زیر قالب بندی می شود:
<link rel="alternate" href="https://example.com" hreflang="en-fa" />به چند قسمت تقسیم می شود:
- rel=”alternate” که نشان می دهد صفحه دارای یک صفحه جایگزین مرتبط با آن است.
- ویژگی href= نشان می دهد که به کدام URL پیوند داده شده است.
کد زبان یک نام دو حرفی است تا به ربات‌های جستجوگر بگوید که صفحه پیوند داده شده به چه زبانی نوشته شده است. این دو حرف از یک لیست استاندارد گرفته شده به نام کدهای ISO 639-1 گرفته شده‌اند.
ویژگی hreflang همچنین می تواند در هدر HTTP برای اسنادی که در HTML نیستند (مانند PDF) یا در نقشه سایت XML وب سایت استفاده شود. استفاده صحیح از ویژگی hreflang می تواند مشکل باشد.
ویژگی Canonical
ویژگی rel=”canonical” تگ لینک به متخصصین سئو این امکان را می دهد که مشخص کنند کدام صفحه دیگر در یک وب سایت یا دامنه دیگری باید به عنوان متعارف در نظر گرفته شود. متعارف بودن یک صفحه اساساً به این معنی است که صفحه اصلی است که سایرین ممکن است کپی از آن باشند.
برای اهداف موتور جستجو، این نشانه صفحه ای است که یک ناشر می خواهد به عنوان صفحه اصلی در نظر گرفته شود که باید رتبه بندی شود، نسخه ها نباید رتبه بندی شوند. ویژگی کنونیکال به شکل زیر است:
<link rel="canonical" href="https://www.example.com/" />کد باید در <head> صفحه قرار گیرد. صفحه وب که بعد از “href=” ذکر شده است باید صفحه ای باشد که می خواهید ربات های جستجو به عنوان صفحه متعارف در نظر بگیرند.
این تگ در مواقعی مفید است که دو یا چند صفحه ممکن است دارای محتوای یکسان یا تقریباً یکسان باشند.
استفاده کردن از صفت Canonical
وب سایت ممکن است به گونه ای راه اندازی شود که برای کاربران مفید باشد، مانند صفحه فهرست محصولات در یک سایت تجارت الکترونیک. به عنوان مثال، صفحه دسته اصلی برای مجموعه ای از محصولات، مانند “کفش” ممکن است دارای کپی، سرصفحه و عنوان صفحه باشد که در مورد “کفش” نوشته شده است.
اگر کاربر روی فیلتری کلیک کند تا فقط کفش های قهوه ای با سایز 8 نشان داده شود، URL ممکن است تغییر کند اما کپی، سرصفحه و عنوان صفحه ممکن است مانند صفحه “کفش” باقی بماند.
این منجر به دو صفحه می شود که جدا از لیست محصولات نشان داده شده یکسان هستند. در این مثال، مالک وب‌سایت ممکن است بخواهد یک برچسب متعارف در صفحه «کفش قهوه‌ای، سایز 8» با اشاره به صفحه «کفش» قرار دهد.
این به موتورهای جستجو کمک می کند تا بفهمند که صفحه “کفش قهوه ای سایز 8” نیازی به رتبه بندی ندارد، در حالی که صفحه “کفش” مهم تر از این دو است و باید رتبه بندی شود.
Issues With the Canonical Attribute
درک این نکته مهم است که موتورهای جستجو فقط از ویژگی متعارف به عنوان راهنما استفاده می کنند، این چیزی نیست که باید دنبال شود. موارد زیادی وجود دارد که ویژگی canonical نادیده گرفته می شود و صفحه دیگری به عنوان کنونیکال انتخاب می شود.
تگ <img>
تگ <img> برای جاسازی یک تصویر در صفحه HTML استفاده می شود. این تگ تصویر را به این صورت وارد صفحه نمی‌کند، بلکه به گونه‌ای به آن پیوند می‌دهد که اجازه می‌دهد تصویر در صفحه قابل مشاهده باشد.
اساساً یک محفظه برای تصویری که در جای دیگری میزبانی می شود ایجاد می کند. فرمت برچسب <img> به صورت زیر است:
<img src="imagename.jpg" alt="this is the description of the image">این تگ شامل دو ویژگی است، یکی که برای کارکرد تگ ضروری است و دیگری که می توان آن را خالی گذاشت.
صفت Src
ویژگی src= برای ارجاع به موقعیت تصویری که در صفحه نمایش داده می شود استفاده می شود.
اگر تصویر در همان دامنه ای قرار دارد که ظرفی که در آن ظاهر می شود، یک URL نسبی (فقط قسمت انتهایی URL، نه دامنه) می تواند استفاده شود. اگر قرار است تصویر از وب سایت دیگری کشیده شود، باید از URL مطلق (کل) استفاده شود.
اگرچه این ویژگی هیچ هدفی را برای سئو انجام نمی دهد، اما برای کارکرد تگ تصویر مورد نیاز است.
صفت Alt
تگ <img> همچنین حاوی یک ویژگی دوم، ویژگی alt= است. این ویژگی برای تعیین متن جایگزین در صورتی که تصویر قابل ارائه نباشد، استفاده می‌شود. ویژگی alt= باید در تگ <img> وجود داشته باشد، اما اگر متن جایگزینی نمی‌خواهید، می‌توان آن را خالی گذاشت.
در نظر گرفتن استفاده از کلمات کلیدی در یک ویژگی alt= تصویر، مزایایی دارد. موتورهای جستجو نمی توانند با دقت تعیین کنند که یک تصویر از چه چیزی است. گام های بلندی در توانایی موتورهای جستجوی اصلی برای شناسایی آنچه در یک تصویر است، برداشته شده است. با این حال، این فناوری هنوز کامل نیست.
به این ترتیب، موتورهای جستجو از متن در ویژگی alt= برای درک بهتر تصویر از چیست استفاده می کنند. از زبانی استفاده کنید که به تقویت ارتباط تصویر با موضوعی که صفحه در مورد آن است کمک کند.
این می تواند به موتورهای جستجو در شناسایی ارتباط آن صفحه برای جستجوهای جستجو کمک کند. بسیار مهم است که به یاد داشته باشید که این دلیل اصلی برای ویژگی alt= نیست. این متن توسط صفحه‌خوان‌ها و فناوری کمکی استفاده می‌شود تا کسانی که از این فناوری استفاده می‌کنند بتوانند محتوای تصویر را درک کنند.
ویژگی alt= باید قبل از هر چیز در نظر گرفته شود تا وب سایت ها برای کسانی که از این فناوری استفاده می کنند قابل دسترسی باشد. این نباید فدای اهداف سئو شود.
نتیجه
این راهنما مقدمه‌ای است بر برچسب‌ها و ویژگی‌های اصلی HTML که ممکن است در مورد سئو بشنوید. با این حال، موارد بسیار دیگری برای ایجاد یک صفحه وب کارآمد، قابل خزیدن و نمایه سازی وجود دارد.
تقاطع بین SEO و مجموعه مهارت های توسعه بسیار زیاد است. به عنوان یک متخصص سئو، هرچه اطلاعات بیشتری در مورد نحوه ساخت صفحات وب داشته باشید، بهتر است. اگر می‌خواهید درباره HTML و برچسب‌های موجود با آن بیشتر بدانید، ممکن است از منبعی مانند W3Schools لذت ببرید.
