گروه بندی محتوا + نکات کلیدی سئو
در این جلسه به آموزش دو بخش بسیار کلیدی و مهم و همچنین جذاب و پر کاربرد در زبان کد نویسی html یعنی گروه بندی محتوا + نکات کلیدی سئو خواهیم پرداخت, لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
عناصر<div> و <span> به شما اجازه می دهند تا برای ایجاد بخش ها و یا زیرمجموعه های یک صفحه، عناصر زیادی را با یکدیگر گروه بندی کنید. برای مثال ممکن است تمایل داشته باشید که تمام پاورقی ها را در یک صفحه در داخل عنصر <div> قرار دهید تا نشان دهید که تمام عناصر موجود در آن عنصر مربوط به پاورقی می باشند. پس از آن ممکن است طرحی را به عنصر<div> ضمیمه کنید، طوری که با استفاده از مجموعه ای از قوانین طراحی ظاهر شوند.
مثال
<!DOCTYPE html> <html> <head> <title>Div Tag Example</title> </head> <body> <div id="menu" align="middle"> <a href="/index.htm">HOME</a> | <a href="/about/contact_us.htm">CONTACT</a> | <a href="/about/index.htm">ABOUT</a> </div> <div id="content" align="left" bgcolor="white"> <h5>Content Articles</h5> <p>Actual content goes here.....</p> </div> </body> </html>
این مثال نتیجه ی زیر را تولید خواهد کرد
HOME | CONTACT | ABOUT
CONTENT ARTICLES
Actual content goes here…..
از طرف دیگر عنصر<span> فقط می تواند برای گروه بندی داخل خطی عناصر استفاده شود. بنابراین اگر بخشی از جمله یا پاراگراف را دارید که می خواهید با هم در یک گروه قرار دهید، می توانید از عنصر<span> مانند زیر استفاده کنید
مثال
<!DOCTYPE html> <html> <head> <title>Span Tag Example</title> </head> <body> <p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p> </body> </html>
این مثال نتیجه ی زیر را تولید خواهد کرد
This is the example of span tag and the div tag alongwith CSS
این برچسب ها عموما با CSS استفاده می شوند تا به شما اجازه دهند طرحی را به بخشی ازیک صفحه ضمیمه کنید.
گروه بندی محتوا + نکات کلیدی سئو
HTML در Meta Tag
HTML علاوه بر مشخص کردن اطلاعات مهم به روش های مختلف در مورد یک داکیومنت، به شما اجازه می دهد تا متادیتا را نیز مشخص کنید. عناصر META می توانند برای وارد کردن جفت مقدار / نام استفاده شوند، این جفت ویژگی های داکیومنت HTML مانند نویسنده، تاریخ اتمام، لیست کلمات کلیدی، داکیومنت نویسنده و غیره را ارائه میدهد. برچسب <meta> برای ارائه ی چنین اطلاعات اضافه ای استفاده می شود. این برچسب یک عنصر خالیست و دارای برچسب بستن نیست اما اطلاعاتی را با ویژگی آن در خود دارد. شما می توانید بر اساس اطلاعاتی که می خواهید در داکیومنت خود نگهداری کنید، یک برچسب یا بیشتر از یک برچسب متا وارد داکیومنت خود کنید. اما به طور کل برچسب های متا وضعیت ظاهری داکیومنت را تحت تاثیر قرار نمی دهند، بنابراین از لحاظ ظاهری استفاده کردن یا نکردن از آنها مشخص نمی شود.
افزودن برچسب های متا به داکیومنت ها
شما می توانید با قرار دادن برچسب های <meta> در داخل تیتر داکیومنت که با برچسب های <head> و <head/> مشخص می شوند، متا دیتا را به صفحات وب خود اضافه کنید. یک برچسب متا علاوه بر ویژگی های مرکزی، می تواند دارای ویژگی های زیر نیز باشد
۱ . Name
نام برای پراپرتی، می تواند هر چیزی از جمله کلمات کلیدی، توصیفات، نویسنده، تولید کننده و غیره باشد.
۲ . content
مقدار ویژگی را مشخص می کند
۳ . scheme
نموداری را برای توضیح مقدار ویژگی مشخص می کند. (همانطور که در محتوی ویژگی مشاهده کردید.)
۴ . http-equiv
برای تیترهای پیام پاسخ http استفاده می شود. برای مثال equiv-http می تواند برای تازه سازی صفحات یا تنظیم یک cookie استفاده شود. مقادیری مانند نوع محتوا، اتمام، تازه سازی و تنظیم cookie.
مشخص کردن کلمات کلیدی
می توانید از برچسب <meta> برای مشخص کردن کلمات کلیدی مربوط به داکیومنت استفاده کنید، و پس از آن این کلمات توسط موتورهای جستجو استفاده می شوند، و صفحه ی وب شما را به هدف جستجو ایندکس می کنند.
مثال
در این مثال برچسب های متا، متادیتا و HTML را با عنوان کلمات کلیدی در مورد داکیومنت وارد می کنیم.
<!DOCTYPE html> <html> <head> <title>Meta Tags Example</title> <meta name="keywords" content="HTML, Meta Tags, Metadata" /> </head> <body> <p>Hello HTML5!</p> </body> </html>
این مثال نتیجه ی زیر را به دنبال دارد
Hello HTML5!
توصیف داکیومنت
شما می توانید از برچسب <meta> برای توصیف داکیومنت استفاده کنید. این برچسب نیز می تواند توسط موتورهای مختلف جستجو مورد استفاده قرار بگیرد، در حالیکه صفحه ی وب شما را به هدف جستجو ایندکس می کند.
مثال
<!DOCTYPE html> <html> <head> <title>Meta Tags Example</title> <meta name="keywords" content="HTML, Meta Tags, Metadata" /> <meta name="description" content="Learning about Meta Tags." /> <meta name="revised" content="Tahlildadeh, 3/7/2014" /> </head> <body> <p>Hello HTML5!</p> </body> </html>
تازه سازی داکیومنت
یک برچسب <meta> می تواند برای مشخص کردن دوره ای که پس از آن صفحه ی وب شما به طور خودکار بازسازی می شود، استفاده شود.
مثال
اگر می خواهید صفحه ی وب شما پس از هر ۵ ثانیه ریفرش شود، از ترکیب زیر استفاده کنید
<!DOCTYPE html> <html> <head> <title>Meta Tags Example</title> <meta name="keywords" content="HTML, Meta Tags, Metadata" /> <meta name="description" content="Learning about Meta Tags." /> <meta name="revised" content="Tahlildadeh, 3/7/2014" /> <meta http-equiv="refresh" content="5" /> </head> <body> <p>Hello HTML5!</p> </body> </html>
Redirect کردن صفحه
می توانید از برچسب <meta> برای Redirect کردن صفحه ی خود استفاده کنید، همچنین می توانید دوره ای را مشخص کنید که پس از آن صفحه به طور خودکار Redirect شود.
در این مثال صفحه ی جاری پس از ۵ ثانیه به صفحه ی دیگر Redirect می شود. اگر می خواهید صفحه فورا Redirect شود، هیچ محتوایی برای آن مشخص نکنید.
<!DOCTYPE html> <html> <head> <title>Meta Tags Example</title> <meta name="keywords" content="HTML, Meta Tags, Metadata" /> <meta name="description" content="Learning about Meta Tags." /> <meta name="revised" content="Tahlildadeh, 3/7/2014" /> <meta http-equiv="refresh" content="5" url=http://www.tahlildadeh.com" /> </head> <body> <p>Hello HTML5!</p> </body> </html>
ممنون که در این جلسه هم با ما همراه بودید در این جلسه به یادگیری گروه بندی محتوا + نکات کلیدی سئو پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید.
دیدگاه ها