لینک چیست؟ لینک سازی برای وب سایت چه اهمیتی دارد؟ با چه روشهایی میتوانیم در HTML لینک سازی کنیم؟ لینک سازی در سئو وب سایت ما نتیجه مثبتی دارد؟ بهترین روش لینک سازی چیست؟ آیا مدلهای مختلفی از لینکها وجود دارد؟ پیوند چیست؟ برای دریافت پاسخ این سوالات و همچنین آشنایی اولیه با روشهای لینک سازی این مقاله را دنبال کنید. در این مقاله قصد داریم به صورت کامل با لینک آشنا شویم و روش های لینکسازی را مورد بررسی قرار دهیم.
پادکست این مقاله:
سرفصلهای پست
لینک چیست
بگذارید مقاله را با یک داستان کوچک شروع کنم. در زندگی روزمره ما برای تهیه یک نوشیدنی شیر موز ?? (دقیقا به این صورت ?) ابتدا از خانه خارج میشویم و باید از دوتا مغازه یکی هایپرمارکت و یکی میوهفروشی خرید کنیم.
پس داستان ما به دو قسمت تبدیل میشود، قسمت اول زمانی که برای خرید شیر وارد هایپرمارکت میشویم و قسمت دوم زمانی که برای خرید موز به میوه فروشی میرویم.
قسمت اول : هایپرمارکت (سناریو قفسه لبنیات)
برای خرید شیر ? وارد هایپرمارکت میشویم و از یک کارمند هایپرمارکت در مورد جایگاه قرارگیری شیر میپرسیم و او به قفسهای که برچسب لبنیات دارد، اشاره میکند.
در قفسه لبنیات، شیر را بر میداریم، دوباره از کارمند هایپرمارکت در مورد پرداخت هزینه شیر سوال میپرسیم و او به صندوق اشاره میکند، به صندوق مراجعه میکنیم و پرداخت را انجام میدهیم.
قسمت دوم : میوه فروشی (سناریو آدرس میوه فروشی)
حال شیر را از هایپرمارکت خریداری کردهایم و حالا زمان خرید موز ? است. هنگام خروج از هایپرمارکت از فردی که جلوی در ایستاده است آدرس میوه فروشی را میپرسیم و او به مغازه رو به رو هایپرمارکت اشاره میکند و موزِ شیر موز ما هم خریداری میشه و میریم خونه تا یک نوشیدنی پرووووووووو داشته باشیم. در ادامه با تعریف معنی لینک یا پیوند چیست به صورت کامل آشنا میشیم.
اصل ماجرای لینک سازی
سناریو داستانیای که نوشتم تماماً برای آشنایی شما با لینکسازی بود. معنای لینک یعنی چی ؟ به طور کلی به ایجاد بستری برای ارجاع کاربران از صفحهای به صفحهای دیگر لینک سازی گویند یا به تعریف W3Schools به بخشی از سند که وقتی روی آن بخش نگاه میداریم علامت موس به علامت دستی کوچک تبدیل میشود و با کلیک بر روی آن به سندی دیگر منتقل میشویم لینک میگویند. که در سناریو داستانی ما پرسش و پاسخ و ارجاع ما به پاسخها نشان دهندهی این تعریف بود.
در قسمت اول سناریو که قفسه لبنیات مطرح شد، با پرسش ما از کارمند او به یک برچسب داخل فروشگاه اشاره کرد، در دنیای وب به ارجاع دادن کاربران از یک صفحه به یک صفحه داخلی دیگر لینک سازی داخلی میگوییم.
در قسمت دوم سناریو هم که از فردی در رابطه با میوه فروشی پرسیدیم و او به مغازه رو به رو اشاره کرد، یک لینک سازی خارجی اتفاق افتاد که شما را از هایپرمارکت به مغازهای خارج از این هایپرمارکت انتقال میداد.
پس به طور کلی به ارجاع دادن کاربران از یک صفحه به صفحهای خارج از وب سایتمان لینک سازی خارجی میگوییم.
روشهای لینک سازی در HTML
در HTML روشهای مختلفی برای لینک سازی وجود دارد که در این مقاله قصد داریم تا با آنها آشنا شویم.
پرکاربرد ترین روش : استفاده از تگ a
تگ a با استفاده از عنصر href
یکی از بهترین و پرکاربردترین روشها برای لینک سازی در HTML میباشد. (البته از حق هم نگذریم که تنها راه مورد قبول HTML5 برای لینک سازی همین استفاده از تگ a با عنصر href است.)
<a href=”https://mizfa.com”> Title link </a>
در کد بالا با قرار دادن آدرس صفحه مورد نظر در عنصر href
شما میتوانید برای یک متن یا تصویر لینک سازی کنید.
البته عناصر دیگری نیز در تگ a وجود دارند که باعث میشوند لینک ما معنا و مفهوم بهتری داشته باشد و در سئو تاثیرگذاری مثبتی داشته باشد.
در رابطه با این عناصر و به طور کلی این تگ میتوانید مقاله آموزشی مربوط به تگ a در HTML را مطالعه نمایید.
اگر بخشی از مثال های موجود در آموزش رایگان HTML را متوجه نشدید، حتما در بخش نظرات بهمون بگید تا بیشتر راهنماییتون کنیم.
استفاده از جاوا اسکریپت در لینک سازی
درصورتی که از تگهایی مثل button
یا استایلهایی که خاصیت button
را به کدهای شما اضافه میکند، استفاده میکنید.
ممکن است تگ a برای لینک گذاری عمل نکند و در لینک سازی به مشکل بخورید. در چنین مواقعی جاوا اسکریپت به کمک شما میآید.
<button id="mizfa" > Title Link</button> <script type="text/javascript"> document.getElementById("mizfa").onclick = function () { location.href = "https://mizfa.com"; }; </script>
در کد بالا در جایی که آدرس وب سایتمون رو نوشتیم ( https://mizfa.com ) و با دابل کوتیشن مشخص کردم شما میتوانید با جایگزینی لینک خود، عمل لینک گذاری را انجام دهید.
<button onclick="window.location.href='https://mizfa.com'">Click me</button>
نحوه کد نویسی متد onclick
در جاوا اسکریپت مدل های مختلفی دارد که میتوانید در مباحث آموزشی جاوا اسکریپت میزفا در این رابطه بیشتر بخوانید.
پایانترم
[box type=”info” class=”question-from-users” width=””]سوال:
فرق بین تگ a و تگ link چیه؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبتنام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجهگیری
با شیر موز ، ببخشید با لینک سازی شروع کردیم و با روشهای لینک سازی در HTML آشنا شدیم.
اگر در مورد لینکها و لینک سازی اطلاعات بیشتری لازم داشتید میتوانید از بخش برچسبها با انتخاب یکی از برچسبهای موجود، به مقالات بیشتری دسترسی پیدا کنید. حال شاید بگویید بک لینک چیست؟ بک لینک هم یک نوع لینک است ولی اصولا به لینک هایی گفته میشود که خارج از سایت من است. اگر بگوییم سایت x من ۱۰۰ بک لینک دارد یعنی ۱۰۰ لینک در داخل سایتهای دیگر برای سایت من ساخته شده است.
اگر شما هم روش دیگری جز روشهای بیان شده بلدید، برامون کامنت بزارید تا با بقیه به اشتراک بزاریم.
و اگر مقاله براتون مفید بود و لینک سازیها رو کامل یاد گرفتید، با نوشیدن یک لیوان شیر موز از خودتون پذیرایی کنید.
تا مقالهی بعد، شاد باشید…
14 پاسخ
جواب سوال:
تگ link برای مشخص کردن ارتباط بین سند فعلی با یه منبع دیگه که میتونه فایل کدهای css باشه ، به کار میره و به تنهایی و بدون تگ پایانی به کار برده میشه اما تگ a برای تعریف یک هایپرلینک جهت لینک شدن به یه صفحه یا هر جای دیگه به کار برده میشه و تگ پایانی هم داره
درستهههه ممنونم امیر بابت تعامل
اول سپاسگزارم بابت مقاله خوبتون 🙂
دوم اینکه جواب سوال میشه اینکه از تگ a در body استفاده میکنیم اما از تگ link در head استفاده میشه. لذا تگ a کانتنت دارد.
درود بر شما
امتیاز به شما داده شد.
تگ لینک رو در head مینویسیم
که بدرد ارتباط بین سند های css و همینطور ازش در گذاشتن آیکون در کنار تایتل سایت هم استفاده میشه
ولی تگ a برای ساخت لینک های داخلی (internal links) یا خارجی (external links ) استفاده میشه!
میزفا دمت گرم!!! میخوام طراح بشم!!?
سلام فرهان. آفرین دقیقا. هرچند که هدیه اصلیت رو خودت با تلاش و کوششت بهت میدی ولی به زودی ما هم اکانت میزفا آکادمیت رو شارژ میکنیم که توی مسیری که قرار گرفتی، با انرژی بیشتری حرکت کنی.
تگ link که در head نوشته میشود برای ارتباط سند هایی مثل cssو… استفاده میشود
تگ a در body نوشته میشود و هم برای پیوند های خارجی و داخلی استفاده میشود
سلام علی اکبر دقیقا درسته. آفرین. جایزهات را به زودی میگیری. ماشالا این ۲۵ امین جواب درستته.
پاسخ سوال :
تگ link برای یه لینکی خارج از سایت یا صفحه مورنظر اشاره میکنه مثلا برای اطلاعات بیشتر به لینک … مراجعه کنید. ولی تگ a میتونه هم لینک داخلی هم خارجی باشه
تفاوت دیگه : a در قسمت body نوشته میشه ولی تگ link در head میاد
سلام محمد، متاسفانه جوابت برای بخش تگ link اشتباهه. لطفا بیشتر دقت کن.
سلام سلام میزفای عزیززز
و یه سلام و درود مخصوص به استادهای خوب میزفا مخصوصا استاد اسماعیلی عزیز
از صبح امروز که بیکار بودم دارم تو سایت خوبتون میچرخم و یاد میگیرم و کیف میکنم با آموزشهای خوبتون
واقعا خسته نباشید
از همه بیشتر واقعا ممنونم که برای سوالاتم وقت میذارید و کامل و شفاف بهم پاسخ میدید
واقعا ازتون سپاسگذارم
الانم پیام دادم که سوالی که در پایان این بخش پرسیدید رو پاسخ بدم 😀
فرق بین تگ Link و تگ
a
:تگ
a
در قسمت body نوشته میشه در حالی که تگ link در قسمت head نوشته میشهتگ
a
هم میتونه لینک داخلی باشه هم خارجی ولی تگ کلا برای این استفاده میشه تا یه سورس از خارج رو به page الصاق کنه مثلا بگیم که از این فایل هم در صفحه استفاده کن و یه جورایی شبیه attach کردن یه فایل به ایمیل عمل میکنه مخصوصا برای این استفاده میشه که یه فایل css رو به page مورد نظرمون الصاق کنیمدرست یاد گرفتم استاد؟! 🙂
بازم تفاوت دارن یا کامل گفتم؟
سلام مونای عزیز و ممنون از لطف بسیاری که به تیم میزفا و شخص من دارید.
البته واژه استاد کمی برای من بزرگه و کاش مثل دوتا دوست که داریم به همدیگه کمک میکنیم برای پیشرفت به یکدیگر نگاه کنیم !!
ممنون از توضیحات خوب و کاملتون امیدوارم که این مسیر را ادامه بدید و اگر سوالی داشتین باز هم بپرسین. اگر در میزفا آکادمی اکانت داشته باشین، هدیه میزفا به زودی به اکانتتون اضافه میشه.
موفق باشید.
بسیار مفید بود .ممنونم
خواهش میکنم مجید جان