給開發者 portfolio 的 SEO 小建議

很多時候沒注意到的SEO小建議，可以幫助開發者在自己的網站上進行 SEO 優化。

2024年5月17日
html portfolio seo
給開發者 portfolio 的 SEO 小建議

給開發者 portfolio 的 SEO 小建議

身為一個 Full-stack developer, 時常幫客戶的網站進行 SEO 的優化。

以下是一個給開發者簡單的小建議，可以幫助開發者在自己的網站上進行 SEO 優化，並讓 Lighthouse 上面的 SEO 分數提高。

Title, language and Viewport

你的作品集應該有一個標題。 您可以在 html head 中將其指定為<title>My portfolio</title>。

而定義網站上的語言和 viewport 會影響您的 Lighthouse 分數。 Language 對於使用螢幕閱讀器的使用者很重要，而 viewport tag 會在個別裝置上最佳化您的 website。

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My portfolio</title>
</head>

Meta tag

Meta tag 是為搜尋引擎提供有關您網站的資訊的程式碼片段。 基本的內容是Title和description。這 是 Google 搜尋結果中顯示的訊息。 您也可以為頁面新增Keywords。 為網站搜尋一些相關的Keywords，來提升網站的排名也非常重要，這個會在Google Ads裡面可以搜尋到該關鍵字的流量(之後寫一篇)。

<head>
  <meta name="description" content="ViDA Studio 專注於數位創意製作、數位解決方案．以視覺以及科技的概念來創造您的品牌價值。">
  <meta name="keyword" content="portfolio, javascript, developer">
</head>

社群媒體的Meta tag

雖然不是必要的，但是想在其他平台分享網站的時候，就可以不單單只有連結，還有圖片跟title。

<head>
  <meta property="og:title" content="Vida Studio | 動態網頁設計、數位解決方案">
  <meta property="og:description" content="ViDA Studio 專注於數位創意製作、數位解決方案．以視覺以及科技的概念來創造您的品牌價值。">
  <meta property="og:image" content="https://example.com/images/og-image.png">
</head>

無障礙網站

無障礙網站是一個很重要的標誌，在Lighthouse reports上面會顯示關於網站有哪些Accessibility可以改善的地方． 以下我擷取原文

  1. Images need to have descriptive alt attributes. If the alt attribute is just an empty string, this will be removed from the accessibility tree.
  1. Another point related to accessibility that I discovered with this portfolio iteration is the that each anchor tag should have some descriptive text. Using anchor tags with icons (and not text) for my social media profiles was negatively impacting my score, and I discovered that attribute aria-label resolves this particular issue.

也就是說，這個網站上面的圖片應該要有 alt 屬性，還有 anchor tag 的標籤應該要有文字描述，可以使用 aria-label 來解決這個問題。


 <img src="./images/vida.png" alt="Vida Studio | 動態網頁設計、數位解決方案">

 <a href="https://www.vida-studio.com/" aria-label="Vida Studio | 動態網頁設計、數位解決方案">網站連結</a>

Thank you for reading, I hope you like it. Here is the link to my website

感謝您的觀看，希望對您有幫助． 如果希望找我合作的話，點擊這裡可以連結到我的網站

Feel free to ask questions and add any other recommendation you think might be useful ⚡️