mailto و tel: وقتی می‌خوای مستقیم به یه اپلیکیشن دیگه بری

تو درس ۴-۱ یه اشاره‌ی کوتاه به لینک‌های ایمیل و تلفن داشتیم. حالا وقتشه کامل بریم سراغشون، چون این دو نوع لینک یه رفتار متفاوت نسبت به لینک‌های معمولی دارن: به‌جای بردن کاربر به یه صفحه‌ی وب دیگه، یه اپلیکیشن دیگه‌ی روی سیستم یا موبایل کاربر رو باز می‌کنن.

لینک ایمیل با mailto

<a href="mailto:info@example.com">ارسال ایمیل به ما</a>

وقتی کاربر روی این لینک کلیک می‌کنه، به‌جای باز شدن یه صفحه‌ی وب جدید، برنامه‌ی پیش‌فرض ایمیل روی سیستمش (مثل Outlook، Apple Mail، یا Gmail از طریق مرورگر) باز می‌شه و آدرس گیرنده به‌صورت خودکار پر می‌شه.

اضافه‌کردن موضوع و متن پیش‌فرض

می‌شه با استفاده از پارامترهای اضافی، موضوع و حتی متن اولیه‌ی ایمیل رو هم از قبل پر کرد:

<a href="mailto:info@example.com?subject=درخواست همکاری&body=با سلام، من علاقه‌مند به همکاری با شما هستم.">
  ارسال درخواست همکاری
</a>

بیا این مقدار href رو بخش‌به‌بخش بررسی کنیم:

  • mailto:info@example.com: آدرس ایمیل گیرنده.
  • ?subject=درخواست همکاری: علامت سؤال شروع پارامترهای اضافیه، و subject موضوع ایمیل رو از قبل پر می‌کنه.
  • &body=...: علامت & برای اضافه‌کردن پارامتر دوم استفاده می‌شه، و body متن اولیه‌ی بدنه‌ی ایمیل رو مشخص می‌کنه.

نکته‌ی مهم اینه که چون این مقدار href داخل یه ویژگی HTML نوشته می‌شه، کاراکتر & باید به‌صورت &amp; نوشته بشه تا با قوانین نگارشی HTML تداخل نکنه (این نکته رو تو درس‌های آینده درباره‌ی کاراکترهای خاص HTML کامل‌تر توضیح می‌دیم).

ارسال به چند گیرنده هم‌زمان

<a href="mailto:info@example.com,support@example.com">
  ارسال ایمیل به تیم پشتیبانی
</a>

با جدا کردن چند آدرس ایمیل با کاما، می‌شه یه ایمیل رو هم‌زمان برای چند گیرنده آماده کرد.

لینک تلفن با tel

<a href="tel:+982112345678">تماس با دفتر مرکزی</a>

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

فرمت درست شماره تلفن در tel

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

<a href="tel:+982112345678">۰۲۱-۱۲۳۴۵۶۷۸</a>

تو این مثال، مقدار href با فرمت بین‌المللی نوشته شده (+98 کد ایران، بدون صفر ابتدایی شهر)، اما متنی که کاربر می‌بینه می‌تونه به فرمت آشناتر و محلی (با صفر ابتدایی) نمایش داده بشه؛ این دو تا لازم نیست عیناً یکی باشن، چون یکی برای نمایش بصریه و یکی برای عملکرد واقعی لینک.

چرا فرمت بین‌المللی بهتره؟

دلیل استفاده از فرمت بین‌المللی (با +98) اینه که این لینک ممکنه از هر جای دنیا کلیک بشه؛ اگه فقط شماره‌ی محلی (بدون کد کشور) بنویسی، ممکنه گوشی کاربری که خارج از ایرانه نتونه درست شماره رو تشخیص بده یا تماس رو برقرار کنه.

یه مثال ترکیبی از هر دو نوع لینک

<h2>راه‌های ارتباطی</h2>

<p>
  برای تماس تلفنی: 
  <a href="tel:+982188776655">۰۲۱-۸۸۷۷۶۶۵۵</a>
</p>

<p>
  برای ارسال ایمیل: 
  <a href="mailto:support@example.com?subject=درخواست پشتیبانی">
    support@example.com
  </a>
</p>

کاربرد مهم این لینک‌ها در موبایل

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

چند اشتباه رایج

  • ننوشتن کد کشور تو لینک‌های tel، که باعث می‌شه شماره برای کاربرهای خارج از کشور درست کار نکنه.
  • استفاده از فاصله یا خط تیره‌ی زیاد داخل مقدار href لینک tel (بهتره این کاراکترها فقط تو متن نمایشی باشن، نه تو خود href).
  • فراموش‌کردن اینکه href این لینک‌ها با mailto: یا tel: شروع بشه و اشتباهی فقط آدرس ایمیل یا شماره‌ی خام نوشته بشه.

بهترین روش‌ها

  • همیشه از فرمت بین‌المللی شماره (با کد کشور) تو مقدار href لینک‌های tel استفاده کن.
  • برای ایمیل‌های پشتیبانی یا فرم تماس، از پارامتر subject استفاده کن تا کار تیم پشتیبانی هم راحت‌تر بشه (مثلاً موضوع از قبل مشخص باشه).
  • متن نمایشی این لینک‌ها رو گویا بنویس (مثلاً خود شماره یا آدرس ایمیل رو نشون بده، نه فقط «کلیک کنید»).

نکته‌ی سئو

لینک‌های tel و mailto مستقیماً روی رتبه‌بندی سئو تأثیر چندانی ندارند، اما وجود اطلاعات تماس واضح و قابل‌کلیک در صفحات (مخصوصاً صفحه‌ی تماس با ما) می‌تواند به اعتبار و اعتمادسازی سایت نزد کاربر و به‌طور غیرمستقیم نزد گوگل کمک کند.

نکته‌ی دسترسی‌پذیری

لینک‌های tel به‌خصوص برای کاربرانی که از صفحه‌خوان یا دستگاه‌های کمکی استفاده می‌کنند مفیدند، چون دیگر لازم نیست شماره را به‌صورت دستی تایپ کنند؛ کافی است لینک را فعال کنند تا تماس مستقیماً آغاز شود.

جمع‌بندی

لینک‌های mailto و tel به کاربر امکان می‌دهند مستقیماً از طریق یک لینک ساده، برنامه‌ی ایمیل یا تماس تلفنی خود را باز کنند. استفاده از پارامترهای اضافی مثل subject و body در mailto، و فرمت بین‌المللی شماره در tel، این لینک‌ها را کاربردی‌تر و قابل‌اعتمادتر می‌کند.