در دنیای وب، بهینه‌سازی موتورهای جستجو یا به‌طور مختصر “سئو”، یکی از عوامل کلیدی برای جذب ترافیک وبسایت شما به حساب می‌آید. یکی از ابزارهای قدرتمند در این زمینه، استفاده صحیح از تگها و متا تگها است. تگها در واقع عناصر کدی هستند که به موتورهای جستجو و مرورگرها کمک میکنند تا محتوای وبسایت شما را بهتر درک کنند. همچنین، متا تگها اطلاعات مهمی را درباره صفحات شما ارائه میدهند که میتواند تاثیر قابل توجهی در رتبه‌بندی و نمایش نتایج جستجو داشته باشد.
در این مقاله، قصد داریم به طور جامع به معرفی انواع تگها و هدر اصلی متاتگ پرداخته و نحوه استفاده صحیح از آنها را به منظور بهبود سئو وب‌سایت‌تان تشریح کنیم. از تگ‌های ساختاری گرفته تا متا تگ‌های کلیدی، همه جزئیات بهینه‌سازی را پوشش می‌دهیم.
ما در این مقاله به بررسی انواع تگها و متا تگها از جمله تگ‌های سربرگ، تگ‌های متنی، تگ‌های تصویری و متا تگ‌های مهم می‌پردازیم. هر نوع تگ و متا تگ را با نمونه‌های عملی و توضیحات دقیق همراه می‌سازیم تا شما بتوانید با دقت بیشتری به سئو و بهینه‌سازی وب‌سایت‌تان پرداخته و نتایج مطلوب را به دست آورید.
پس با ما همراه شوید تا در این سفر به دنیای تگها و متا تگها، اصول بهینه‌سازی را فرا بگیرید و وبسایت خود را برای موتورهای جستجو بهبود دهید.
تعریف Html tag
HTML (Hypertext Markup Language) یک زبان نشانهگذاری است که برای ساختاردهی و نمایش محتوا در وبسایتها استفاده میشود. HTML از تگها (علامت‌ها) برای توصیف ساختار اجزای مختلف صفحه‌های وب استفاده میکند. این تگها شامل عناصری مانند عنوان‌ها، پاراگراف‌ها، تصاویر، لینک‌ها و بسیاری از عناصر دیگر هستند. این تگ شامل دو قسمت body وhead است
تعریف تگ head
تگ‌های هد یا “Head Tags” به عنوان بخشی از کدهای HTML وبسایت استفاده میشوند و در قسمت <head> اسناد HTML قرار می‌گیرند. این تگها اطلاعات مهمی را برای مرورگر و موتورهای جستجو ارائه میدهند، اما به صورت مستقیم در قسمت دیداری وبسایت نمایش داده نمیشوند.
محتوای قرار گرفته در تگ هد قابل نمایش کاربران نیست و اطلاعاتی در مورد محتوای آن صفحه را به مرورگر و موتورهای جستجو ارائه میدهد.
-
tag lang
عبارت LANG مستقیما در تگ HTML قرار گرفته و به رباتها و مرورگر ها اعلام میکند که محتوای این صفحه به چه زبانی تهیه شده است
کاربرد اصلی این تگ برای سایت هایی است که در صفحه محتوای میکس از چند زبان دارند و از این طریق مشخص میکنند زبان اصلی صفحه کدام است.
نمونه :
<html lang=“fa-IR>
-
Tag title
تگ عنوان عنوان صفحه برای کاربر و گوگل در نوار مرور گر نمایش داده میشود و ملاک اصلی گوگل برای نمایش عنوان در نتایج جستجو است. هر صفحه از سایت حتما یک تگ تایتل میخواهد.عنوان به صورت کاملا اختصاصی و متناسب با محتویات صفحه باشد.
گوگل عنوان صفحه را میخواند و متوجه موضوع شما میشود. سعی کنید در ان از کلمه کلیدی استفاده کنید و بیش از 55 کاراکتر نباشد و جذاب باشد
نمونه تگ title به شکل زیر در قسمت هد قرار میگیرد
<head>
<title> keyword- modifier-brand</title>
</head>
-
Meta tag
تگ متا یا “متاتگ” در HTML یک عنصر است که اطلاعات اضافی درباره‌ی صفحه وب ارائه میدهد. این اطلاعات به مرورگرها و موتورهای جستجو کمک میکنند تا محتوا و ویژگی‌های مختلف صفحه را بهتر درک کنند. تگ متاتگ در قسمت <head> اسناد HTML قرار میگیرد. برای آشنایی هدر اصلی متاتگ و اینکه در هدر اصلی متاتگ ذیل افزوده شود متن های زیر را بخوانید
دستوراتی که داخل متا تگ قرار میگیرد شامل موارد زیر است:
-
تگ Charset برای تعیین نوع کاراکترهای صفحه
این تگ نوع محتوا و کارکترهایی که قرار است در صفحه استفاده شوند را مشخص می کند. پیشنهاد می شود تا آنجا که می توانید از Unicode یا UTF-8 استفاده کنید.
نمونه:
<head>
<meta charset=“UTF-8”>
-
توضیحات (Description)
این متاتگ از بالاترین اهمیت برای موتورهای جستجو برخوردار است و محتوای صفحه شما را معرفی خواهد کرد. برای قرار دادن این متاتگ در کد نویسی خود می بایست آنرا در بین تگ Head و بعد از Title و متاتگ Content Type قرار دهید.
<“دوره سئو”meta name=“description” content>
-
متا تگ کلمات کلیدی (Keywords)
این متاتگ برای معرفی کلمات کلیدی درون سایت شما در نظر گرفته شده است. سعی کنید کلمات کلیدی که در این قسمت استفاده می کنید در محتوای صفحه به کار گرفته شده باشد. زیاد بودن کلمات کلیدی در Ranking سایت نتیجه برعکس ایجاد می کند و کمتر بودن آن نتیجه بهتری را به دنبال دارد ( حداکثر 10 کلمه ) و حداکثرتعداد کارکتری که در این قسمت می توان اضافه کرد 500 کارکتر می باشد. لازم به ذکر است برای جدا سازی کلمات کلیدی، از علامت ویرگول به صورت انگلیسی استفاده نمایید.
نمونه
<meta name=”keywords” content=”keyword1 , keyword2 , keyword3″ />
-
نویسنده (Author)
در این متاتگ می توانید نام نویسنده را قرار دهید. این متاتگ برای سایت هایی که چند مدیر و کاربر مجزا دارد، می تواند مفید واقع شود.
نمونه
<” meta name=“author” content”azadeheshaghi>
-
تگ nositelinkssearchbox برای غیرفعال کردن باکس جستجو
برای سایت هایی که صفحات بسیار زیاد و البته مخاطبین بی شماری دارند بخشی در نتایج جستجو اضافه میشود که به شما اجازه جستجوی مستقیم در آن سایت را میدهد. با استفاده از این تگ شما به گوگل دستور میدهید که این باکس را برای سایت شما نمایش ندهد. البته اگر چنین قابلیتی به سایت شما اضافه شده باشد باید خوشحال باشید ولی به هر حال امکان غیرفعال کردن آن را نیز خواهید داشت.
<“meta name=”google” content=”nositelinkssearchbox>
-
متا تگ موقعیت جغرافیایی
یکی از راه های افزایش سئو و بهینه سازی سایت این است که برای سایت یا همان کسب و کار خود یک موقعیت ایجاد کنید تا ربات های موتور جستجو از جمله گوگل بتوانند آدرس سایت و کسب و کار شما را در دیتابیس خود ذخیره کنند تا در جستجو ها برای کاربران مؤثر باشد. برای این کار در meta تگ ها از geo meta tags استفاده می کنیم. مثال:
<meta name=”geo.region” content=”US-NY”/>
<meta name=”geo.placename” content=”Ithaca”/>
<meta name=”geo.position” content=”42.434675;-76.416026”/>
<meta name=”ICBM” content=”42.434675,-75.416026”/>
-
متا تگ گوگل بات Googlebot
متا تگ گوگل بوت مخصوص موتور جستجوی پرطرفدار گوگل است
-
حق چاپ و نشر(Copyright)
این متاتگ معمولا برای سایت هایی با محتویات خاص مانند سایت های علمی-فرهنگی ارائه دهنده مقالات در سطح جهانی، مورد استفاده قرار میگیرد. در این نوع متاتگ تاریخ و نوع کپی رایت سایت به نمایش ‘گذاشته می شود.
< /”meta name=”copyright” content=”©2014 PARSDATA>
-
متا تگ رتبه
از دیگر انواع متاتگ‌هایی که گوگل از آن پشتیبانی میکند، میتوان به متا تگ رتبه‌بندی یا RATING اشاره کرد. این برچسب مربوط نتایج جستجوی ایمن یا SafeSearch result است. این متا تگ استفاده میشود تا به وبگردهای محدوده سنی خاص (عموما پایین‌تر و جوان‌تر) اطمینان دهد که محتوای صفحه مناسب است
<“meta name=”rating” content=”adult>
-
متا تگ معرف سایت به گوگل (google site verification)
متاتگ “معرفی سایت به گوگل”، صرفا برای دستیابی به پنل سرچ کنسول گوگل است. این کد توسط گوگل به مدیر داده میشود و در صورتی که آن را در قسمت head سایت خود قرار دهد، گوگل اطمینان پیدا میکند که شخص متقاضی برای ثبت نام گوگل کنسول، صاحب سایت است.
<head>
</“..”=meta name=“google-site-verification” content>
اتصال به سرچ کنسول برقرار سات
-
متاتگ generator
از این متاتگ می توانید برای زمانی استفاده نمایید که می خواهید مشخص کنید صفحه مورد نظر از چه برنامه یا خدماتی جهت انتشار محتوا استفاده می کند. این متاتگ کاملا اختیاری میباشد و تاثیر چندانی در رتبه و عملکرد سایتتان در موتورهای جستجو ندارد.
</head>
<head>
<“meta meta name=“generator” content=“wordpress 6.1.1>
نسخه وردپرس ای که استفاده میکنید چه است
-
انقضا (Expire)
این متاتگ تاریخ انقضای صفحه را مشخص می نماید.تگ expires به گوگل اعلام میکند که محتوای این صفحه منقضی شده و دیگر ارزشمند نیست به طور معمول استفاده از این تگ پیشنها نمیشود
برای سایت هایی که محتوای انها پس از مدتی بی استفاده میشوند این تگ میتواند کاربردی باشد مانند سمینار سیستم سازی و تیم سازی یا وبینار این هفته آموزش ابزار سئو
نمونه
</head>
<“meta name=“expires” conent=“mon, 09 may 2022>
-
متا تگ ویوپورتviewport
این تگ به مرورگر میگوید که چگونه صفحه را برای دیوایس موبایل رندر کند. به کار بردن این تگ به گوگل نشان میدهد که صفحه موبایل فرندلی است. همانطور که می‌دانید در حال حاضر جستجوهای داخل موبایل بر روی جستجو داخل دسکتاپ پیشی گرفته است. هیچگاه اهمیت ریسپانسیو بودن سایت در دیوایس‌های مختلف را دست کم نگیرید.
<“meta name=“viewport” content=“width=device-width,initial scale=1.0>
برای minimum scale- maximum-scale برای زمانیکه کاربر اجازه زوم دارد استفاده میشود و میزان حداقل و حداکثر بزرگنمایی صفحه را مشخص میکند سایت هایی که ریسپانسیو نیستند این تگ را در هدر سایت خود ندارند
-
متا تگ (Robots)
این متاتگ به نحوه برخورد ربات های جستجوگر با سایت شما، می پردازد. البته همه ی ربات ها از این متاتگ پیروی نمی کنند (مانند ربات گوگل که در ادامه توضیح خواهیم داد)، اما بد نیست که در صفحه اول سایت خود آن را استفاده کنید. این متاتگ برای زمانی موثر خواهد بود که شما از robots.txt استفاده نکرده اید.
در دستور پایین به ربات ها خواهید گفت که صفحه شما را در لیست جستجو ذخیره کرده و از لینک های موجود در آن پیروی کنند.
<meta name=“robots”content=index,noindex,follow,nofollow>
</head>
“meta name=“robots
ایندکس و فالو </”meta name=“robots” content=“all>
Noindex به گوگل میگوید که این صفحه را اینکدس نکن و داخل سرپ زنده نمایش نده در این حالت ایندکس نمیشود ولی همچنان کرال میشود
</”meta name=“robots” content=“noindex>
Nofollow به گوگل میگوید که لینک های داخل این صفحه را دنبال نکن البته گوگل معمولا خودش تصمیم میگیرد
</”meta name=“robots” content=“nofollow>
نو ایندکس و نو فالو</”meta name=“robots” content=“none>
Noarcive به گوگل میگوید از صفحه من یک کپی کش نکن توی نتایج سرپ این را میتوانید برای محتواهایی که اعتبار مشخصی دارند و یا لندینگ های مناسبتی و … استفاده کرد
</”meta name=“robots” content=“noarcive>
Notranslate یعنی ترنسلیت دیگر روی این صفحه کار نمیکند و کاربر نمیمتونه این صفحه را ترنسلیت کند
</”meta name=“robots” content=“notranslate>
Noimageidex به گوگل میگوید که عکسهای این صفحه را ایندکس نکند
</”meta name=“robots” content=“noimageidex>
Nosnippet یعنی این صفحه بدون اسنیپت در نتایج نشان داده شود
</”meta name=“robots” content=“nosnippet>
Maximagepreview=حداکثر سایز تصویر
Maxvideopriview=بیشرین حجم ویدئو
Anavaiableafter=از این تاریخ به بعد اجازه دسترسی را نده
-
متا تگ theme-color
این متا تگ به طور کلی برای تغییر تم مرورگر و رنگ قسمت آدرس بار استفاده میشه
<“meta name=”theme-color” content=”#f5f5f5>
-
متا تگ شبکه های اجتماعی
-
Open graph
متا تگ‌های Open Graph یا OG قطعاتی از کد هستند که نحوه نمایش URL های به اشتراک گذاشته شده را در شبکه های اجتماعی کنترل می کنند. آنها بخشی از پروتکل Open Graph فیسبوک هستند که توسط شبکه های اجتماعی دیگر مثل توئیتر و لینکدین هم استفاده می شوند.
Open graph meta tag(http://ogp.me/) از توییتر عکس-بزرگ-وک ی نمیاد وقتی url سایتا شما را میبرند جای دیگه در شبکه های اجتماعی اطلاعت بیشتر که احتمال کلیک بالاتر رود
<head>
<title> آموزش دیجیتال مارکینگ </title>
og:local در این متاتگ باید زبان و کشور سایت خود را مشخص کنید . برای ایران مقدار را باید fa_IR باید درج کنید.
<“meta property=”og:locale” content=”fa_IR>
og:title در این متاتگ باید عنوان صفحه یا مطلب درج شود. باید تگ مربوط به (عنوان پست و صفحه) را در سرویس وبلاگدهیتان یا سیستم مدیرت محتوایتان را داخل این متاتگ وارد کنید.
</“آموزش دیجیتال مارکتینگ”=meta property=“og:title” content>
og:type در این متاتگ باید نوع وب خود اعم از وبلاگ یا سایت بودن آن را مشخص کنید . باید از کلمات انگلیسی یعنی blog و article و profile و … استفاده نمایید.
</”meta property=“og:type” content=“article>
og:url در این متاتگ باید آدرس صفحه جاری یا مطلب درج شود که مانند مورد های قبل باید از تگ مربوطه استفاده کنید.
<meta property=“og:url” content=“https://pishtazwebwp.com/training>
og:image در این متاتگ نیز باید ادرس تصویر شاخص صفحه یا همان مطلب مربوطه درج شود ، که همانند مورد های قبل باید از تگ مربوطه استفاده شود.
</”meta property=“og:image” content=“https://pishtawebwp.com/asli.jpg>
og:description در این متاتگ توضیحات پست یا صفحه باید درج شود که مانند مورد قبل باید از تگ مربوط به سیستم مدیریت محتوا یا سرویس وبلاگدهی مربوط به توضیحات پست استفاد کنید.
</”meta property=“og:descrition” content=“description here>
og:see_also در این متاتگ نیز میتوانید لینک پست مشابه یا پیشنهادی خود را درج نمایید.
<meta property=”og:see_also” content=”http://seowave.ir/page/2″>
</head>
-
twitter card
<twitter card data>
twitter:card نوع لینک را در این متاتگ تعیین کنید .
به صورت معمولی باید روی summary تنظیم گردد ولی میتوانید از مقادیر large یا image نیز استفاده نمایید.
<“meta name”twitter:card” content=“summary>
twitter:site در این متاتگ باید عنوان کلی سایت خود را درج نمایید.
<“meta name”twitter:site” content=“@publisher_handle>
twitter:title عنوان پست جاری
<“meta name”twitter:title” content=“Page-Title>
twitter:description توضیحات پست مربوط
<“meta name”twitter:description” content=“Page>
twitter:creator نام سازنده سایت
<“meta name”twitter:creator” content=“@author_handle>
twitter:image:src در این متاتگ نیز باید ادرس تصویر شاخص صفحه یا همان مطلب مربوطه درج شود ، که همانند مورد های قبل باید از تگ مربوطه استفاده شود.
<“meta name”twitter:image” content=“http://www.example.com/mage.jpg>
-
متا تگ http-equiv
ویژگی خصوصی http-equiv ، مخصوص تگ meta می باشد. خاصیت http-equiv یک هدر درخواست HTTP ، برای اطلاعات مقدار خصوصیت content درون تگ meta فراهم می کند.
ویژگی http-equiv می تواند برای شبیه سازی هدر پاسخ HTTP استفاده شود. ویژگی خصوصی content معمولا درون تگ meta همراه با خاصیت http-equiv و یا خاصیت name می آید.
تمامی صفت های تگ meta اطلاعاتی را تحت عنوان متادیتا ها درون مقادیر خود جای می دهند. خاصیت content معمولا اطلاعاتی از محتوای وبسایت را برای خزش بهتر موتورهای جستجو فراهم می کند.
-
متا تگ رفرش محتوا
نمونه
<head>
<“meta http-equiv=“refresh” content=“30>
هر 30 ثانیه یکبار صفحه رفرش شود.
-
کنترل کش (Cache-Control)
برای مدیریت نحوه ذخیره کردن صفحات در مرورگر کاربران، از این متاتگ استفاده می شود. در اکثر مرورگرها محتویات صفحه شما، مانند تصاویر، فایل ها و .. در حافظه موقت ذخیره می گردند تا در مراجعات بعدی سریعتر به آنها دست پیدا کنند، اما در مواقعی لازم است تا محتویات صفحه از این عملکرد مصون بمانند. برای این منظور می توانید از این متاتگ استفاده کنید. در زیر مقادیر قابل استفاده در این دستور به همراه توضیحات آورده شده است:
</head>
محتوای شما در حافظه مشترک تمام کاربران یک سیستم ذخیره می شوند.
< /”meta http-equiv=”Cache-control” content=”public>
محتوای شما تنها در حافظه نام کاربری شما ذخیره می شود.
< /”meta http-equiv=”Cache-control” content=”private>
هیچ ذخیره ای از محتوای شما در حافظه صورت نمی گیرد.
< /”meta http-equiv=”Cache-control” content=”no-cache>
در محدوده زمانی کوتاهتری محتوای شما ذخیره و نگهداری می شوند و به صورت آرشیو در نمی آیند.
</ “meta http-equiv=”Cache-control” content=”no-store>
-
زبان سایت و محتویات آن Content Language
این متاتگ در موتورهای جستجو بسیار مفید می باشد و در مواقعی که موتورها بخواهند سایت ها را بر اساس زبان و یا منطقه زبانی آنها گروه بندی نمایند، بسیار مفید می باشد.
< /”meta http-equiv=”content-language” content=”fa>
-
تگ کنونیکال (در واقع تگ link و Rel Canonical)
گاها ممکن است صفحاتی در سایت شما وجود داشته که دارای محتوای یکسان باشد و وجود محتوای تکراری در سایت، یکی از خط قرمز های گوگل است. برای جلوگیری از پیش آمدن مشکلات احتمالی، میتوانید از رل کنونیکال استفاده کنید. با استفاده از تگ link و رل کنونیکال، در میان صفحات مشابه سایت خود، یکی را به عنوان صفحه اصلی انتخاب کرده و دیگر صفحات را به آن کنونیکال میزنید.
با استفاده از رل کنونیکال، شما به گوگل میفهمانید که باید از میان صفحات مشابه، کدام را به عنوان صفحه اصلی انتخاب کند و اعتبار سئو در نتایج جستجو را به آن اختصاص دهند. همینطور با استفاده از این تگ، دیگر مشکل محتوای تکراری یا duplicate content متوجه سایت شما نمیشود.
- تگ canonical وظیفه اش جلوگیری از تولید محتوای تکراری و ایندکس ان توسط گوگل است
- در صورتی که این نسخه کپی شده از صفحه دیگری است آدرس صفحه اصلی و در غیر این صورت ادرس خود صفحه در بخش href قر ار دده میشود
صفت href
این صفت آدرس موقعیت فایل مورد نظر را مشخص می کند
“Link rel=”canonical
</”link rel=“canonical” href=“pishtazwebwp.com/seo-tuorial>
-
تگ stylesheet
تگ stylesheet برای فراخوانی یک فایل استفاده میشود این تگ عموما در هدر سایت قرار گرفته و تازمانیکه دریافت نشود بقیه محتوای صفحه لود نمیشوند
“Link rel=“stylesheet
و لینکی حاوی فایل CSS و فاوآیکون را فراخوانی می کند.
<“link rel=“stylesheet” href=“styles.css>
-
تگ Shortlink
تگ shortlink همچنین در هر صفحه در وب سایت شما وجود دارد که حاوی پیوند پست با شناسه صفحه است
“link rel=“shortlink
link rel=“shortlink” href=https://www.pishtazwebwp.com/course/online/online-seo-course?p=12
-
تگ prev , next
این تگ ها که به تگ های رل next و prev معروفند، به گوگل نشان می دهند که صفحه قبلی این صفحه و صفحه بعدی آن کدام هستند.
</link rel=“prev” href=http://www.pishtazwebwp.com/article/2>
</link rel=“next” href=http://www.pishtazwebwp.com/article/3>
-
تگ shorticon تعریف آیکون صفحه
برای تعریف آیکون صفحه در بخش آدرس بار مرورگر وب نیز ، از تگ لینک استفاده میشود :
“Link rel=“shortcut icon
</”link rel=“shortcut icon” href=“/images/favicon.png” type=“image/x.icon>
-
rel=alternate
زبان اون صفحه ای که بهش لینک شده را مشخص میکند
<“link rel=”alternative”hreflang=”en>
-
dns-prefetch
dns-prefetch باعث ایجاد Connection نمیشه، اما مرحله قبل از Connection (یعنی DNS lookup) رو تسریع می‌کنه. لازم به توضیحه که سرورها مثل ما آدم‌ها دامنه‌ها رو با اسمشون نمی‌شناسند؛ بلکه IP دامنه‌ها رو شناسایی میکنند. برای همین DNS یا Domain Name Service ایجاد شده تا مرورگر نام دامنه‌ها رو به IP اونها تبدیل کنه. DNS lookup قبل از مرحله Connection انجام میشه و معمولا خیلی هم سریعه (حدود ۲۰ تا ۱۲۰ میلی‌ثانیه). اما با استفاده از dns-prefetch میشه در همین زمان هم صرفه جویی کرد
<link rel="dns-prefetch" href="http://third-party.com">-
preconnect
خطای Preconnect to required origins مربوط به اتصال‌های شخص ثالث یا همون third-party هست. به زبون ساده‌تر، مربوط به منابع و کدهایی که از سایر سایت‌ها در صفحات سایتمون قرار دادیم. مثلا یه ویدئو از آپارات یا Youtube یا کدهای مربوط به ابزارهای چت آنلاین مثل رایچت. برای دانلود شدن این منابع، مرورگر باید به سرور این سایت‌ها درخواست ارسال کنه. ارور Preconnect to required origins اشاره به این موضوع داره که اگه قراره مرورگر برای منابعی که از دامنه‌های دیگه هستند درخواست ارسال کنه، بهتره ما در کدهامون با استفاده از Preconnect این مسئله رو زودتر به مرورگر هشدار بدیم تا آماده باشه.
<link rel="preconnect" href="https://third-praty.com">تعریف تگ body
محتوای داخل بادی در دسترس کاربر و ملاک اصلی گوگل برای تعیین موضوع صفحه است
q یا نقل قول
متا تگ نقل قول به شما کمک میکند تا خوانایی محتوای خود را در سایت بالا ببرید
span
یکی دیگر از متا تگ‌های html که میتواند به شما در زیباسازی متن و بهبود خوانایی آن کمک کند
<span>
fdd
</span>
-
p
تگ p محتوای متنی و نشان دهنده پاراگراف
<p>
fdd
</p>
-
a
با استفاده از تگ a میتوانید قسمت‌هایی را که می‌خواهید به لینک تبدیل کنید
<a href=”https://free-learn.ir/” rel=”author”>azadeh eshahi</a>
-
section
تگ section به شما کمک میکند که یک بخش یا محتوای مستقل را در درون صفحه خود ایجاد کنید
<section>
</section>
-
article
با استفاده از تگ article میتوانید محتواهای مختلف مثل مطالب انجمن، پست‌های سایت، خبر و کامنت‌ها را در وبسایت خود منتشر کنید.
<article>
</article>
-
aside
با استفاده از تگ aside میتوانید مطالب مربوط به محتوای اصلی را در سایدبار یا در خلال محتوا نمایش دهید تا کاربر برای کسب اطلاعات بیشتر به آنها مراجعه کند.
<aside>
</aside>
-
header
با استفاده از تگ header میتوانید یک سربرگ مشخص را برای بخشی از یک صفحه یا کل آن ایجاد کنید. به طور معمول از این تگ برای ساخت هدر اصلی سایت به عنوان جایگاهی برای قرار گرفتن منو، لوگو، توضیح کوتاه و مواردی از این دست استفاده میشود.
<header>
</header>
-
footer
تگ footer هم کاربرد مشابهی با تگ header دارد؛ با این تفاوت که در قسمت پایینی صفحه قرار میگیرد.
<footer>
</footer>
-
div
با استفاده از تگ div میتوانید قسمت‌های مختلف وبسایت مانند هدر، مطالب اصلی و فوتر را از هم جدا کنید.
<div>
</div>
-
h1، h2، h3، h4، h5 و h6
از تگ‌های h1 تا h6 میتوان برای عنوان‌بندی مقاله یا هر محتوای دیگری استفاده کرد. قوانین بدین صور ت است که h1 عنوان است و از h2,h3 پشتیباین میکند و h2 نیز از h1 , h3 پشتیبانی میکند و…
-
img
از تگ img میتوانید برای اضافه کردن یک تصویر یا عکس در صفحه وب خود استفاده کنید
-
تگ area در HTML
تگ area تگی است که ما با استفاده از آن میتوانیم یک ناحیه ( یا محدوده ) قابل کلیک را در یک نقشه تصویری ایجاد نماییم. ( نقشه تصویری به یک عکس که قسمت های مختلف آن قابل کلیک شدن باشد گفته می شود )
<map name=”planetmap”>
<area shape=”rect” coords=”0,0,82,126″ href=”files/sun.html” rel=”alternate”>
</map>
-
ol
برای ایجاد لیست های متنی نامنظم
<ol>
</ol>
-
ul
برای ایجاد لیست های متنی منظم
<ul>
</ul>
-
تگ Table در HTML
تگ table همونطور که از اسمشم مشخصه تگی است که با استفاده از آن میتوان یک جدول را در یک صفحه وب ایجاد کرد،
<table>
</table>
-
تگ Form در HTML
تگ form همونطور که از اسمشم مشخصه با استفاده از اون میتونیم یک یا چندین فرم رو در یک صفحه ی وب ایجاد کنیم.
<form>
</form>
نتیجه گیری
در پایان این مقاله، میتوانیم نتیجه‌گیری‌ای مهم و کاربردی از آن برسانیم. تگها و متا تگها به عنوان اجزای اساسی وبسایتها، نقش مهمی در بهبود سئو و جذب ترافیک دارند. با استفاده صحیح از تگ‌های ساختاری مانند تگ‌های عنوان، پاراگراف و لیست‌ها، محتوای وبسایت بهینه‌تر و قابل فهم‌تر برای موتورهای جستجو و کاربران میشود.
از طرف دیگر، متا تگها اطلاعات ارزشمندی را درباره محتوا، کلمات کلیدی و توضیحات فراهم میکنند که به موتورهای جستجو کمک میکند تا وبسایت را بهتر شناسایی کنند و در نتایج جستجو نمایش دهند. متا تگ‌های توضیحات باعث افزایش کلیک‌ها و بازدیدها میشوند و متا تگ‌های کلمات کلیدی به موتورهای جستجو کمک میکنند تا موضوعات اصلی و مهم وبسایت را شناسایی کنند.
در انتها، میتوانیم به اهمیت یادگیری و بهره‌برداری بهینه از انواع تگها و متا تگها تاکید کنیم. با آشنایی کامل با این عناصر و اجرای صحیح آنها در وب‌سایت‌های خود، میتوانید بهبود قابل توجهی در سئو و نمایش در نتایج جستجوی موتورهای جستجوی رقابتی بدست آورید. پس با اطمینان و دقت به این ابزارها پرداخته و وبسایت خود را به یک منبع جذاب و قابل توجه برای کاربران تبدیل کنید
سوالات متداول
از کجا میتوانیم تگ های html و متا تگ در head یا body را مشاهده کنیم؟
روی صفحه مرورگر و راست کلیک کرده و گزینه ctrl+u را میزنیم کدها قابل نمایش هستند
تفاوت meta robots و robots.txt
از نظر عملکردی مشابه اند ولی عملکردشون متفاوته
فایل robots.txt یک فایل متنی هست که برای کل سایت اعمال میشود و به گوگل میگوید کدام صفحات را خزش کند و کدام یک را خزش نکند
تگ meta robot یک تکه تگ است که اضافه میشود به تگ هد <head> هر صفحه و به گوگل میگوید به چه شکل این صفحه را کرال و ایندکس بکند
روش حذف متا تگ ها و تگ های html استفاده شده در وردپرس
برای اینکار وارد پوشه قالب سایتتان شده و فایل functions. php را ویرایش کنید.
تفاوت تگ، برچسب و متا تگ چیست؟
در زبانهای مختلف برنامهنویسی و به ویژه در محیط وب، اصطلاحاتی چون “تگ”، “برچسب” و “متا تگ” به کار میروند که هر کدام نقشها و کاربردهای مختلفی دارند. در زیر تفاوت این اصطلاحات را توضیح میدهم:
-
تگ (Tag): در زبانهای نشانهگذاری مانند HTML و XML، تگها نشاندهندهٔ نقاط مختلفی در متن هستند که به مرورگر یا دیگر برنامهها میگویند چگونه محتوای داخل آنها نمایش داده شود. به عبارت دیگر، تگها دستوراتی برای مرورگر یا پارسرها هستند تا ساختار و نمایش محتوای متنی یا چندرسانهای را تعیین کنند.
-
برچسب (Tag): اصطلاح “برچسب” به طور کلی به هر نوع نشانه یا علامت تعبیری میپردازد که در متنها یا کدهای مختلف استفاده میشود. به عنوان مثال، در زبانهای مختلف برنامهنویسی، برچسبها میتوانند برای تعریف توابع، متغیرها، شرطها و غیره استفاده شوند.
- متا تگ (Meta Tag): متا تگها اطلاعات مشخصی را درباره محتوای یک صفحه وب ارائه میدهند. این اطلاعات عمدتاً برای موتورهای جستجو یا دیگر سیستمها که با تحلیل محتوا سروکار دارند، مفید هستند.
آیا متا تگ های سئو همشون لازم و کاربردی هستند؟
بعضی از متا تگ ها منسوخ شدن مثل متا تگ کیورد ولی بعضی از متا تگ ها هم کاربردی هستند مثل متا تگ دیسکریپشن
افزودن متاتگ در صفحه اصلی به چه شکل است؟
برای فعال سازی متا تگ میتوان از 4 روش زیر استفاده کرد
- برای افزودن متاتگ در صفحه اصلی وردپرس، میتوانید از افزونه‌های متاتگ استفاده کنید. یکی از این افزونه‌ها “Yoast SEO” است که به شما این امکان را میدهد تا متاتگ‌های مختلفی را برای صفحه اصلی و سایر صفحات وبسایت خود تنظیم کنی
- همچنین، افزونه “All in One SEO Pack” نیز این امکان را به شما میدهد
- همچنین، میتوانید به صورت دستی متاتگ‌های مورد نیاز را در فایل
header.phpوردپرس اضافه کنید. برای این کار، ابتدا باید فایلheader.phpرا در پوشهwp-content/themes/your-theme/پیدا کرده و با استفاده از یک ویرایشگر متنی، کد متاتگ‌های مورد نیاز را در قسمت<head>اضافه کنید. - همچنین پلاگین “متا تگ ها ” را فعال کنید، بعد از فعال کردن موس را بر روی تنظیمات نگه دارید و بر روی meta tag inserter کلیک کنید با کلیک کرن بر روی آن به صفحه زیر منتقل می شوید. و میتوانید متا تگ مورد نظر را اضافه کنید
2 دیدگاه. ارسال دیدگاه جدید
مرسی من فک میکردم متا تگ همون تگه
سلام خیر
تگ (Tag): در زبانهای نشانهگذاری مانند HTML و XML، تگها نشاندهندهٔ نقاط مختلفی در متن هستند که به مرورگر یا دیگر برنامهها میگویند چگونه محتوای داخل آنها نمایش داده شود. به عبارت دیگر، تگها دستوراتی برای مرورگر یا پارسرها هستند تا ساختار و نمایش محتوای متنی یا چندرسانهای را تعیین کنند.
متا تگ (Meta Tag): متا تگها اطلاعات مشخصی را درباره محتوای یک صفحه وب ارائه میدهند. این اطلاعات عمدتاً برای موتورهای جستجو یا دیگر سیستمها که با تحلیل محتوا سروکار دارند، مفید هستند.