آموزش Html – جلسه دوم ( بخش HEAD )

در این جسله از آموزش HTML می خواهیم تگ HEAD و هر آنچه که درون آن قرار می گیرد و کاربرد آن را به شما آموزش دهیم.

همان طور که در مطلب گذشته گفته شد HTML از دو قسمت مهم تشکیل شده است ، body برای نمایش و ظاهر سایت و head برای معرفی سایت.

تگ HEAD در HTML :

هیچ کدام از کد هایی که در داخل head نوشته می شود به کاربران نمایش داده نمی شود  در حقیقت این بخش در ظاهر سایت دخالتی ندارد و کابرد آن معرفی سایت و محتوای آن است (برای موتورهای جست و جو و مرورگرها) و هم چنین تاثیر زیادی در سئو سایت دارد. این بخش از اهمیت بسیار بالایی برخوردار است و برای سایت یک الزام است.

 SEO یا بهینه سازی موتور جستجو برگرفته از عبارت Search Engine Optimization است.به معنای کمک کردن به بهبود رویت و ارتباط وب سایت‌ها در نتایج جستجوی طبیعی با هدف رسیدن به رتبه‌بندی بالا، ایجاد شده‌اند.

 

head در html

 

عناصر موجود در داخل head :

۱- تگ title :یکی ار مهم ترین تگ های موجود در head می باشد هم برای کاربران و از آن مهم تر برای موتورهای جست و جو. در حقیقت شما با این تگ به کاربران و موتورهای جست جو اطلاعات کوتاهی دربارهی محتوای سایت خود می دهید. محتوای این تگ در title bar مرورگر ها نمایش داده می شود و عنوان سایت شما در نتایج جست و جو خواهد بود.اولین چیزی که در موتورهای جستجو مورد بازبینی قرار میگیرد، تگ تایتل است.

توجه : سعی کنید به جای طولانی کردن متن title آن را کوتاه و مفید بنویسید و ار کلماتی استفاده کنید که بتواند سایت شمارا بهتر معرفی کند.

 

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

 

<title>عنوان سایت</title>

 

۲- meta تگ ها :

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

  • Description : متا تگ توضیحات است و توضیحی در مورد صفحه یا وب سایت می باشد که در نتایج گوگل زیر عنوان نتایج قرار میگیرد( پایین آدرس سایت در نتایج جستجو نوشته میشود ) و در بین متا تگ های دیگر جزو مهم ترین متاها به شمار می آید و از اهمیت بالایی برخور دار است. بهتر این است جملاتی که در این تگ استفاده می کنید برگرفته ار کلماتی باشد که در متا تک keywords استفاده شده.شما مجاز به نوشتن حداکثر ۲۵۵ کاراکتر در این متا هستید ولی توصیه می شود که بیش از ۱۶۰ کاراکتر استفاده نشود.
    نکاتی که در این تگ باید رعایت شود:
    ۱- متن مبهم و کلی نباشد.
    ۲-یا کلمات کلیدی متن را پر نکنید.
    ۳-متن صفحه را در متا تگ کپی نکنید.
    در گذشته این تگ تاثیر زیادی بر روی رتبه بندی داشت، اما با تغییرات و آپدیت های الگوریتم رتبه بندی از تاثیر آن کاسته شد. اما همچنان کاربردی است زیرا در صفحات حاصل از جستجو در موتورهای جستجو از آنها استفاده میشود.
<meta name="description" content=”سلوشنز راهکارهای مبتنی بر آی تی" >

 

 

  • Keyword : در این متا تگ شما میتوانید چند کلمه کلیدی در رابطه با محتوای صفحه را قرار دهید. یکی از متاتگ هایی که در افزایش سئو و بهینه سازی کاربرد دارد . در این قسمت برای جدا کردن کلید واژه ها از یکدیگر از علامت کاما استفاده کنید.
    نکات مهم در این متا تگ :
    ۱-حالت مفرد و جمع کلمات کلیدی را بنویسید.
    ۲- بر اساس اولویت بندی نوشته شود (موارد مهم ابتدا نوشته شود)
    ۳- از تکرار بیش از ۲ بار یک کلمه بپرهیرید
    ۴- برخی از کلمات با املایی غلط جستجو می شوند، حالت های رایج غلط املایی کلمات کلیدی خود را در اینجا قرار دهید.
<meta name="keywords" content="سلوشنز,راهکار," >

 

 

  • Utf-8 : از این متا تگ برای معرفی encoding محتوای صفحه استفاده میشود(متاتگ فارسی سازی). برای نمایش بهتر صفحات توسط مرورگرها و جلوگیری از حدس زدن encoding توسط مرورگر بهتر است از این تگ همیشه استفاده کنیم. این تگ نقشی در سئو بازی نمیکند. در صورت استفاده ننمودن از این متاتگ و encoding utf-8 ، در بعضی از مرورگرها و یا سیستم های کاربرانی که encoding فارسی ندارند ، متن های فارسی به صورت علامت سوال (؟) نشان داده می شوند.این تگ باید اولین خط کد در head باشد حتی قبل از title.
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'/>
<meta charset="utf-8" />

 

  • Language : این متاتگ  برای دسته بندی زبانی برای موتورهای جستجوگر می باشد و توصیه می شود استفاده گردد .از نظر سئو این تگ ارزشی ندارد اما گوگل و بینگ در صورت وجود نداشتن آن هشدار میدهند .

 

<meta http-equiv="content-language" content="fa" />
<html lang="fa">

 

  •  refresh : با استفاده از این تگ شما میتوانید به مرورگر دستور دهید که صفحه را بعد از گذشت مدتی دوباره refresh کند یا به صفحه ی دیگری هدایت شود.

 

<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="30;URL='http://solutionz.ir'">

 

  • ROBOTS : (متاتگ روبوت های جستجوگر ) متاتگ Robots برای کنترل ایندکس کردن صفحه توسط موتورهای جستجوگر می باشد. این متا تگ  نحوه دسترسی و عملکرد کرالرهای موتورهای جستجو بر روی صفحات وب را مدریت می کند.تاثیر این متا تگ در سئو به این دلیل هست که شما میتوانید با استفاده از آن از کرال و ایندکس شدن محتوای تکراری جلوگیری کنید. منظور از محتوای تکراری زمانی است که یک صفحه دارای دو یا چند URL باشد اگر جلوی ایندکس شدن URL های اضافی گرفته نشود رتبه آن صفحه بین URL های تکراری تقسیم میشود.۳ حالت برای این تگ وجود دارد :
    ۱- موتورهای جستجوگر  مجاز به ایندکس کردن صفحه و لینک ها هستند
    ۲-  به موتورجستجوگر اعلام می کنیم که صفحه را ایندکس کند ولی لینک ها را دنبال نکند.
    ۳- از ایندکس جلو گیری می کنیم

هر سه حالت به ترتیب در زیر آمده است :

< meta NAME="ROBOTS "CONTENT="ALL" />
< meta NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW" />
< meta NAME="ROBOTS" CONTENT="NONE" />

 

۳- تگ  style : از این تگ برای مشخص کردن شکل ظاهری تگ ها استفاده می شود.( CSS مربوط به هر تگ داخل این تگ نوشته می شود ). یکی از حالت های CSS دهی به تگ ها می باشد که در قسمت هد نوشته می شود ( تو صیه می شود برای استایل دهی از لینک خارجی استفاده شود برای مطالعه بیشتر در این باره به این مطلب مراجعه کنید ) .

<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>

 

۴- تگ link : تگ لینک برای برقراری ارتباط بین صفحه جاری و یک صفحه یا فایل خارجی مورد استفاده قرار می گیرد.( برای وارد کردن منابع خارجی به صفحات وب استفاده می شود.مانند وارد کردن css ها یا js ها به صفحات وب. ).  این تگ می تواند به دفعات دلخواه و برای مقاصد مختلف ، در قسمت Head مورد استفاده قرار بگیرد.

خصوصیات این تگ  عبارت اند از :

  • type : نوع لینک را مشخص می کند
    text/css : از نوع متن CSS .
    text/javascript : از نوع متن با زبان javascript .
    text/vbscript : از نوع متن  با زبان vbscript .
    text/asp : از نوع متن  با زبان ASP .
    text/xml : از نوع متن با زبان XML .
    image/gif : از نوع تصویر و با پسوند gif .
  • charset : کاراکترها را برای سند لینک شده کد گذاری می کند. ولی در html5 پشتیبانی نمی شود.
  • href : آدرس کامل اینترنتی صفحه یا فایل مقصد پیوند را تعیین می کند . الزامی و مهم است.
  • rel : الزامی است. رابطه بین سند کنونی و سند لینک شده را مشخص می کند.
    مقادیر آن:
    stylesheet  ، author ، bookmark ، archives ، alternate و ..

 

< link rel="stylesheet" type="text/css" href="URL" />

 

 

۵- تگ base : این تگ یک آدرس پایه برای کلیه لینک های موجود در صفحه تعیین می کند . اگر این تگ در قسمت head  نوشته شود درصورت لینک دادن در داخل صفحه وب آدرس بعد آن را می نویسیم (مثلا در head  آدرس  base را تا پوشه x وارد کردیم و میخواهیم یک عکس از داخل آن را در صفحه لینک کنیم که در این صورت فقط آدرس بعد از  پوشه x  را وارد میکنیم )

< base href="http://solutionz.ir/Gif/" target="_blank" />

۶- تگ Script : از تگ  script  برای قرار دادن یک اسکریپت ( برنامه های نوشته شده توسط زبان های برنامه نویسی اسکریپتی مثل Java Script , VB Script ) درون صفحات HTML استفاده می شود

< script type="text/javascript" src="js/myJavaScript.js" >
< /script >

 

 

۷- تگ های  Author ،Generator ،Designer :

از این تگ ها برای معرفی تویستده ، طراح و بروز کننده استفاده می شود.

 

< meta http-equiv="Designer" content="نام طراح سند" />
< meta name="Generator" content="نام سازنده سند" />
< meta name="Author" content="نام بروز کننده" />
نگارش و انتشار توسط ابراهیم عادلی

فعال در زمینه های : طراحی رابط کاربری UI ، توسعه و طراحی وب ، تولید محتوی مارکتینگ گوگل

دیدگاه شما

ایمیل شما نزد ما محفوظ خواهد بود.