تگ ها و هدینگ ها چه کاربردی دارند و برای قرار دادن لوگو در h1 چه کاری باید انجام داد. این مسائل موضوعاتی هستند که در این محتوا قصد بررسی و آموزش آن‌ها را داریم. در واقع تگ h1 برای کسانی که به دنبال ارتقا سئو سایت خود هستند اهمیت بسیار زیادی دارد چرا که در واقع این هدینگ به منزله در ورودی سایت می‌باشد. مسلما یک ورودی زیبا و مجلل می‌تواند کاربران بیشتری به خود جذب کند. پس در ادامه با ما باشید تا نکات مهم و مرتبط را بررسی کنیم.
هدینگ h1 یا تگ هدر چیست؟
در واقع هدینگ ها یا تگ ها در سئو و نوشتن محتواهای مجازی مانند تیترها در روزنامه و مجلات هستند. در واقع کاری که تیترها یا هدینگ ها انجام می‌دهند این است که محتواهای طولانی را تقسیم بندی می‌کنند. تقسیم بندی بلوک‌های طولانی محتوایی این ویژگی را دارد که استفاده از آن محتوا را آسان‌تر می‌کند و مخاطب را ترغیب می‌نماید تا خواندن محتوا را ادامه دهد. تگ h1 معمولا عنوان محتوای شما می‌باشد که به شکل بلدتر و متفاوت‌تری نسبت به کل محتوای شما نگارش می‌شود. عنوان می‌تواند یک جمله خبری یا سوالی باشد که حاوی کلمه‌ی کلیدی اصلی شما می‌باشد.
بیایید در باب اهمیت هدینگ ها یک مثال بزنیم. فرض کنید شخصی در یک موقعیت اضطراری به دنبال جواب یک سوال می‌گردد که پاسخ آن سوال را می‌تواند در سایت شما پیدا کند. وی وارد سایت می‌شود و با حجم عظیمی از مطالبی مواجه می‌گردد که هیچ سازمان دهی ای پیدا نکرده در نتیجه بدون این که جواب سوال را پیدا کند و احتمالا با کمی عصبانیت سایت را ترک می‌کند. ولی اگر محتوای سایت شما با تیترها یا هدینگ های جذابی سازمان دهی شده باشد هر کسی و با هر نوع نیازی می‌تواند از سایت شما بازدید کند و از مطالب بهره ببرد. در سال‌های اخیر خیلی از ترندهای سئو تغییر کرده‌اند در حالی که h1 کماکان یکی از اصلی‌ترین نکات می‌باشد.
پیشنهاد می کنیم مقاله آموزش قرار دادن عکس در گوگل ارث را مطالعه نمایید
چگونه می‌توان از تگ h1 در سایت استفاده کنیم؟
سیستم‌های مدیریت محتوا مانند وردپرس کار را برای کاربران خود راحت کرده است و حتی ممکن است که شما بدون این که خودتان متوجه باشید در حال استفاده از تگ ها باشید. برای چک کردن این که آیا در حال حاضر از تگ ها استفاده می‌کنید یا نه مطابق با این مراحل جلو بروید.
1- ابتدا یکی از صفحات سایت خود را که در آن محتوا دارید در مرورگر مورد نظرتان باز کنید.
2- کلیدهای ترکیبی ctrl و U را با هم بفشارید تا تب جدیدی با کدهای HTML برایتان باز شود.
3- حال با کلیدهای ترکیبی ctrl و F منوی جست و جو را باز کنید و عبارت h1 را سرچ نمایید. اگر نتایجی پیدا شد و h1 ها هایلایت شدند سایت شما از تگ h1 استفاده می کند.
4- می‌توانید این کار را با تگ های h2 و h3 نیز ادامه دهید.
اگر این تگ را نداشتید و از برنامه‌های مدیریتی استفاده می‌کنید باید با کمک تنظیمات مخصوص همان نرم افزار تگ h1 را اضافه نمایید. اگر از این نرم افزارها استفاده نمی‌کنید باید به شکل دستی این کار را انجام دهید. برای این کار تنها کافی است که به بخش ویرایشگر کد بروید و موقعیتی که باید تگ h1 بدان افزوده شود را بیابید. یادتان باشد که این بخش باید بین تگ body و تگ p باشد. حال تنها لازم است که عبارتی همچون عبارت زیر را به آن اضافه کنید:
>h1>This is My Header Tag</h1>
حال باید فایل جدید HTML را ذخیره و آپلود کنید تا پس از رفرش تگ ها درست شده باشند.
آموزش قرار دادن لوگو در h1
هدینگ h1 نباید خسته کننده باشد. یکی از راه‌هایی که شما می‌توانید به آن جذابیت دهید استفاده از لوگوها، علائم و استفاده از رنگ‌ها و فونت‌های خاص در آن‌ها می‌باشد. در ادامه می‌خواهیم به آموزش قرار دادن لوگو در h1 به زبانی ساده و قابل فهم بپردازیم.
استفاده از نرم افزارهای مدیریتی وردپرس برای قرار دادن لوگو در h1
کسانی که از این نرم افزار استفاده می‌کنند کار دشواری را پیش رو ندارند. در ابتدا افزونه‌ی Schema را از گوگل دانلود کنید. پس از دانلود، نصب و راه اندازی افزونه یک منو تحت عنوان Schema در کنار سایر منوهای وردپرس شما ایجاد می‌شود. در قسمت لوگو تنظیمات این افزونه می‌توانید عکس مورد نظر خود را که شامل لوگو مورد نظر شما می‌شود را آپلود نمایید. با این کار این افزونه به شکل خودکار کدهای مورد نیاز برای نشانه گذاری های مربوطه را به سایت شما اضافه می‌کند. پس از مدتی ک این کدها توسط گوگل شناسایی و تایید شد لوگو شما در جست و جوی کاربران به نمایش گذاشته می‌شود.
قرار دادن لوگو در h1 بدون استفاده از نرم افزارهای مدیریتی
اگر از نرم افزاری استفاده نمی‌کنید باید کدهایی را که نرم افزارها به شکل خودکار ایجاد می‌کنند را به شکل دستی وارد کنید. این کار اگرچه در ابتدا برای افراد مبتدی سخت به نظر می رسد اما با کمی کار کردن بسیار راحت می‌شود. در ادامه به ذکر تمام کدهای مربوط به آرایش هدینگ می‌پردازیم تا شما بتوانید از هر کدام که می‌خواهید استفاده نمایید.
برای استفاده از فونت‌های مختلف می‌توانید از خاصیت font-family استفاده نمایید و فونت مورد نظر خود را به آن بیفزایید. فونت مورد ما Tahoma است که به این شکل اضافه می گردد.
h1{
font-family: Tahoma;
}
بعد با توجه به فارسی بودن تیتر باید آن را راست چین کنیم که برای این کار از خاصیت direction با مقدار rtl استفاده می‌کنیم.
h1{
font-family: Tahoma;
direction: rtl;
}
حالا که متن به راست منتقل شده احتمالا به هدر چسبیده است که برای جدا کردن آن از margin-right با مقدار 30 پیکسل استفاده می‌کنیم.
h1{
font-family: Tahoma;
direction: rtl;
margin-right:30px;
}
حال می‌توانید با کمک خاصیت font-size سایز نوشته‌های خود را تغییر بدهید که در مثال ما از مقدار 1.7 برابر استفاده شده است.
h1{
font-family: Tahoma;
direction: rtl;
margin-right:30px;
font-size: 1.7em;
}
اگر دوست دارید که هدر و تگ h1 شما در وسط قرار بگیرد باید از margin-top، 50 پیکسل استفاده نمایید.
h1{
font-family: Tahoma;
direction: rtl;
margin-right:30px;
font-size: 1.7em;
margin-top: 50px;
}
حال می‌توانید با کمک color رنگ مورد نظر خود را اعمال کنید که برای این کار شما نیاز به کد رنگ دارید که برای گرفتن این کد می‌توانید از فتوشاپ نیز استفاده کنید.
h1{
font-family: Tahoma;
direction: rtl;
margin-right:30px;
font-size: 1.7em;
margin-top: 50px;
color: #000000;
}
حال برای قرار دادن لوگو در h1 باید یک id به نام لوگو بسازید. برای این کار به قسمت body سند اچ تی ام ال بروید و یک <div> در قسمت هدر بسازید و id خود را در برابر logo قرار دهید:
<div id=”header”>
<h1>موضوع وبسایت</h1>
<div id=”logo“></div>
</div>
شما باید از خاصیت background-image استفاده کنید. در ابتدا عکس خود را در یک سایتی که لینک مستقیم می‌دهد آپلود کنید و سپس آدرسی را که به شما می‌دهد در قسمت url درج نمایید. به طور مثال
#logo{
background-image: url(http://s3.picofile.com/file/7503626769/1q.png);
}
حال باید مشخصات و طول و عرض لوگو را مشخص نمایید.
#logo{
background-image: url(http://s3.picofile.com/file/7503626769/1q.png);
width: 128px;
height: 128px;
}
برای این که لوگو در جای مناسبی از هدر قرار بگیرد باید آن را در هدر شناور کنیم. برای این کار از float در دو مقیاس right یا left استفاده می شود.
برای این کار ابتدا به استایل h1 می‌رویم و float را در حالت right قرار می‌دهیم
h1{
font-family: Tahoma;
direction: rtl;
margin-right:30px;
font-size: 1.7em;
margin-top: 50px;
color: #000000;
float: right;
}
و بعد به استایل لوگو می‌رویم و float را در حالت left قرار می‌دهیم.
#logo{
background-image: url(http://s3.picofile.com/file/7503626769/1q.png);
width: 128px;
height: 128px;
float: left;
}
برای فاصله گرفتن لوگو از سمت چپ نیز از margin استفاده می‌کنیم
#logo{
background-image: url(http://s3.picofile.com/file/7503626769/1q.png);
width: 128px;
height: 128px;
float: left;
margin-left: 10px;
margin-top: 10px;
}
اگر بخواهید که لوگو به شکل لینک دار باشد کافی است که <a> را به قبل از تگ div اضافه کنید مانند:
<a href=”www.javaweb.blogsky.com”> <div id=”logo”></div> </a>
اگر چه در ابتدا ممکن است که کدها بسیار گیج کننده و سخت به نظر برسند اما ما تلاش خود را کرده‌ایم که به ساده‌ترین شکل ممکن قرار دادن لوگو در h1 و به طور کلی ویرایش هدینگ h1 را بدون نرم افزار به شما آموزش دهیم.
