關於SEO優化,身為前端工程師的你這東西你不能不知道!

-
​
關於SEO優化,身為前端工程師的你這東西你不能不知道!​
​
如何靠著SEO優化的各種技巧來"upgrade"我的網站??原來靠著這東西就能達成!

HTML 5 的語意標記，對前端工程師/前端設計師來說，是不知不可的網頁設計基礎，決定了網頁配置的邏輯；對於SEO優化師來說，雖然 HTML 5 的作用不是讓網頁可以被搜尋引擎自動擷取資料，但是卻可以讓搜尋引擎理解網頁每個部份 (Section，在此有人翻成區塊) 的排列邏輯、以及每個部份的作用等等，例如透過<header>告知搜尋引擎哪裡是頁頭、<nav> 告知搜尋引擎哪裡會列出導覽內容等等，還可以用來搭配 Schema 語意標記，協助搜尋引擎正確完成索引。

常見的 HTML 語意標記如下表所示：
標籤名稱
說明
<section>
區塊
<section>主要是告知搜尋引擎「這是一個段落」，包覆的對象不以文章為限。
裡面含標題<h1>-<h6>與內容<p>，
主要用途是告知搜尋引擎一個區塊的主要內容 (內容就是這個<section>的標題)
<article>
文章區塊
<article>跟<section>性質相近，都有含標題<h1>-<h6>與內容。
但是相較於<section>，更強調所包覆的對象是「文章」
<header>
表頭
以前用<div>架構會像這樣寫<div class="header">、<div class="footer">，
HTML5 則可以分別使用<header>與<footer>標籤來取代。在任何區塊下的架構，
如果需要詳細區分表頭表尾時，就可使用<header>以及<footer>來架構，用於<body>標籤下是最普遍的，
因為<body>的架構較大，需要清楚區分表頭與表尾。
<footer>
表尾
<aside>
側邊欄位
邏輯上跟<header>以及<footer>的使用方式一樣，只是位置是強調在「側邊」。
多用於WordPress、部落格、新聞網站常見的右邊側邊欄，
顯示最新文章、文章排行榜、其他連結、廣告、推薦文章等等的訊息區塊，就很適合用<aside>來做佈局。
<aside>的語意算是跟本文無關的區塊，也就是額外資訊，通常放的是跟主要文本無關的其他額外資訊
<main>
主要區塊
在 HTML5 中用來放置這個頁面主要的資訊，有點像以前的<div class="content"> 。
且每個頁面中只能有一個<main>標籤，且不能被置於在<nav><article><aside><footer><header>之中。
但是<article><aside><section>則可以可安被置於<main>當中。
<nav>
主要區塊
網站內的導航區塊，都適合使用<nav>來做架構，像是主選單、表尾選單等。


網路行銷課程的排版範例：

 如同以下的範例，<header>的內容就會出現在網頁的頁頭；<nav>則是導覽項目；<main>則是網頁的主要區塊，包含了<article>和<aside>，<article>內又分成不同的區塊(<sector>)；<footer>則出現在頁尾。
<header></header>
<nav></nav>
<main>
 <article></article>
  <sector></sector>
  <sector></sector>
 <aside></aside>
</main>
<footer>
 Updated on <time></time>
</footer>
既然語意標籤和過去的<div>有相同的排版特性，那為什麼要使用語意標籤呢？最大的目的，是讓搜尋引擎或是其他軟體工具，可以更清楚的了解網頁中每個區塊的設計目的，讓網頁更容易被搜尋引擎"了解"，因此有增強網頁 SEO優化的效果。

相關連結：

網路行銷課程-不可不知的SEO優化技巧1:先搞清楚人家在找啥!

網路行銷課程-不可不知的SEO優化技巧2:速度決定你的生死!

網路行銷課程-不可不知的SEO優化技巧3:不能忽視的元老咖

進軍國際小撇步,選達內教育讓你輕鬆進入海外知名企業就業!

不想再領死薪水?來上Java課程,保證你笑咪咪領高薪!

AI智慧帶你解析肥胖原因 Python課程帶你一步步成為AI大師

達內教育開幕　培養台灣IT人才進入全球企業

這個網誌中的熱門文章

Python控制結構一點就通!(5)while迴圈

-
圖片
關於Python的while迴圈,它可以製造出那些效果?一步步跟著這篇走,剩下的你不用怕啦! 關於Python-while 迴圈 Python 的 if 條件判斷式【請參考上篇的 Python教學 ： Python控制結構2.if else條件判斷(1) 】，若評估為 True【請參考： Python控制結構1.布林值Boolean-True or False? 】 的話，就會執行一次；反之則不執行。 Python 的 while 迴圈跟 if 條件判斷式相似，但是不同的是，它不只執行一次。只要條件成立，它就會不斷地重複執行。就算是有其中一段代碼被評估為 False，下一段代碼仍會被執行。 while 迴圈構成，包含了 。 以下範例的 while 迴圈中有一個變數「i」， 初始值 為「1」； 更新值（又稱為調整值） 為「i+1」； 讓迴圈結束的條件 為「i <=5」。 這次 Python教學 給你以下範例，讓 i 的從初始值開始，程式每執行一次，i 就等於上一回合的數值再「+1」一次，直到 i 等於 5 為止停止，寫法如下： i = 1 #初始值 while i <=5: #讓迴圈結束的條件 print(i) i = i + 1 #更新值 (調整) 則結果為： 1 2 3 4 5 >>> while迴圈的「infinite loop(無限循環)」 Python 的 while 迴圈中，有一種被稱作「infinite loop(無限循環)」，當條件（為True）成立時，該程式就會永不停止地重複執行。 「infinite loop(無限循環)」的範例如下： while 7==7: print("這是無限循環迴圈") 結果，「這是無限循環迴圈」這行字就會不斷的重複顯示。 若你真的受不了，你可以 按鍵盤快速鍵「Ctrl-C」以阻止它繼續重複顯示。 以下也是無限循環迴圈的另一個例子，來看看它的結果如何吧！ x=1 >>> while x>0: print(x) x+2 結果馬上會跳出一堆數字，且不斷的在跳出中。後出來的數字，都是...
閱讀完整內容

前端工程師絕不能搞錯的CSS中:逗號.空格的差別!

-
圖片
想成為前端工程師?那CSS中最基本的逗號.空格再搞錯,豈不是太不專業了! 有時在 HTML 中， 前端工程師 們會對同一個標籤給予兩個以上的 Class 名稱，如以下所示: < div class = " first second " > </ div > 對於這類有兩個以上的 Class 名稱的 HTML，其 CSS 選擇器可能會用以下的三種情況顯示。而聰明的你，分辨得出這些 CSS 有什麼不同嗎? /*1. 兩個 class 中有空格*/ .first .second /*2. 兩個 class 中沒有空格*/ .first.second /*3. 兩個 class 中出現逗號*/ .first,.second 對於 CSS 及前端工程師的初學者來說，上述三種 CSS 因為長得很像，所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號，到底差在哪裡? 別擔心，立刻講解給你聽：   1. 兩個 class 中有空格的例子：五個區塊中，階層必須是要在 first 區塊之下的 second 區塊，才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有空格的例子 by Tedutw ( @Tedutw ) on CodePen . 2. 兩個 class 中沒有空格的例子：五個區塊中， div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間無空格的例子 by Tedutw ( @Tedutw ) on CodePen . 3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有逗號的例子 by Tedutw ( @Tedutw ) on CodePen . 註 : 以上三個範例的 HTML 碼都一樣 延伸閱讀： 前端工程師入門款小常識-CSS碼特性一下就上手!  ...
閱讀完整內容

網頁前端CSS必學兩屬性:display與visible

-
圖片
今天要介紹網頁前端中的兩個CSS屬性:display與visible屬性! 本篇介紹 網頁前端 排版的兩個 CSS 屬性：display 屬性與 visibility 屬性。 CSS ：display 屬性 display:block 對於 CSS 語法來說， 網頁前端 的每個元素都是一個矩形盒（rectangular box）模型。而使用「display」屬性，便可以決定「盒（box）」的呈現方式。 又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符。 以下範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。 在下方的顯示視窗中，按「CSS」，就可以觀看 CSS 的語法如何設定了！ See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 網頁前端 CSS 語法設定如下： span.block{ display:block; } display:inline inline 元素只佔用可用寬度的最大值，並不強制換行。 將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。 See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 CSS 語法設定如下： span{ display:inline; } display:none 「display:none」用來將元素隱藏使用，當元素隱藏後，就不佔用任何空間了，且在 網頁前端 頁面顯示時也不會被展現出來，就好像該元素不存在一樣。 在以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。 See the Pen display: none by Tedutw ( @Tedutw ) on CodePen . 上述介紹的「block」、「inline」、「none」都是最常碰到的的 d...
閱讀完整內容