網頁設計教學系列-常用meta標籤介紹

上次因為一次聚會,聊到這個meta的部分,自己很常用一些meta的部分,像是keywords,description等,這些是很常用的部分,每個網頁都很需要,最近做了一下功課,有些meta的語法我們還是必須要知道,以便在不同的網站,寫上不同的meta,一起來看看今天這篇文章!

寫這個meta,其實對seo也有相當大的幫助,關鍵字下的對,有時候很容易找到你的網站,不過有時候很多台灣網站,像description和keywords都打一模一樣,這兩個其實有相當大的差別,讓DOUBLE冠來介紹一下用法,

網頁描述語法<meta name="description" content="" />

大致上的架構就像我標題那樣,正確用法大概像下面這樣,

<meta name="description" content="今天主題是分享HTML META標籤語法" />

這個等於你的副標一樣意思,等同要描述一個人大概的樣子,寫這個語法主要描述大概網頁主方向,描述這個是什樣的網頁。

網頁描述關鍵字<meta name="keywords" content="" />

這個用法像下面這樣,

<meta name="keywords" content="HTML,META,SEO" />

你必需幾個關鍵字來描述這個網站,舉個例子,意思就像我想羅志祥,它就是"帥,會跳舞,亞洲舞王"之類的,所以以這篇文章來講,keywords等於就是 html,meta,SEO,大家應該就知道意思了,這邊要跟大家講一下,keywords裡面的content,逗號要用",",而不是","這樣喔!

網路隱私搜尋設定<meta name="robots" content="" />

有時候自己設定讓搜尋蜘蛛搜尋某些地方,大致上像這樣子,

<meta name="robots" content="index,follow" />
<meta name="robots" content="noindex,follow" />
<meta name="robots" content="index,nofollow" />
<meta name="robots" content="noindex,nofollow" />

noindex:不要檢索。

nofollow:只檢索該頁,不檢索該頁裡的鏈結。

noindex, nofollow:搜尋引擎的小蜘蛛到這裡時,就會停止,不作任何的檢索。

網站作者名字<meta name="author" content="" />

這個寫法就是在寫網站作者的名字,

<meta name="author" content="DOUBLE冠" />

網頁編碼

大致上用這樣就可以,

<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />

用來生成網站工具

你的網站用什麼來做的

<meta name="Generator" contect="wordpress 3.3.1″ />

網站版權宣告

<meta name="copyright" content="DOUBLE冠就是愛升級版權所有" />

以上大致上就是常用的meta語法,這邊分享給大家啦,最後分享DOUBLE冠的網路搜尋到樣子,

還有原始碼,看了剛剛那些介紹,應該就很清楚了!

原始碼

 

熱門相關文章

網頁設計教學系列-做出在兩個不同解析度所呈現出來的效果!
今天要分享的東西,可能從標題看不太出來在講什麼樣的意思,這邊今天要講的,就是網頁設計的爸爸和小孩,也就是父區塊和子區塊,有時候在1024X768看到的是子區塊,在1366X768看見的是父區塊和子區塊的結合,這樣做的好處就是不會在不同解析度下,所呈現出來的感覺不會差太多,讓我們來看看今天的教學! 比如我們今天看到一個部落格網站長這樣子,這是1024X768的解析度畫面, 不過在其他的寬螢幕和筆電可能是這樣子,比如1366X768,   或許是現在圖片尺寸關係,所以有點看不出來,不過如果在做網頁如果遇到不同解析度的話,是件麻煩問題,所以通常我們都會設父區塊和子區塊,比如今天我們設一個父區塊和子區塊, 之後我們在為這兩個區塊寫上CSS背景顏色,這邊是原始碼, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" ...
繼續閱讀
網頁設計教學系列-HTML5語法分享!
今天要介紹的東西,就是最近還滿夯的HTML5,這篇只是從一些基礎的東西開始分享,大概了解基本的觀念而已,之後如果學到更多好玩的東西,再一次分享給大家,不過昨天這樣摸一摸,還滿佩服賈伯斯所帶來當的創意,雖然HTML5還沒有真正完全到答一個標準,不過我想這是遲早的趨勢,一起來看! 比如我們呈現效果像下圖這樣,以前用HTML4語法也很簡單,就很多區塊設DIV就行了,這邊要分享HTML5的寫法, HTML5文件檔頭簡單設定 以往我們熟悉的HTML語法,剛開始文件一開頭都會這樣寫, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 但HTML5的文件一開頭寫法相當簡單,只要像下圖這樣寫就可以 <!DOCTYPE html> 寫法變得相當簡單, 我們從WORDPRESS預設佈景也看到是這樣子寫的 <!DOCTYPE ...
繼續閱讀
網頁設計教學系列-CSS+DIV排版-1
今天要分享的東西,也是網頁設計很基本的排版設計,以WORDPRESS來看,就是一塊header+content+sidebar+footer的一種排版方式居多,所以今天這裡要先介紹基本類似的兩欄式排版方式,先從基礎的學起,以後在用其它東西時,會比較得心應手,話不多說,馬上開始今天的排版教學! CSS排版教學 CSS+DIV排版 首先我們來看我們想要達到的效果,這是預覽CHROME17的畫面, HTML原始碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" ...
繼續閱讀
網頁設計教學系列-用HTML5語意標籤排成三欄版的
最近都在學這個部分,所以有學到什麼,就開始分享什麼啦,今天分享的也是排版系列,因為我覺得不管學任何一個套件軟體,基本的排版你還是要有些概念存在,不然到時候就算架WORDPRESS,結果CSS部分都不太懂,這樣也不是說很好,所以一起來看看今天的教學吧! HTML5排版 比如今天我們想要排成這樣子, 寬螢幕的CHROME是這樣子, 這邊分享的語意標籤還是一樣基本的為主, <header>代表上方區塊橫幅 <article>代表主要內容 <aside>代表側欄 <footer>指得是底部區塊 最後分享今天寫的語法,CSS部分就要麻煩大家自己去翻一下書了, <!DOCTYPE html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5排版測試</title> <style> body{ min-width:1024px; margin-top:0px; } #total{ margin:0 auto; width:1024px; } header{ background:#0066CC; width:1024px; height:250px; } article{ background:#F90; width:350px; height:100px; float:left; } #main2 { background:#FF0; width:350px; height:100px; float:left; } aside{ background:#000; width:323px; height:100px; color:#FFFFFF; float:left; } footer{ background:#666; width:1024px; height:300px; clear:both; } </style> </head> <body> <div id=total> <header id=top> 橫幅 </header> <article ...
繼續閱讀
網頁設計教學系列-使用JQUERY引導網友使用你網站
最近在學這個,也比較想要扎實在這上面,所以之後學到什麼就分享什麼,今天要講的東西,有點算是導覽的部分,你要如何讓網友知道你的網站從那邊開始點,所以你可以以按鈕顏色,來明確標示那些網友可以點,一起來看看今天的分享! 比如今天我們想要達到這樣的效果, 這邊分享HTML5語法寫法, <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQUERT基礎語法教學</title> <style> div{ font-size:12px; border:1px solid #003a75; margin:5px; } p{ margin:0px; padding:10px 10px; } .myClass{ background-color:#fff000; text-decoration:underline; } </style> <script type="text/javascript" ...
繼續閱讀
網頁設計教學系列-做出在兩個不同解析度所呈現出來的效果!
網頁設計教學系列-HTML5語法分享!
網頁設計教學系列-CSS+DIV排版-1
網頁設計教學系列-用HTML5語意標籤排成三欄版的
網頁設計教學系列-使用JQUERY引導網友使用你網站

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>