به اشتراک بگذارید
هر بار که روی یک متن آبیرنگ در مرورگر کلیک میکنید و به صفحه جدیدی منتقل میشوید، در واقع با یک تگ a در HTML تعامل دارید. این تگ کوچک، همان عنصری است که میلیاردها صفحه وب را به هم متصل میکند و بدون آن، اینترنت چیزی شبیه مجموعهای از جزیرههای منزوی خواهد بود. تگ <a> نهتنها ابزار اصلی ناوبری در وب است؛ بلکه یکی از مهمترین عوامل تأثیرگذار بر سئوی سایت شماست. از انتخاب انکر تکست (Anchor Text) مناسب گرفته تا استفاده درست از ویژگیهای امنیتی مثل rel="nofollow" و rel="noopener"، همه و همه در رتبهبندی صفحات شما نقش دارند.
💡 تگ
<a>در یک نگاه:✅ عنصر اصلی ساخت لینک (Hyperlink) در HTML است.
✅ مهمترین صفت آن
hrefاست که مقصد لینک را مشخص میکند.✅ استفاده صحیح از آن = سئوی بهتر + تجربه کاربری حرفهای
اگر به دنبال یادگیری عملی و دقیق نحوه استفاده از تگ لینک در HTML هستید در این راهنمای جامع از وب داده، قدمبهقدم همهچیز را درباره تگ a در HTML توضیح میدهیم؛ از سادهترین لینک تا پیچیدهترین تنظیمات سئویی. فرقی نمیکند تازهکار باشید یا وبمستر حرفهای؛ این مقاله از بلاگ وب داده برای شماست.
آنچه در این مقاله میخوانید:
تگ a در HTML چیست؟
تگ <a> که به آن Anchor Element (عنصر لنگر) هم گفته میشود، عنصری در HTML است که برای ساختن پیوند (Hyperlink) استفاده میشود. با استفاده از این تگ میتوانید متن، تصویر یا هر عنصر دیگری را کلیکخور کنید تا کاربر به آدرس مشخصی هدایت شود. نام «لنگر» از اینجا آمده که این تگ مثل یک لنگر، دو نقطه مختلف در وب را به هم متصل میکند.
طبق مستندات رسمی MDN (آخرین بهروزرسانی: دسامبر 2025)، تگ <a> با کمک صفت href میتواند به صفحات وب، فایلها، آدرس ایمیل، بخشهای مختلف همان صفحه و هر چیزی که یک URL معتبر داشته باشد لینک ایجاد کند.
سادهترین شکل استفاده از تگ a به این صورت است:
<a href="https://webdade.com">وبداده</a>در این مثال، کلمه «وبداده» برای کاربر قابل کلیک میشود و با کلیک روی آن، مرورگر به آدرس https://webdade.com هدایت میشود.
🔸 نکته فنی: اگر تگ
<a> بدون صفت href استفاده شود، صرفاً یک متننگهدار (Placeholder) خواهد بود و هیچ عملکرد لینکی نخواهد داشت.ساختار و سینتکس تگ a در HTML
برای اینکه بهتر درک کنید تگ a چگونه کار میکند، بیایید ساختار آن را مثل قطعات یک پازل ببینیم:
صفت مقدار صفت انکر تکست
↓ ↓ ↓
<a href="https://example.com" > متن کلیکخور </a>
↑ ↑
تگ باز تگ بستهتگ a در HTML از سه بخش تشکیل شده است:
- تگ بازکننده
<a>که شامل صفتها میشود، - متن یا محتوای قابل کلیک که بین تگ باز و بسته قرار میگیرد (همان انکر تکست)
- تگ بسته
</a>
این ساختار ساده، پایه و اساس تمام لینکهای وب است؛ از منوی ناوبری سایت گرفته تا لینکهای داخلی مقالات.
ویژگی href در تگ a و انواع مقادیر آن
Attribute یا صفت href (مخفف Hypertext REFerence) مهمترین ویژگی تگ a است و مقصد لینک را تعیین میکند. بدون این صفت، تگ a عملاً بیکاربرد است. اما نکته جالب اینجاست که href فقط برای لینک به صفحات وب نیست؛ مقادیر مختلفی را میپذیرد که هر کدام کاربرد خاص خود را دارند.
انواع مقادیر href
| نوع مقدار | مثال | کاربرد |
|---|---|---|
| URL مطلق | href="https://webdade.com" | لینک به سایت دیگر |
| URL نسبی | href="/blog/article" | لینک داخلی در همان سایت |
| لنگر صفحه | href="#section-name" | پرش به بخش خاصی از صفحه |
| ایمیل | href="mailto:info@webdade.com" | باز کردن برنامه ایمیل |
| تلفن | href="tel:+989123456789" | شمارهگیری در موبایل |
| دانلود فایل | href="file.pdf" download | دانلود مستقیم فایل |
مثال عملی از لینک ایمیل و تلفن با استفاده از تگ a در HTML:
<!-- لینک ایمیل -->
<a href="mailto:support@webdade.com">ارسال ایمیل به پشتیبانی</a>
<!-- لینک تلفن -->
<a href="tel:+982191009100">تماس با وبداده</a>📌 نکته: استفاده از لینک تلفن (
tel:) به ویژه برای کاربران موبایل بسیار مفید است. با کلیک روی آن، شمارهگیر گوشی مستقیماً فعال میشود و این تجربه کاربری را به شکل محسوسی بهبود میدهد.انکر تکست (Anchor Text) و اهمیت آن در سئو
انکر تکست (Anchor Text) همان متن قابل کلیکی است که کاربر روی آن کلیک میکند. انکر تکست در واقع بخش جداییناپذیر تگ a محسوب می شود، این متن نهتنها به کاربر نشان میدهد که لینک به کجا میرود؛ بلکه به موتورهای جستجو هم سیگنال میدهد که صفحه مقصد درباره چه موضوعی است. به همین دلیل، انتخاب انکر تکست مناسب یکی از اصول پایهای سئوی داخلی (On-page SEO) محسوب میشود.
مثال بد ❌ و خوب ✅ از نوع استفاده انکر تکست در تگ a:
<!-- ❌ مبهم و بیارزش برای سئو -->
<a href="/hosting">اینجا کلیک کنید</a>
<!-- ✅ توصیفی و ارزشمند برای سئو -->
<a href="/hosting">خرید هاست لینوکس وبداده</a>طبق راهنمای رسمی گوگل، متن لنگر باید بهوضوح مقصد لینک را مشخص کند. مستندات MDN نیز تأکید میکند:
محتوای داخل هر تگ <a> باید مقصد لینک را حتی بدون خواندن متن اطراف، مشخص کند.
استفاده از عبارات مبهم مثل «اینجا کلیک کنید» نهتنها برای سئو مضر است؛ بلکه برای کاربران صفحهخوان (Screen Reader) هم مشکلساز میشود.
صفتهای (Attribute) مهم تگ a در HTML
تگ a علاوه بر href صفتهای دیگری هم دارد که رفتار لینک را کنترل میکنند. شناخت این صفتها برای هر وبمستر و متخصص سئو ضروری است.
صفت target: کنترل نحوه باز شدن لینک
صفت target تعیین میکند که صفحه مقصد در کجا باز شود. دو مقدار پرکاربرد آن عبارتاند از:
_self(پیشفرض): لینک در همان تب فعلی باز میشود_blank: لینک در تب جدید باز میشود
<!-- باز شدن در تب جدید -->
<a href="https://webdade.com" target="_blank">مشاهده سایت وبداده</a>⚠️ هشدار امنیتی: وقتی از
target="_blank" استفاده میکنید، حتماً باید rel="noopener noreferrer" را هم اضافه کنید. در غیر اینصورت، صفحه مقصد میتواند از طریق شیء window.opener به صفحه اصلی شما دسترسی پیدا کند و حتی محتوای آن را تغییر دهد. این آسیبپذیری به نام Reverse Tabnabbing شناخته میشود.<!-- ✅ روش امن و استاندارد -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">لینک امن</a>صفت rel: تنظیم رابطه لینک در تگ a
صفت rel رابطه بین صفحه فعلی و صفحه مقصد را مشخص میکند. این صفت نقش حیاتی در آموزش صفتهای تگ a برای سئو ایفا میکند و مقادیر مهم آن عبارتاند از:
| مقدار | عملکرد | تأثیر بر سئو |
|---|---|---|
nofollow | به گوگل میگوید لینک را دنبال نکند | از انتقال اعتبار (Link Juice) جلوگیری میکند |
noopener | اتصال بین تب قدیم و جدید را قطع میکند | تأثیر مستقیمی ندارد (امنیتی است) |
noreferrer | اطلاعات ارجاعدهنده را مخفی میکند | تأثیر مستقیمی ندارد (حریم خصوصی) |
sponsored | لینک حاصل از تبلیغات پولی | سیگنال به گوگل برای لینکهای تبلیغاتی |
ugc | محتوای تولیدشده توسط کاربر | مناسب برای لینکهای بخش نظرات |
📌 نکته مهم: از مارس 2020، گوگل مقادیر nofollow، sponsored و ugc را بهعنوان «راهنما» (Hint) در نظر میگیرد، نه یک دستور قطعی. یعنی ممکن است گوگل در برخی موارد تصمیم بگیرد لینک nofollow را هم دنبال کند.
صفت title و download در تگ a
صفت title یک متن راهنما (Tooltip) به لینک اضافه میکند که با نگه داشتن ماوس روی لینک نمایش داده میشود. اگرچه تأثیر مستقیمی روی سئو ندارد، اما تجربه کاربری را بهبود میبخشد.
صفت download هم به مرورگر میگوید بهجای باز کردن فایل، آن را دانلود کند:
<a href="/files/guide.pdf" download="webdade-guide">دانلود راهنمای PDF</a>نحوه ایجاد لینک داخلی و خارجی در HTML
لینکسازی در وب به دو دسته اصلی تقسیم میشود: لینکهای داخلی و لینکهای خارجی. درک تفاوت این دو و نحوه صحیح پیادهسازی آنها، یکی از مهارتهای کلیدی هر وبمستر است. در ادامه هر یک را برای شما توضیح داده ایم.
لینک داخلی (Internal Link)
لینک داخلی، لینکی است که از یک صفحه سایت شما به صفحه دیگری در همان سایت اشاره میکند. این لینکها مثل جادههای داخل یک شهر عمل میکنند و به رباتهای گوگل کمک میکنند تمام صفحات سایت شما را پیدا و ایندکس کنند.
<!-- لینک داخلی با URL نسبی -->
<a href="/blog/what-is-vps">آموزش سرور مجازی</a>
<!-- لینک داخلی با لنگر صفحه -->
<a href="#faq-section">مشاهده سوالات متداول</a>🔶 ارتباط با هاستینگ: وقتی لینکهای داخلی سایت شما ساختار منظمی داشته باشند، رباتهای گوگل راحتتر و سریعتر صفحات جدید را روی سرور شما پیدا و ایندکس میکنند. اگر سایتتان روی یک هاست سریع مثل سرورهای وبداده میزبانی شده باشد، این ترکیب (لینکسازی صحیح + سرعت سرور) میتواند زمان ایندکس شدن صفحات جدید را بهطور چشمگیری کاهش دهد.
لینک خارجی (External Link)
لینک خارجی، لینکی است که به دامنه دیگری اشاره میکند. این لینکها مثل پلهای بین شهری هستند و هم به اعتبار صفحه مقصد کمک میکنند و هم نشاندهنده جامع بودن محتوای شما هستند.
<!-- لینک خارجی با تنظیمات امنیتی -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
مستندات MDN
</a>نمودار خلاصه لینکسازی داخلی و خارجی:
سایت شما (webdade.com)
├── 🔗 لینک داخلی → /blog/ssl-certificate (همان سایت)
├── 🔗 لینک داخلی → /hosting/linux (همان سایت)
├── 🔗 لینک خارجی → developer.mozilla.org (سایت دیگر)
└── 🔗 لینک لنگری → #faq-section (همان صفحه)
تفاوت تگ a و link در HTML
یکی از سوالاتی که برنامهنویسان تازهکار زیاد میپرسند این است: «فرق تگ <a> و تگ <link> چیست؟» این دو تگ اگرچه هر دو با مفهوم «لینک» سر و کار دارند، اما کاملاً متفاوت هستند.
| ویژگی | تگ <a> | تگ <link> |
|---|---|---|
| محل استفاده | بدنه صفحه (<body>) | سربرگ صفحه (<head>) |
| عملکرد | ساخت لینک کلیکخور برای کاربر | اتصال منابع خارجی به صفحه |
| نمایش در صفحه | ✅ بله (قابل مشاهده و کلیک) | ❌ خیر (نامرئی) |
| کاربرد رایج | ناوبری، لینکسازی داخلی/خارجی | لود CSS، فونت، آیکون سایت |
| نیاز به تگ بسته | ✅ بله (</a>) | ❌ خیر (Self-closing) |
مثال: با یک مثال فرق تگ a و link را بهتر متوجه خواهید شد.
<!-- تگ a: لینک قابل کلیک در صفحه -->
<a href="/about">درباره ما</a>
<!-- تگ link: اتصال فایل CSS (در head) -->
<link rel="stylesheet" href="style.css">به زبان ساده: تگ <a> برای کاربران است (لینکهایی که کلیک میکنند)، ولی تگ <link> برای مرورگر است (منابعی که باید بارگذاری شوند).
کاربرد صفتهای تگ a برای سئو
حالا که با ساختار تگ a آشنا شدید، وقت آن است که ببینیم چطور میتوان از این تگ به بهترین شکل برای بهبود سئوی سایت استفاده کرد. در این بخش همراه ما باشید تا به صورت عملی و کاربردی، اصول سئوی لینکسازی را مرور کنیم.
اصول طلایی سئوی لینکسازی با تگ a
1- انکر تکست توصیفی و طبیعی بنویسید.
انکر تکست باید دقیقاً مشخص کند صفحه مقصد درباره چه موضوعی است. از پر کردن بیش از حد کلمه کلیدی (Keyword Stuffing) در انکر تکست خودداری کنید؛ گوگل این کار را جریمه میکند.
2- از nofollow هوشمندانه استفاده کنید.
لینکهای تبلیغاتی و پولی حتماً باید rel="sponsored" داشته باشند. لینکهای بخش نظرات کاربران هم بهتر است rel="ugc" بگیرند. برای لینکهای عادی به سایتهای معتبر، نیازی به nofollow نیست.
3- لینکهای خارجی با target="_blank" را ایمن کنید.
همیشه rel="noopener noreferrer" را به لینکهایی که در تب جدید باز میشوند اضافه کنید.
4- از لینکهای شکسته پرهیز کنید.
لینکهای 404 هم تجربه کاربری را خراب میکنند و هم به سئو آسیب میزنند. بهصورت دورهای لینکهای سایت خود را بررسی کنید.
📌 یادآوری: تأثیر لینکسازی صحیح داخلی بر سرعت ایندکس صفحات جدید، بهخصوص وقتی سایت شما روی سرورهای پرسرعت میزبانی شده باشد، بسیار چشمگیر است.
اشتباهات رایج در استفاده از تگ a
حتی توسعهدهندگان باتجربه هم گاهی در استفاده از ساخت لینک در HTML اشتباهاتی مرتکب میشوند. در اینجا رایجترین خطاها را بررسی میکنیم:
❌ استفاده از تگ <a> بهعنوان دکمه: اگر عنصری قرار نیست به جایی لینک بدهد و فقط یک عمل JavaScript انجام میدهد، بهجای <a href="#"> از <button> استفاده کنید. استفاده از تگ a بهجای دکمه باعث رفتارهای غیرمنتظره در بوکمارک کردن، باز کردن در تب جدید و حالت JavaScript غیرفعال میشود.
❌ انکر تکست مبهم: «اینجا کلیک کنید»، «بیشتر بخوانید»، «این لینک»، همه اینها برای سئو و دسترسیپذیری مشکلساز هستند.
❌ فراموش کردن rel="noopener" با target="_blank": این یک آسیبپذیری امنیتی جدی ایجاد میکند.
❌ لینکسازی بیش از حد: پر کردن یک پاراگراف از لینکهای داخلی، نهتنها کمکی نمیکند؛ بلکه ممکن است توسط گوگل بهعنوان اسپم تلقی شود.
❌ عدم بررسی لینکهای شکسته: لینکهایی که به صفحات 404 ختم میشوند، اعتبار سایت شما را کاهش میدهند.
البته لینکسازی صحیح فقط نیمی از ماجراست. نیمه دیگر، زیرساخت سروری است که سایت شما روی آن اجرا میشود. سرعت بارگذاری صفحات مستقیماً بر نرخ خزش (Crawl Rate) گوگل تأثیر دارد؛ یعنی هرچه سرور شما سریعتر پاسخ بدهد، گوگل صفحات بیشتری از سایت شما را در زمان کمتری ایندکس میکند.
سرور مجازی وب دادهVPS وب داده با حضور قدرتمند در بیش از 9 لوکیشن استراتژیک در سراسر جهان…
برای مشاهده موقعیتهای
سرور های مجازی وبداده
روی دکمه زیر کلیک کنید
سرور های مجازی وبداده
روی دکمه زیر کلیک کنید
نتیجهگیری: آشنایی با تگ a در HTML
در این مقاله از بلاگ وبداده، تگ a در HTML را از صفر تا صد با هم مرور کردیم. دیدیم که این تگ کوچک، ستون اصلی ارتباطات در وب است و استفاده صحیح از آن میتواند تأثیر مستقیمی بر سئو، امنیت و تجربه کاربری سایت شما داشته باشد.
از ویژگی href و انواع مقادیر آن گرفته تا نقش انکر تکست در سئو، تفاوت nofollow و noreferrer، اصول ایمنسازی لینکها و نحوه ایجاد لینک داخلی و خارجی در HTML؛ تمام نکاتی که یک وبمستر یا برنامهنویس نیاز دارد را پوشش دادیم.
فراموش نکنید که لینکسازی فقط بخشی از داستان است. زیرساخت سروری قوی و سریع، مکمل ضروری استراتژی لینکسازی شماست. ترکیب لینکهای داخلی منظم با هاست یا سرور پرسرعت، بهترین نتیجه را در ایندکس شدن و رتبهبندی صفحات برای شما به ارمغان میآورد.
در صورتی که سوالی داشتید، میتوانید در بخش افزودن دیدگاه با ما در ارتباط باشید. امیدوارم این مقاله از بلاگ وبداده برای شما مفید بوده باشد. 🙌
سوالات متداول درباره ساخت لینک در HTML
تگ a در HTML دقیقاً چه کاربردی دارد؟
تگ <a> عنصری است که پیوند (لینک) قابل کلیک ایجاد میکند. با کمک صفت href، مقصد لینک تعیین میشود و کاربر با کلیک به آن مقصد هدایت میشود. مقصد میتواند یک صفحه وب، فایل، آدرس ایمیل یا بخش خاصی از همان صفحه باشد.
آیا ویژگی href در HTML الزامی است؟
آیا میتوان تصویر را بهجای متن در تگ a قرار داد؟
