وبلاگ آموزشی پویاگستر

بهترین آموزش ها -کتب الکترونیک-اموزش آشپزی-آموزش فتوشاپ و ...

وبلاگ آموزشی پویاگستر

بهترین آموزش ها -کتب الکترونیک-اموزش آشپزی-آموزش فتوشاپ و ...

درس سوم: معرفی تگهای Meta و کاربرد آن

در ادامه ی بحث آموزش Html امروز تگ های Meta رو براتون آموزش میدم .

تگ های Meta بسیار فراوانند که ما در اینجا فقط به معرفی چند تا از اون ها که پرکاربرد هستند و شما به اون ها نیاز دارید می پردازیم :

جایگاه تگ Meta : تو درس قبلی یه اشاره به جایگاه تگ های Meta کردم . اگه درس ها رو دنبال کرده باشید من گفتم که تگ های Meta در بین تگهای Head قرار میگیرند. به شکل زیر :

<head>

<Meta ....>

<Meta ....>
<title>عنوان صفحه</title>
</head>

همونطور که در بالا می بینید تگهای Meta بعد از تگ <head> و قبل از تگ <head/> اومدن .اگر چند تا تگ Meta به کار ببرید همشون در سطرهای زیر هم و در بین تگ های Head قرار میگیرن ...

انواع تگ های Meta : در اینجا من به سه نوع از تگ های Meta که بیشترین کاربرد رو دارن اشاره میکنم :

تگ متای توصیفی (Description meta Tags) :

در این گونه تگ های Meta شما در مورد صفحه ی وب ، وبلاگ و یا سایتتون توصیفی رو قرار میدین . شاید بپرسید که این به چه دردی می خوره ؟ خوب باید بگم که موتور های جستجوگر نظیر Google و Yahoo به این تگ اهمیت میدن . یعنی هنگام جستجو کردن ، توصیف درون این تگ رو دریافت می کنن و در صورت مربوط بودن به کلمه ی جستجو شده اون صفحه رو در نتایج جستجو قرار میدن . این تگ و توصیفی که در اون می نویسید می تونه در افزایش آمار بازدیدتون خیلی مؤثر باشه . فقط باید توجه داشته باشید که توصیف بیش از حد در این تگ هیچ تاثیری در بالاتر بردن کارایی اون نداره . سعی کنید یه توصیف کوتاه و دقیق راجع به صفحه رو در اون بگذارید . این تگ به شکل زیره :

<META NAME="Description" CONTENT="توصیفی در مورد صفحه ">

تگ متای کلمات کلیدی (Keywords meta Tags) :

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

<META NAME="Keywords" CONTENT="واژه ها و کلمات کلیدی ">

تگ های متای HTTP-EQUIV :

این تگ ها از پرکاربرد ترین تگ های Meta هستند . اهمیت این تگ ها برای سایت های فارسی و کلا جاهایی که متن فارسی درون صفحه وجود داره خیلی زیاده . چون این تگ های متا به مرورگر می فهمونن که این یک صفحه به زبان فارسی هست و مرورگر اونو درست نمایش میده . شاید بعضی جاها دیده باشید که متن های فارسی به صورت خرچنگ قورباغه نمایش داده میشن . دلیلش اینه که از این تگهای متا در صفحه استفاده نشده . دو تا از این تگ های مهم به شکل زیرن :

اولی برای اینه که مرور گر زبان صفحه رو فارسی تشخیص بده . البته این تگ برای زبانهای مختلف کاربرد داره و من اینجا فقط فارسیشو گذاشتم . دومی هم نوع نمایش متون رو تعیین می کنه که اینجا به صورت UTF-8 هست که برای زبان فارسی مناسب ترینه .

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

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

<Meta name="Keywords" content="واژه ها و کلمات کلیدی ">
<title>عنوان صفحه</title>
</head>
<body>
قسمتی که نمایش داده می شود
</body>
</html>

:: ترتیب قرار گرفتن تگهای متا زیاد مهم نیست .

خوب عزیزان درس سوم هم تموم شد . امیدوارم تا اینجا با این مباحثی که توضیح دادم یه آشنایی مختصری با Html پیدا کرده باشید . من سعیم بر اینه که شما رو اول با همه ی تگهای Html آشنا کنم و بعد آموزش فرونت پیج رو هم بدم .

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

موفق و پیروز و سربلند و شاد و خوشحال و همیشه خندون باشید .

مصطفی احمدی سه‌شنبه 19 اردیبهشت‌ماه سال 1385 ساعت 06:17 ب.ظ

نظرات 1 + ارسال نظر

hamidrezamax چهارشنبه 13 دی‌ماه سال 1391 ساعت 04:42 ب.ظ http://pandal.loxblog.com

سلام و خسته نباشد
واقعا دمتون گرم بسیار مفید بود
من حدود 2 ساعت تمام مطالب مربوط به طراحی رو خوندم و یه مشتری ثابت براتون شدم
بازم در مورد طراحی توضیح بدین
ممنونم