آشنایی با لینک و بهترین روش‌های لینک سازی

لینک چیست؟ لینک سازی برای وب سایت چه اهمیتی دارد؟ با چه روش‌هایی می‌توانیم در HTML لینک سازی کنیم؟ لینک سازی در سئو وب سایت ما نتیجه مثبتی دارد؟ بهترین روش لینک سازی چیست؟‌ آیا مدل‌های مختلفی از لینک‌ها وجود دارد؟ برای دریافت پاسخ این سوالات و همچنین آشنایی اولیه با روش‌های لینک سازی این مقاله را دنبال کنید. در این مقاله قصد داریم به صورت کامل با لینک آشنا شویم و روش های لینک‌سازی را مورد بررسی قرار دهیم.

• 1 لینک چیست
  • 1.1 قسمت اول : هایپرمارکت (سناریو قفسه لبنیات)
  • 1.2 قسمت دوم : میوه فروشی (سناریو آدرس میوه فروشی)
  • 1.3 اصل ماجرای لینک سازی
• 2 روش‌های لینک سازی در HTML
  • 2.1 پرکاربرد ترین روش : استفاده از تگ a
  • 2.2 استفاده از جاوا اسکریپت در لینک سازی

لینک چیست؟

بگذارید مقاله را با یک داستان کوچک شروع کنم. در زندگی روزمره ما برای تهیه یک نوشیدنی شیر موز !! (دقیقا به این صورت !) ابتدا از خانه خارج می‌شویم و باید از دوتا مغازه یکی هایپرمارکت و یکی میوه‌فروشی خرید کنیم.

پس داستان ما به دو قسمت تبدیل می‌شود، قسمت اول زمانی که برای خرید شیر وارد هایپر‌مارکت می‌شویم و قسمت دوم زمانی که برای خرید موز به میوه فروشی می‌رویم.

قسمت اول : هایپرمارکت (سناریو قفسه لبنیات)

برای خرید شیر  وارد هایپرمارکت می‌شویم و از یک کارمند هایپرمارکت در مورد جایگاه قرارگیری شیر می‌پرسیم و او به قفسه‌ای که برچسب لبنیات دارد، اشاره می‌کند.

در قفسه لبنیات، شیر را بر می‌داریم، دوباره از کارمند هایپرمارکت در مورد پرداخت هزینه شیر سوال می‌پرسیم و او به صندوق اشاره می‌کند، به صندوق مراجعه می‌کنیم و پرداخت را انجام می‌دهیم.

قسمت دوم : میوه فروشی (سناریو آدرس میوه فروشی)

حال شیر را از هایپرمارکت خریداری کرده‌ایم و حالا زمان خرید موز  است. هنگام خروج از هایپرمارکت از فردی که جلوی در ایستاده است آدرس میوه فروشی را می‌پرسیم و او به مغازه رو به رو هایپرمارکت اشاره می‌کند و موزِ شیر موز ما هم خریداری میشه و میریم خونه تا یک نوشیدنی  داشته باشیم. در ادامه با تعریف معنی لینک یا پیوند چیست به صورت کامل آشنا میشیم.

اصل ماجرای لینک سازی

سناریو داستانی‌ای که نوشتم تماماً برای آشنایی شما با لینک‌سازی بود. معنای لینک یعنی چی ؟ به طور کلی به ایجاد بستری برای ارجاع کاربران از صفحه‌ای به صفحه‌ای دیگر لینک سازی گویند یا به تعریف W3Schools به بخشی از سند که وقتی روی آن‌ بخش نگاه می‌داریم علامت موس به علامت دستی کوچک تبدیل می‌شود و با کلیک بر روی آن به سندی دیگر منتقل می‌شویم لینک می‌گویند. که در سناریو داستانی‌ ما پرسش و پاسخ و ارجاع ما به پاسخ‌ها نشان دهنده‌ی این تعریف بود.

در قسمت اول سناریو که قفسه لبنیات مطرح شد، با پرسش ما از کارمند او به یک برچسب داخل فروشگاه اشاره کرد، در دنیای وب به ارجاع دادن کاربران از یک صفحه به یک صفحه داخلی دیگر لینک سازی داخلی می‌گوییم.

در قسمت دوم سناریو هم که از فردی در رابطه با میوه فروشی پرسیدیم و او به مغازه رو به رو اشاره کرد، یک لینک سازی خارجی اتفاق افتاد که شما را از هایپرمارکت به مغازه‌ای خارج از این هایپرمارکت انتقال می‌داد.

پس به طور کلی به ارجاع دادن کاربران از یک صفحه به صفحه‌ای خارج از وب سایتمان لینک سازی خارجی می‌گوییم.

روش‌های لینک سازی در HTML

در HTML روش‌های مختلفی برای لینک سازی وجود دارد که در این مقاله قصد داریم تا با آن‌ها آشنا شویم.

پرکاربرد ترین روش : استفاده از تگ a

تگ a با استفاده از عنصر href یکی از بهترین و پرکاربردترین روش‌ها برای لینک سازی در HTML می‌باشد. (البته از حق هم نگذریم که تنها راه مورد قبول HTML5 برای لینک سازی همین استفاده از تگ a با عنصر href است.)

<a href=”https://FARAZNETWORK.com”> Title link </a>

در کد بالا با قرار دادن آدرس صفحه مورد نظر در عنصر hrefشما می‌توانید برای یک متن یا تصویر لینک سازی کنید.

البته عناصر دیگری نیز در تگ a وجود دارند که باعث می‌شوند لینک ما معنا و مفهوم بهتری داشته باشد و در سئو تاثیر‌گذاری مثبتی داشته باشد.

در رابطه با این عناصر و به طور کلی این تگ می‌توانید مقاله آموزشی مربوط به تگ a‌ در HTML را مطالعه نمایید.

استفاده از جاوا اسکریپت در لینک سازی

درصورتی که از تگ‌هایی مثل button یا استایل‌هایی که خاصیت button‌را به کدهای شما اضافه می‌کند، استفاده می‌کنید.

ممکن است تگ a برای لینک گذاری عمل نکند و در لینک سازی به مشکل بخورید. در چنین مواقعی جاوا اسکریپت به کمک شما می‌آید.

<button id="faraznetwork" > Title Link</button>

<script type="text/javascript">
    document.getElementById("faraznetwork").onclick = function () {
        location.href = "https://faraznetwork.com";
    };
</script>

در کد بالا در جایی که آدرس وب سایتمون رو نوشتیم ( https://faraznetwork.com ) و با دابل کوتیشن مشخص کردم شما می‌توانید با جایگزینی لینک خود، عمل لینک گذاری را انجام دهید.

<button onclick="window.location.href='https://FARAZNETWORK.com'">Click me</button>

تگ a در HTML

تگ a در HTML چیست و چه کاربردی دارد؟ معروف‌ترین و متداول‌ترین روش لینک دهی در HTML چیست؟ تغییر رنگ “تگ a” به چه صورت است و چگونه می‌توانیم تگ a را استایل دهی کنیم؟ اگر به دنبال پاسخ این سوالات هستید و قصد دارید با خصوصیات یا صفات تگ a در html و کاربرد تگ a در html به صورت جامع و به همراه مثال آشنا شوید این مقاله را به هیچ عنوان از دست ندهید. هم چنین در این مقاله 13 صفت (یا همان ویژگی به انگلیسی attribute گفته می‌شود) پرکاربرد تگ a را با هم بررسی خواهیم کرد.

• 1 معرفی تگ a
• 2 لینک کردن به سایر وبسایت ها
  • 2.1 لینک کردن به صفحات داخلی وبسایت
• 3 آدرس‌های وابسته
  • 3.1 انواع لینک وابسته
• 4 لینک ایمیل
• 5 بازکردن لینک ها در پنجره جدید
• 6 لینک به بخش خاصی از صفحه فعلی
• 7 لینک به بخشی از صفحه دیگر
• 8 صفات تگ a
  • 8.1 صفات عمومی
  • 8.2 صفات رویدادی

معرفی تگ a

در این مقاله قصد داریم تا شما را با تگ a آشنا کنیم. لینک‌ها با استفاده از تگ <a> ایجاد می شوند. کاربران می‌توانند بر روی هر چیزی که  بین این تگ <a> Text </a> قرار گرفته کلیک کنند. شما با استفاده از خاصیت href صفحه‌ای که قصد باز شدن آن را دارید را تعیین می‌کنید.
متنی که در بین تگ <a> قرار می‌گیرد به عنوان متن لینک شناخته می‌شود. تا جای ممکن به جای اکتفا کردن به متن “اینجا را کلیک کنید”، متن لینک باید برای بازدید کننده موضوع صفحه مقصد را توضیح دهد.
بسیاری از مخاطبان، وبسایت‌ها را برای پیدا کردن لینک‌ها از بین متن‌ها جستجو می‌کنند. متن link شفاف می‌تواند به مخاطبانتان کمک کند تا چیزی که نیاز دارند را پیدا کنند.

این مسئله به آن‌ها نگاه مثبت‌تری نسبت به وبسایت شما می‌دهد و تشویق می‌شوند تا مدت زمان بیشتری را در وبسایتتان سپری کنند.(همچنین به کسانی که از نرم افزار‌های صفحه‌خوان استفاده می‌کنند کمک خواهد کرد.)
برای نوشتن یک متن لینک خوب، می‌توانید به این فکر کنید که کاربران از چه کلماتی برای جستجوی صفحه ای که به آن لینک می‌کنید استفاده خواهند کرد. به عنوان مثال به جای استفاده از عبارت مکانی برای اقامت بهتر است از چیزی دقیق تر مانند هتل در تهران استفاده کنید.

لینک کردن به سایر وبسایت ها

همان طور که در ابتدا شرح داده شد از تگ <a> و خاصیت href برای ساخت پیوند استفاده می‌شود. مقدار خاصیت href در واقع آدرس صفحه‌ای است که می‌خواهید مخاطبان به آنجا منتقل شوند.
هنگامی که شما به یک صفحه از وبسایت دیگر لینک می‌کنید، مقدار href برابر با آدرس کامل وبسایت خواهد بود که به عنوان آدرس مطلق شناخته می‌شود.

لینک کردن به صفحات داخلی وبسایت

هنگامی که شما به صفحات داخل همان وبسایت لینک می‌کنید، نیاز نیست نام دامنه را در URL وارد کنید. شما می‌توانید از یک آدرس کوتاه تر که به عنوان آدرس وابسته شناخته می شود استفاده کنید.
اگر همه صفحه وبسایت در یک فولدر هستند، مقدار خاصیت href فقط نام فایل‌های صفحات خواهد بود.
اگر صفحات وبسایت در فولدر‌های جداگانه‌ای هستند، می‌توانید از روش پیچیده‌تری برای لینک‌دهی این صفحات در صفحات مرتبط استفاده کنید که در ادامه به آن اشاره خواهیم کرد.

<p>
<ul>
<li><a href="FARAZNETWORK">خانه</a></li>
<li><a href="about-us.html">درباره ما</a></li>
<li><a href="seo.html">سـئو</a></li>
<li><a href="contact-us.html">تماس با ما</a></li>
</ul>
</p>

آدرس‌های وابسته

آدرس‌های وابسته زمانی قابل استفاده هستند که شما قصد ایجاد پیوند به صفحات وبسایت در داخل وبسایت را دارید. در این نوع لینک‌گذاری نیاز نیست نام دامنه را وارد کنید. آدرس‌های وابسته یک روش کوتاه برای اعلام محل فایل‌ها به مرورگر است تا مرورگر بداند که لینک به صفحه فعلی مرتبط است.
همچنین استفاده از آدرس‌های وابسته زمانی مفید است که شما در حال ساخت یک وبسایت جدید یا یادگیری HTML هستید. زیرا می‌توانید لینک‌های بین صفحات را حتی زمانی که بر روی کامپیوتر هستند ایجاد کنید. از آنجایی که نیاز نیست برای هر لینک نام دامنه را تایپ کنید، بنابراین نوشتن آن ها سریع‌تر هستند.

انواع لینک وابسته

به پوشه یکسان

برای لینک کردن فایل از صفحه‌ای که در همان فولدر قرار دارد کافیست نام فایل را بنویسید.

<a href="seo.html"> SEO </a>

پوشه زیر مجموعه

برای لینک‌کردن به نام یک فولدر زیر مجموعه، باید با اسلش نام فولدر نوشته شود.

<a href="seo/local.html"> Local SEO </a>

پوشه نوه

برای لینک دهی به یک پوشه که نوه فولدر فعلی است، باید مانند قسمت قبل با استفاده از اسلش از بیرونی‌ترین پوشه به سمت داخلی‌ترین فولدر آدرس‌دهی کنید.

<a href="seo/local/optimize.html"> Optimizing Website </a>

پوشه والدین

با استفاده از ../ می‌توان از بالاترین پوشه فعلی به صفحه مورد نظر لینک‌دهی کرد.

<a href="../local.html"> Local Seo </a>

پوشه والدین بزرگ

در این حالت شما قصد دارید به یک پوشه بالاتر از پوشه والدین لینک دهید برای این امر از ../../ استفاده کنید.

<a href="../../Optimize.html"> Optimizing Seo </a>

لینک ایمیل

برای ساخت یک لینک که برنامه ایمیل کاربر را اجرا می‌کند و به ایمیل خاصی اشاره می‌کند، می توانید از تگ <a> استفاده کنید. اما این بار مقدار خاصیت href با عبارت mailto: آغاز می‌شود و در ادامه آن ایمیلی که قصد ارسال پیام به آن را دارید نوشته می‌شود.
در ظاهر این لینک با یک لینک معمولی به یک صفحه هیچ تفاوتی ندارد اما هنگامی که کاربر روی آن کلیک می‌کند، برنامه مدیریت ایمیل کاربر باز می‌شود و یک صفحه ارسال ایمیل با آدرس تعیین شده به نمایش در خواهد آمد.

<a href="mailto:info@faraznetwork.com"> Email </a>

بازکردن لینک ها در پنجره جدید

اگر قصد دارید یک link را در صفحه جدید مرورگر باز کنید، باید از خاصیت target موجود در تگ <a> استفاده کنید. مقدار این خاصیت باید برابر با _blank باشد.
یکی از دلایل مهمی که صاحب وبسایت می‌خواهد لینک در صفحه جدیدی باز شوند این است که آن لینک به وبسایت دیگری اشاره می‌کند. در این حالت مدیر وبسایت امیدوار است کاربر بعد از بازدید از لینک و صفحه باز شده به صفحه مبدا بازگردد.

<a href="https://faraznetwork.com/blog" target="_blank">faraznetwork Blog </a>

لینک به بخش خاصی از صفحه فعلی

اگر در بالای یک صفحه طولانی قصد دارید از محتویات آن صفحه لینک‌هایی که به هر یک از بخش های صفحه اشاره دارند ایجاد کنید. یا ممکن است بخواهید در بخش پایین صفحه لینکی برای انتقال کاربر به بالای صفحه قرار دهید تا کاربر مجبور به اسکرول به بالا نباشد، باید از لینک داخل صفحه استفاده کنید.

مثال‌های بالا از مهم‌ترین نمونه های استفاده از این نوع لینک هستند. قبل از اینکه لینک‌بخشی از صفحه را ایجاد کنید، باید نقطه‌هایی که قصد انتقال کاربر به آن‌ها را دارید را مشخص کنید. با استفاده از خاصیت id هر یک از المان‌های html می‌توانید نقاط را تعیین کنید. به عنوان مثال با تعریف id برای تگ‌های <h> می‌توان این بخش ها را از یک دیگر جدا کرد.

مقدار خاصیت id باید با یک حرف یا آندراسکور آغاز شود(نه با عدد یا کاراکتر دیگر) و همچنین در یک صفحه نباید دو المان با id مشابه وجود داشته باشند.

برای لینک‌کردن به یک المان که از خاصیت  id استفاده می‌کند می‌بایست دوباره به سراغ تگ <a> برویم، این بار مقدار خاصیت href با علامت # آغاز می‌شود و سپس مقدار خاصیت id المان مورد نظر.

<h1 id="top"> Seo Terms </h1>
<a href="#local"> Local Seo </a> <br>
<a href="#external"> External Seo </a> <br>
<a href="#optimize"> Optimize Page </a> <br> <br>
<h2 id="local"> Local Seo </h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<h2 id="external"> External Seo </h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<h2 id="optimize"> Optimize Page </h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p> <a href="#top"> Top </a></p>

See the Pen A Tag in HTML by faraznetwork.COM (@faraznetwork) on CodePen.

لینک به بخشی از صفحه دیگر

اگر قصد دارید به بخش خاصی از یک صفحه دیگر لینک دهید، می توانید از تکنیک بالا استفاده کنید. به عبارتی تا زمانی که صفحات دیگر دارای المان‌هایی با خاصیت  id یکتا هستند می توانید با تکنیک بالا به بخشی از آن صفحه لینک دهید.

بدین منظور خاصیت href باید شامل آدرس صفحه(آدرس وابسته یا مطلق) و پس از آن علامت # و نام id تعیین شده در صفحه مقصد باشد.

<a href="../image.html/#local"> Local Seo </a>

صفات تگ a

تگ a دارای صفات مختلفی است که مهمترین آن صفت href‌ برای ایجاد پیوند و لینک است. البته فراموش نکنیم که مانند باقی تگ‌های HTML بعضی از صفات موجود در آخرین نسخه HTML‌ یعنی HTML5 پشتیبانی نمی‌شود.

در جدول زیر لیست صفت‌های تگ a را مشاهده می‌نمایید.

صفات عمومی

تگ <a> از صفات عمومی HTML پشتیبانی می‌کند.

صفات رویدادی

تگ <a> از صفات رویدادی پشتیبانی می‌کند.

ایجاد پیوند یا لینک یکی از مهمترین بخش‌های طراحی یک وب سایت است و شما با لینک‌دهی داخلی و خارجی مسیر کاربران را واضح‌تر می‌کنید.

مطالب مرتبط:

1-ساختار صفحات HTML

2- کار با لینک ها قسمت دوم 

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده: راحله تبریزی