بلاگ
دسامبر 29
html در سئو

استفاده از HTML برای سئو

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

HTML چیست؟

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

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

عناصر ساختاری HTML

کد HTML از عناصری ساخته شده که در دو دسته‌بندی تگ و متاتگ جا می‌گیرند. این تگ‌ها یا متاتگ‌ها، گاهی ویژگی‌های خاصی دارند که به آن‌ها attribute یا مشخصه‌ گفته می‌شود. عناصر  HTML بخش‌بندی‌هایی دارند که به آن‌ها node گفته می‌شود و تگ‌ها و متاتگ‌ها در آن جا می‌گیرند. این عناصر به کدها کمک می‌کنند تا مفاهیم و فرمت‌های خاصی را منتقل کنند. در ساده‌ترین حالت، یک کد HTML به شکل زیر است:

یک کد HTML به این شکل استآنچه در تصویر مشاهده می‌کنید، هدر (header) یا عنوان صفحه است که به آن تگ H1 گفته می‌شود. این تگ با <h1> آغاز و با </h1> به پایان می‌رسد. در تگ آغازین، برای این کد یک مشخصه یا attribute تعریف شده است. براساس این مشخصه، عنوان چپ‌چین می‌شود. احتمالاً با این مثال متوجه مفهوم تگ شده‌اید. H1 یکی از چندین تگ HTML است. این تگ‌ها ممکن است مانند h1 شروع و پایان داشته باشند یا به تنهایی استفاده شوند. همۀ تگ‌های HTML چیزی به کاربر نشان می‌دهند، یعنی بخشی از طراحی صفحه هستند.

برخلاف تگ‌ها، متاتگ‌ها قرار است اطلاعات تکمیلی درباره صفحۀ شما بدهند و مخاطبانشان نه کاربران صفحه، که ربات‌های موتورهای جستجو هستند. اطلاعاتی که در متاتگ‌ها مطرح می‌شوند شامل مواردی مانند توصیف صفحه، کلمات کلیدی، کدگذاری‌ها و قوانین ایندکس شدن صفحه است. تمام متاتگ‌ها در بخش <head>  صفحه قرار می‌گیرند.

مشخصه‌ها هم اطلاعات اضافی یا جزئیات بیشتر درباره تگ‌ها یا متاتگ‌ها هستند. اگر نگاهی تکنیکی‌تر به آن‌ها داشته باشیم، مشخصه‌ها در واقع کلمات خاصی هستند که به تگ‌ها کمک می‌کنند رفتار عناصر صفحه را کنترل کنند. مثلاً اگر از تگ تصویر استفاده کنید، مشخصۀ alt آن تعیین می‌کند که عنوان تصویر در صورت نمایش داده نشدن آن چه خواهد بود. به‌عبارتی اگر به هر دلیلی تصویر بارگذاری نشود، این عنوان به کاربر نشان می‌دهد موضوع تصویر دیده نشده چیست.

تفاوت تگ و مشخصه

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

<h1>Welcome to my blog on SEO</h1>

در این کد <h1> تگ شروع کننده و “Welcome to my blog on SEO” محتوای آن است. درنهایت هم </h1> پایان تگ را مشخص می‌کند. این کد عنوان صفحه را مشخص می‌کند، همان چیزی که کاربر در مواجهه با صفحه می‌بیند. یک تگ HTML معمولاً شروع و پایان دارد، اما داستان در مورد مشخصه‌ها این‌گونه نیست. مشخصه‌ها شروع و پایان ندارند و صرفاً پیرایشگر هستند. مثلاً به کد زیر توجه کنید.

<link rel=”canonical” href=”https://www.website.com” />

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

تگ‌ها به چه دردی می‌خورند؟

اول اینکه گوگل از متاتگ‌ها استفاده می‌کند تا محتوای صفحه را تشخیص دهد و درنهایت آن را در صفحۀ نتایج جستجو نشان دهد. اسنیپت‌ها بهترین شاهد برای این ماجرا هستند چون از تگ title  و متاتگ description  ساخته شده‌اند. اگر این عنوان و توصیف که برای صفحه قرار می‌دهید مناسب نباشد، یعنی مثلاً در آن به شکلی اغراق‌آمیز از کلمات کلیدی استفاده شده یا توضیحات گمراه‌کننده دارد، گوگل به شکل خودکار آن‌ها را با توضیحات مناسب‌تر جایگزین می‌کند.

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

تگ‌های پایه در HTML

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

<!DOCTYPE html>

<html>

<head>

<title>The title of the document</title>

</head>

<body>

The content of the document

</body>

</html>

<!DOCTYPE html>

این تگها نشان می‌دهند که مرورگر با یک صفحۀ وب مواجه است و اولین چیزی است که در یک فایل HTML وارد می‌کنید. البته این کد بیشتر از اینکه تگ HTML باشد مقدمه‌ای است که قالب کلی کار را مشخص می‌کند، به همین دلیل هم مشخصه ندارد و فقط به مرورگر نشان می‌دهد که این صفحه یک فایل HTML است. دو بخش مهم در HTML تگ های <head> و <body> هست که در ادامه توضیح داده شده.

تگ <head> در HTML چیست ؟

در این بخش فراداده‌های (metadata) صفحه را قرار می‌دهند و اولین بخش در یک صفحۀ HTML است. متادیتاها به طور کلی داده‌هایی هستند که اطلاعاتی راجع‌به داده‌های دیگر ارائه می‌کنند. در این بخش از فایل، تعدادی از مهم‌ترین تگ‌های مرتبط با سئو قرار داده می‌شوند. تگ <head> مانند ظرفی برای فرداداده‌ها عمل می‌کند، یعنی اطلاعات مربوط به HTML که در صفحه به نمایش گذاشته نمی‌شود، اما شامل charset، استایل شیت‌ها و غیره می‌شود یعنی تگ‌های :

 

مهمترین تگ هایی که در تگ head استفاده می شود :

  • <base>
  • <link>
  • <meta>
  • <noscript>
  • <script>
  • <style>
  • <title>

در بخش < head> اطلاعات مهم دیگری هم مشخص می‌شود و آن مشخصه‌های جامع HTML است.

تگ <body> در HTML چیست ؟

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

مهم ترین تگ های HTML در سئو

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

اهمیت تگ title در سئو

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

طول تایتل باید بین 60 تا 70 کاراکتر باشد، یعنی فقط همین تعداد کاراکتر نمایش داده می‌شود و هر آنچه بیش از آن باشد به تصویر کشیده نخواهد شد.

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

از نظر سئو، <title> همان نوشتۀ قابل کلیک در صفحۀ نتایج جستجو است و در بحث کاربردی بودن، بهینه‌سازی موتور جستجو و اشتراک در شبکه‌های اجتماعی اهمیت زیادی دارد. محتویات این تگ باید صفحه را به‌خوبی و به نحوی جذاب به کاربر نشان دهند .

اهمیت تگ meta در سئو

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

مشخصه name در تگ meta

مشخصه نام یا  Name که به ربات‌های جستجو نشان می‌دهد محتویات صفحه برای آن‌ها نوشته شده یا نه. مثلاً کد <meta name=”robots” content=”noindex” /> یا <meta name=”googlebot” content=”noindex” /> به موتور جستجو نشان می‌دهد که اجازه ایندکس کردن این صفحه را دارد یا نه. به جز تعیین ایندکس شدن یا نشدن صفحه، از این مشخصه در موارد زیر هم استفاده می‌شود.

  • تعیین کلمه کلیدی برای صفحه :

<meta name=”keywords” content=”HTML, tags, attributes”>

  • مشخص کردن توصیف صفحه:

<meta name=”description” content=”Must-Know HTML tags and attributes”>

  • تعیین نویسنده محتوای صفحه:

<meta name=”author” content=”اسم نویسنده”>

مشخصه noindex در تگ meta

این مشخصه هم کاربردی یکسانی با meta robots tag دارد یعنی به ربات‌های خزندۀ گوگل می‌گوید که اجازۀ ایندکس کردن این صفحه را دارند یا نه. اگر این اجازه صادر شود، صفحۀ وب ایندکس شده و در صفحۀ نتایج جستجو نمایش داده می‌شود. با اینکه  noindex  یک مشخصه است معمولاً از آن با عنوان تگ یاد می‌کنند. دستور ایندکس نشدن صفحۀ وب به این شکل است:  <meta name=”robots” content=”noindex” />

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

مشخصه nofollow در تگ meta

با این دستور تمام لینک‌های صفحه به وضعیت nofollow در می‌آیند یعنی ربات‌های گوگل حین بررسی صفحه اگر به این لینک‌ها رسید آن‌ها را دنبال نمی‌کند و وارد صفحۀ جدید نمی‌شوند، درنتیجه، در رتبه‌بندی سایت هم محاسبه نمی‌شوند. به‌علاوه، دستور index, nofollow هم هست که با استفاده از آن به ربات‌ها می‌گویید که صفحۀ وب شما را ایندکس کنند اما لینک‌های داخل آن‌ها همگی nofollow باشند.

مشخصه Description در تگ meta

به این مشخصه گاهی meta description هم گفته می‌شود و یکی دیگر از مشخصه‌های متاتگ است. با این مشخصه یک توصیف متنی از صفحۀ خود ارائه می‌کنید که در نتایج جستجو نشان داده می‌شود. این توصیف درست زیر تگ <title> قرار دارد.

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

مشخصه Charset در تگ meta

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

<meta charset=”UTF-8″>

توجه داشته باشید که نباید در یک صفحه بیش از یک استاندارد کدگذاری استفاده شود وگرنه مرورگر و موتور جستجو گیج خواهند شد و ممکن است نمایش صفحه با مشکل روبه‌رو شود. در حال حاضر اکثر مرورگرها بدون این کد هم متوجه استاندارد کدگذاری مناسب هستند، اما برای اطمینان بیشتر بهتر است همچنان این دستور را وارد کنید. یکی از مرسوم‌ترین استاندارهای کدگذاری UTF-8 است که بیش از 96درصد سایت‌های تحلیل شده از آن استفاده می‌کنند. همۀ مرورگرهای مدرن و موتورهای جستجو قابلیت خواندن آن را دارند. استاندارهای دیگر شامل ISO-8859-1 ، Windows-1251 و  Windows-1252 می‌شود.

مشخصه Content در تگ meta

این مشخصه در ترکیب با name و http-equiv کار می‌کند و مفهوم و نوع داده‌ها را برای موتورهای جستجو مشخص می‌کند. درواقع محتوایی که متاتگ دارد را مشخص می‌کنند و نوع داده‌ها را برای مرورگر ارسال می‌کنند. این دستور احتمالاً شکلی مشابه با دستور زیر دارد:

<meta name=”description” content=”What are HTML tags and attributes? How do you use them to get an SEO advantage? Check out every important HTML صفحه‌ای که این مشخصه را ندارد. tag and its attribute in this post!”>

مشخصه HTTP-equiv در تگ meta

این مشخصه محتوای header صفحه را نشان می‌دهد و سرور با تکیه بر آن اطلاعات بیشتری دربارۀ صفحه جمع‌آوری می‌کند. اطلاعات این بخش همراه با مشخصه‌های دیگر کاربرد دارد یعنی مرورگر اطلاعات این مشخصه را با کمک مشخصه content به‌دست می‌آورد و طوری درنظر می‌گیرد انگار مستقیماً از سرور آمده‌اند.

<meta http-equiv=”expires” content=”4 May 2022″>

or

<meta http-equiv=”refresh” content=”60″>

Header اطلاعات خیلی مهمی را برای متخصصان سئو آشکار می‌کند، مثلاً وضعیت پاسخگویی سایت (200، 404 و …) یا نام سروری که پاسخدهی را انجام می‌دهد. به‌علاوه، برای مشخص کردن canonical URL یا ایندکس نشدن صفحات هم استفاده می‌شود. در جدول زیر خلاصه‌ای از مشخصه‌هایی را که برای http-equiv استفاده می‌شود را می‌بینید.

مشخصه توضیحات
content-security-policy سیاست‌های محتوایی صفحه را مشخص می‌کند.
Example: <meta http-equiv=”content-security-policy” content=”default-src ‘self’”>
content-type استاندارد کدگذاری صفحه را تعیین می‌کند .
Example: <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
default-style استایل-شیت مورد نظر صفحه را نشان می‌دهد.
Example: <meta http-equiv=”default-style” content=”the document’s preferred stylesheet”>
refresh بازه زمانی بارگذاری مجدد صفحه را مشخص می‌کند.
Example: <meta http-equiv=”refresh” content=”120″>

مشخصه Viewport در تگ meta

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

<meta name=”” content=”width=device-width, initial-scale=1.0″>

با کمک این داده‌ها، مرورگرها می‌توانند ابعاد صفحه را کنترل کنند. مثلاً در دستور بالا، مرورگر متوجه می‌شود که باید عرض صفحه را با عرض نمایشگر یکی کند و میزان بزرگنمایی صفحه هم معادل 1.0 است. در تصویر زیر تفاوت صفحاتی را مشاهده می‌کنید که یکی از آن‌ها از Viewport تنظیم شده استفاده می‌کند و صفحه‌ای که این مشخصه را ندارد.

مقایسه viewportدر دورانی که بسیاری از کاربران برای جستجوهای اینترنتی از تلفن‌های همراه و تبلت استفاده می‌کنند، داشتن سایتی که با این دستگاه‌ها هماهنگ نیست، نقطه ضعف بزرگی است. مطمئن باشید کاربران با دیدن سایتی که شبیه به نمونۀ سمت چپ در تصویر بالاست، بلافاصله آن را ترک می‌کنند و این رفتار در رتبه‌بندی سایت شما بسیار مؤثر است.

اهیمت تگ <a> و <link> در سئو (تگ‌های لینک‌ساز)

تگ <a> برای تعریف هایپرلینک از صفحه‌ای به صفحۀ دیگر استفاده می‌شود و به عبارتی هایپرلینک استاندارد یک صفحۀ وب است. نمونه‌ای از این تگ را در کد زیر می‌بینید:

<a href=”www.website.com”>link anchor text</a>

وقتی کد بالا را در یک صفحه قرار دهید و اجرا کنید به شکل زیر نمایش داده می‌شود:

link anchor text

حالا که با ساختار اولیه تگ لینک‌ساز آشنا شدید، لازم است اجزای آن را هم بهتر بشناسید. همان‌طور که گفته شد، این تگ مشخص می‌کند که عنصر مورد نظر یک لینک است و مشخصۀ href= صفحۀ مقصد را نشان می‌دهد یعنی صفحه‌ای که با کلیک کردن یا لمس کردن لینک، به آن منتقل می‌شوید، که در این مثال website.com  است، و متنی که بعد از آن آمده متن لینک یا انکرتکست است. تگ <a> جزو دسته تگ‌هایی است که شروع و پایان دارند و از آن برای ساخت لینک‌هایی استفاده می‌شود که درون بدنۀ صفحه یا بخش <body> قرار می‌گیرند. اگر قرار است از منابع خارجی استفاده کنید، مثلاً قلم‌ خاصی را برای صفحه انتخاب یا از مجموعه کدهای طراحی به‌خصوصی استفاده کنید، باید سراغ تگ <link> بروید که در بخش <head> صفحه قرار می‌گیرد. نمونه‌ای از این کد را می‌بینید:

<head>

<link rel=”stylesheet” href=”styles.css”>

</head>

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

مشخصۀ Href و hreflang در تگ a

مهم‌ترین بخش تگ <a> همین مشخصه است که مقصد لینک را نشان می‌دهد و در همین حین زبان و کشور صفحۀ مقصد را هم مشخص می‌کند. در ابتدا این تگ را برای صفحاتی طراحی کرده بودند که چند زبان مختلف داشتند و با کمک آن موتورهای جستجو  تشخیص می‌دادند که کدام زبان را به مخاطبان کدام کشور نشان دهد. همین مشخصه را در تگ <link> هم‌ می‌توان استفاده کرد. نمونه‌ای از این کد را در این بخش می‌بینید:

<link rel=”alternate” href=”https://website.com” hreflang=”en-gb” />

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

  • rel=”alternate”: به موتور جستجو نشان می‌دهد که این صفحۀ وب، به شکل دیگری هم وجود دارد.
  • href=: صفحۀ مقصد یا صفحه‌ای که به آن لینک شده را نشان می‌دهد.
  • hreflang=: کدی که بعد از این مشخصه می‌آید به موتور جستجو نشان می‌دهد که زبان صفحۀ مقصد چیست. این کدها استانداردی را دنبال می‌کنند که با عنوان ISO 639-1 codes شناخته می‌شود.

توجه داشته باشید که مشخصۀ hreflang را می‌توانید در header فایل‌های HTTP،  non-HTML و نقشه سایت قرار دهید.

مشخصۀ Rel=“nofollow”

این مشخصه به ربات‌های جستجو می‌گوید که یک لینک مشخص را دنبال نکنند. هرچند که این مشخصه تأثیری در بازدیدکنندگان سایت ندارد، اما ربات‌های موتورهای جستجو را تحت تأثیر قرار می‌دهد. یعنی کاربر صفحه همچنان می‌تواند با استفاده از این لینک‌ها از صفحه‌ای به صفحۀ دیگر برود، اما ربات‌ها نمی‌توانند. البته فراموش نکنید که لینک‌های nofollow از نقطه نظر سئو، مزیتی برای سایت نخواهند داشت چون اساس ارتباط لینک‌ها را رعایت نمی‌کنند، اما می‌توانید از این طریق به موتورهای جستجو بفهمانید که لینک در ازای گرفتن پول یا تبلیغات به سایت اضافه شده است و لازم نیست وقت ربات‌های خود را برای بررسی آن صرف کنند. این کار باعث می‌شود از جریمه‌های گوگل هم در امان بمانید چون می‌توانید ثابت کنید که این لینک‌ها نتیجه یک دادوستد کاملاً قانونی است و شما سعی نداشتید از روش‌های کلاه سیاه استفاده کنید.

مشخصۀ nofollow را می‌توان به یک یا چندین لینک نسبت داد و شکل کلی آن به این ترتیب است:

<a href=www.website.com rel=”nofollow”>link anchor text</a>

اگر دستور nofollow را در بخش <head> قرار دهید، می‌توانید تمام لینک‌های صفحه را به nofollow تبدیل کنید. در این حالت، این مشخصه شکل و شمایلی مانند noindex خواهد داشت.

<meta name=”robots” content=”nofollow” />

استفادۀ گوگل از rel=“nofollow” در تگ a

چندسال پیش، گوگل تغییراتی را در مشخصۀ nofollow اعمال و دنیا را با مشخصه‌های rel=”ugc” و rel=”sponsored” آشنا کرد. برخلاف مشخصۀ nofollow، با استفاده از قابلیت جدید می‌توانید مشخص کنید که ارتباط بین لینک ساخته شده و صفحۀ مقصد چیست. این مشخصه‌ها به گوگل کمک می‌کنند تا لینک‌هایی را پیدا کند که بی‌اهمیت هستند و نباید در رتبه‌بندی آن‌ها را در نظر بگیرد.

rel=”ugc” نشان‌دهندۀ محتوایی است که کاربر آن را ایجاد می‌کند یا به عبارتی user-generated است. این دسته محتواها را معمولا در فروم‌ها یا سایت‌های مشابه می‌بینید که کاربرانِ آن‌ها اجازۀ تولید محتوا دارند. rel=”sponsored” هم به گوگل نشان می‌دهد که این لینک اسپانسر شده است یعنی وجهی در ازای ساخت و قرار گرفتن آن در صفحه، دریافت شده است. به‌علاوه، گوگل اعلام کرد که برخلاف گذشته که ربات‌های گوگل لینک‌های نوفالو، اسپانسر و یو‌جی‌سی را در نظر نمی‌گرفتند، امروز از آن‌ها را به‌عنوان راهنمایی از محتویات صفحه درنظر می‌گیرد اما ربات‌ها لینک را دنبال نخواهند کرد.

مشخصۀ Canonical

مشخصۀ  rel=”canonical”به سئوکارها اجازه می‌دهد که صفحۀ مرجع میان چندین صفحه را مشخص کنند. یعنی به ربات‌ها نشان دهند میان صفحاتی که نسخه‌های متعددی از آن‌ها وجود دارد، کدام صفحه مهم‌تر است و باید به عنوان نسخه اصلی درنظر گرفته شود. برای یک سئوکار، Canonical کردن ابزاری است که با کمک آن صفحۀ خاصی را به گرفتن بازدید بیشتر هدایت کند. یک کد Canonical به این شکل است:

<link rel=”canonical” href=”https://www.website.com/” />

کدهای کنونیکال را باید در بخش <head> صفحه قرار دهید. توجه کنید که بعد از مشخصۀ “href=” باید لینک صفحۀ مرجع را قرار دهید.

اهیمت تگ <img> در سئو

تگ <img> همان‌طور که احتمالاً حدس زده‌اید به تصاویر یک صفحۀ وب ارتباط دارد. این تگ برای نشان دادن تصویر در صفحه استفاده می‌شود و فرمت‌های PNG ،JPEG  وGIF  را پشتیبانی می‌کند. البته با کمک این تگ می‌توانید تصویر را در قالب لینک هم استفاده کنید، برای این کار کافیست که آن را با تگ  <a> ترکیب کنید.

اگر تصاویر شامل بخش کلیک‌شدنی باشند، تبدیل به تصویر-نقشه می‌شوند. در این نوع از تصاویر با توجه به بخشی از تصویر که روی آن کلیک می‌کنید، به صفحۀ متفاوتی منتقل می‌شوید. نکته جالب اینجاست که این تگ در واقع تصویری را در صفحه قرار نمی‌دهد و تنها به آن‌ها ارجاع می‌دهد و در نتیجۀ این ارجاع، تصویر در صفحه نشان داده می‌شود. این تگ یک محفظه یا ظرف است که مانند یک سرور در جایی جداگانه قرار گرفته است. به طور کلی یک تگ <img> فرمتی مشابه زیر دارد:

<img src=”منبع تصویر” title=”توصیف تصویر” alt=”متن جایگزین”>

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

مشخصه src در تگ img

اولین مشخصه src است که منبع تصویر یا همان URL و جایی که تصویر در آن ذخیره شده است را نشان می‌دهد. این کار را می‌توان به دو روش انجام داد. اول اینکه تصویر در دامنۀ یکسانی ذخیره شده باشد. در این صورت می‌توانید از URL نسبی استفاده کنید و لازم نیست نام دامنه را ذکر کنید. اگر در ابتدای URL اسلش نیامده باشد، یعنی URL به صفحه‌ای که روی آن کار می‌کنید برمی‌گردد و شکل آن به این صورت خواهد بود:

src=”imagefile.png”

اما اگر در ابتدای مسیر ذکر شده اسلش وجود داشته باشد، یعنی URL به دامنه باز می‌گردد و شکل آن اینگونه است:

src=”/images/imagefile.png”

توجه داشته باشید که اگر دامنه تغییر کند، تصاویر از بین نمی‌روند، اما اگر به هر دلیلی مرورگر نتواند تصویر مورد نظرش را پیدا کند، آیکون تصویر شکسته به کاربر نشان و متن جایگزین به نمایش داده می‌شود.

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

src=https://www.website.com/images/imagefile.png

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

مشخصه alt در تگ img

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

  • تصویر را به درستی توصیف کند
  • مطابق با موضوع و محتوای کلی صفحه باشد

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

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

مشخصه title در تگ img

آخرین بخش از تگ تصویر که دربارۀ آن توضیح می‌دهیم عنوان یا title  است. هرچند که این مشخصه در بهینه‌سازی سایت برای موتورهای جستجو به اندازۀ ‌alt مهم نیست، اما بهتر است که عنوانی برای تصاویر درنظر بگیرید چون وقتی کاربر نشانگر ماوس خود را روی تصویر ببرد، اطلاعات بیشتری دربارۀ آن به دست خواهد آورد.

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

مشخصه توضیحات
crossorigin اجازه استفاده از تصاویری را می‌دهد که از سایت دیگری فراخوانی می‌شوند.
height ارتفاع تصویر را مشخص می‌کند.
ismap مشخص می‌کند که تصویر در واقع یک تصویر-نقشه در سرور است.
loading مشخص می‌کند که بارگذاری تصویر باید آنی صورت بگیرد یا مرورگر منتظر برآورده شدن شروطی باشد.
longdesc نشان‌دهندۀ صفحه‌ای است که تصویرهایی با توصیف دقیق و جزئی دارد.
referrerpolicy مشخص می‌کند که باید چه اطلاعات ارجاعی هنگام بارگذاری تصویر فراخوانی شود.
sizes سایز عکس را برای استفاده در قالب‌های مختلف تعیین می‌کند.
srcset مجموعه عکس‌هایی را که باید که در سناریو‌های مختلف استفاده شود مشخص می‌کند.
usemap مشخص می‌کند تصویر یک تصویر-نقشه‌ است که کاربر آن را بارگذاری کرده است.
width پهنای تصویر را مشخص می‌کند.

 

تگ تصویر از  HTML Global Attributes و HTML Event Attributes پشتیبانی می‌کند.

اهمیت تگهای  <i> و <em>، <b> و <strong> در سئو

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

معرفی تگ های <i> و <em> و تفاوت آن در سئو

هر دوی این تگ‌ها متن را  کج‌نویس یا italic می‌کنند و به این شکل نوشته می‌شوند:

  • </i>متن مورد نظر<i>
  • <em>Emphasized text</em>

تفاوت عمده این دو تگ در استفادۀ آن‌ها در سئو است. تگ <i> صرفا کلمات را ایتالیک می‌کند یعنی تغییری است که توجه کاربر را جلب می‌کند اما ربات‌ها را نه. درحالی‌که تگ  <em> در واقع یک تأکید معنایی است که ربات‌های موتور جستجو آن را درک می‌کنند و این مسئله در سئو کاربرد دارد.

معرفی تگ های <b>و <strong> و تفاوت آن در سئو

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

  • </b>متن مورد نظر<b>
  • </strong>متن مورد نظر<strong>

بنابراین فراموش نکنید که تگ <b> در واقع تأکید بیشتری را روی متن مورد نظر شما اعمال نمی‌کند و فقط تغییر بصری است، اما تگ <strong> این تأکید را اعمال می‌کند و نشان‌دهنده اهمیت متن و ابزار مناسبی برای متخصصین سئو است.

اهمیت تگ های <table> ، <ul> و <ol> در سئو

جدول و فهرست دو راه مناسب برای دسته‌بندی کردن اطلاعات در یک صفحۀ وب است، اما برتری دیگری هم به صفحۀ شما می‌دهند، یعنی نمایان شدن در جعبۀ پاسخ‌های گوگل (Google’s Answer Box.) مثلا اگر عبارت “video card comparison” را جستجو کنید، جدولی مشابه با تصویر زیر مشاهده می‌کنید:

اگر کدهای این صفحه را بررسی کنید، کدهای جدولی را می‌بینید که احتمالا مشابه این تصویر است:

اگر اطلاعات اضافۀ جدول بالا را که مختص به همان جدول است حذف کنیم، قالب کلی یک جدول HTML به دست می‌آید که به این صورت است:

<table>

<tr>

</th>عنوان یا هِدِر جدول<th>

</td>یک سلول انتخابی<td>

</tr>

</table>

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

  • <table>: این تگ ساختار و محتوای جدول را مشخص می‌کند و اولین قدم برای ساخت یک جدول در HTML است. سایر تگ‌ها و مشخصه‌ها درون این تگ قرار می‌گیرند. جدول را می‌توانید با مشخصه‌های مختلف راست‌چین، چپ‌چین یا وسط‌چین کنید، برای آن تصویر پشت‌زمینه انتخاب کنید یا رنگ آن را تغییر دهید، حاشیه انتخاب کنید و طول و عرض آن را تغییر دهید.
  • <caption>: این تگ عنوان جدول را مشخص می‌کند.
  • <tr> : این تگ به جدول ردیف اضافه می‌کند.
  • <td>: این تگ به جدول سلول اضافه می‌کند.
  • <th> : این تگ به جدول سلول عنوان اضافه می‌کند یعنی سلولی که در ابتدای جدول قرار می‌گیرد و عنوان ردیف یا ستون است.

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

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

<ul>

</li>مورد اول در فهرست<li>

</li>مورد بعدی در فهرست<li>

</ul>

<ol>

</li>مورد اول در فهرست<li>

</li>مورد بعدی در فهرست<li>

</ol>

درست مانند تگ جدول، تگ فهرست هم مشخصه‌ها و تگ‌های زیرمجموعه‌ای دارد که باید آن‌ها را با هم مرور کنیم:

  • <ul>: تگ ساخت فهرست غیرترتیبی.
  • <ol>: تگ ساخت فهرست ترتیبی.
  • <li>: مواردی که در فهرست آورده می‌شود را مشخص می‌کند.

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

اهمیت تگ  <header> در سئو

تگ <header> طراحی شد تا بخش سربرگ صفحه یا بخشی از صفحه را مشخص کند و محتوای آن را از سایر بخش‌ها مجزا سازد. لوگو یا آیکون صفحه، پیوندهای ناوبری و نوار جستجو معمولا بخشی از سربرگ اصلی صفحه هستند. نکتۀ مهم در این بخش این است که یک کد HTML ممکن است چندین سربرگ داشته باشد، اما تگ سربرگ را نمی‌توان در <footer>، <address> یا یک تگ سربرگ دیگر قرار داد. کد سربرگ را به‌خوبی در مثال زیر می‌بینید:

<!DOCTYPE html>

<html>

<body>

<article>

<header>

<h1>Write a heading here</h1>

<p>Posted by John Appleseed</p>

<p>Introduce your piece of content</p>

</header>

<p>Now get into all the deets</p>

</article>

</body>

</html>

وقتی این کد اجرا شود، تصویر زیر را خواهید دید:

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

اهمیت تگ های <h1> تا <h6> در سئو

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

عناوین 6 سطح دارند که از 1 تا 6 شماره‌گذاری شده‌ است. <h1> اولین سطح و عنوان اصلی صفحه است که معمولا بالای متن قرار داده می‌شود. در اکثر موارد هر صفحه فقط یک عنوان <h1> دارد. باقی عناوین هم سلسله‌مراتبی انتخاب می‌شوند و هر کدام زیر مجموعۀ سطح بالاتر از خود هستند. برای اینکه بهترین نتیجه را در سئو بگیرید بهتر است از قوانین مربوط به آن پیروی کنید، برای هر صفحه فقط یک <h1>  در نظر بگیرید و سلسله‌مراتب را در سایر عناوین هم رعایت کنید.

توجه داشته باشید که دو تگ <title> و <h1> با هم تفاوت دارند. از آنجایی که هر دوی این تگ‌ها محتویات صفحه را شرح می‌دهند گاهی اشتباه گرفته می‌شوند. <title> در اسنیپت، شبکه‌های اجتماعی و تب مرورگر نمایش داده می‌شود، درحالی‌که <h1> عنوان اصلی صفحه است و در صفحه هم نمایش داده می‌شود. به‌علاوه، این دو تگ اهداف و عملکرد متفاوتی هم دارند. <title> می‌کوشد افراد را از صفحۀ نتایج به سایت جذب کند و <h1> به کاربر نشان می‌دهد که به صفحۀ درستی آمده و آنچه می‌بیند او را به هدفش می‌رساند.

اهمیت تگ <footer> در سئو

همان‌طور که از نام این تگ پیداست، برای طراحی فوتر یا پاورقی صفحه استفاده می‌شود. معمولاً در این بخش اطلاعاتی مربوط به حقوق نشر (copyright)، اطلاعات تماس، مالکیت صفحه، پیوند به صفحات و مدارک مرتبط، پیوند بازگشت به ابتدای صفحه و گاهی نقشۀ سایت قرار می‌گیرد. یک کد HTML می‌تواند چندین پاورقی داشته باشد. شکل کلی کد فوتر را در خطوط زیر مشاهده می‌کنید:

<!DOCTYPE html>

<html>

<body>

<h1>The footer element</h1>

<footer>

<p>Author: John Appleseed<br>

<a href=”mailto:john@example.com”>john@example.com</a></p>

</footer>

</body>

</html>

وقتی این کد اجرا شود، تصویر زیر در صفحه به نمایش گذاشته می‌شود:

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

اهمیت تگ Twitter Card در سئو

کارت توئیتر یک افزونه توئیت است و متخصصین از آن برای گرفتن ترافیک بیشتر در سایت یا اپلیکیشن موبایل استفاده می‌کنند.

اگر در سایتتان متاتگِ توئیتر کارت را داشته باشید، زمانی که پستی را توئیت می‌کنید توئیتر صفحۀ وبسایت شما را در توئیت نمایش خواهد داد. این متاتگ در بخش header اضافه می‌شود و هنگام استفاده از کد باید مشخص کنید چه نوع توئیتر کارتی مد نظر شماست. به‌علاوه، با اضافه کردن این کد، افرادی که در توئیتر به سایت شما لینک می‌دهند هم کارتی خواهند گرفت که دنبال‌کنندگانشان در توئیتر آن را خواهند دید.

انواع مختلفی از توئیتر کارت وجود دارد و هر کدام از آن‌ها هدف و مشخصات خاص خود را دارند و براساس ابزار مورد استفاده مخاطبان خاصی را هم هدف قرار می‌دهند یعنی مثلا برای مخاطبان موبایل یا سیستمی طراحی می‌شوند. در این بخش تعدادی از این کارت‌ها را با هم مرور می‌کنیم:

  • Summary Card: این کارت شامل عنوان، توصیف متنی و تصاویر کوچک است. اگر در این کارت از تصاویر بزرگ استفاده شود، باید تصویر شاخصی هم برای آن در نظر گرفته شود.
  • App Card: این کارت امکان دانلود مستقیم روی اپلیکیشن موبایل را به کاربران می‌دهد.
  • Player Card: پخش ویدئو، فایل صوتی و سایر فایل‌های چندرسانه‌ای را ممکن می‌سازد.

برای استفاده از توئیتر کارت باید اول مدلی را که بیشترین فایده را برای شما دارد انتخاب کنید و سپس نشانه‌های آن را در بخش head‌ کد HTML اضافه کنید. احتمالاً این کد چیزی مشابه با مثال زیر خواهد بود:

<meta name=”twitter:card” content=”summary”></meta>

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

دیدگاه نوشتن

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *