新型黑帽SEO大量攻擊搜尋結果,該如何處理?

攻擊搜尋結果

黑帽SEO靠網站內搜尋結果頁連結置入內容,Google 搜尋結果頁開始出現大量奇怪的站內搜尋結果,可以看到泰文、越南文的關鍵字連到網站內部的搜尋結果去建立網頁。這些搜尋結果的字串可能是跟博弈或情色產業相關的字眼及網站。

到Google搜尋「33k1.com」或「879783.com」會發現一些有高流量的網站例如momo、IKEA、國立臺灣師範大學竟然出現在Google 的搜尋結果頁,但這些網站不會有相關內容。

image 1
黑帽SEO攻擊搜尋結果
黑帽SEO攻擊搜尋結果
黑帽SEO攻擊搜尋結果

這些搜尋結果可能是博弈或情色相關產業的廣告來洗流量、增加曝光度,可能會在您網站的 Google Search Console 出現一堆『要賭博請來 XXX 網~………』這樣的數百個到上千的網頁,這樣的網頁也是用數百個到上千不同的網址來建立。

如何知道網站有無被惡意搜尋連結攻擊?

可以到 Google Search Console 的 索引–>涵蓋範圍,查看報表中歸屬於 遭到「noindex」標記排除已檢索-目前尚未建立索引 的網頁是否異常增加。也可以到Google Search Console 的 設定–>檢索統計資料,查看報表並觀察其中 依回應:OK(200) (檢索要求:OK(200))的網址示例是否有異常增加。

截圖 2022 05 27 上午12.47.21 1
Google Search Console 涵蓋範圍報表
截圖 2022 05 28 下午3.07.45
Google Search Console OK(200)

被惡意攻擊搜尋結果對網站的影響?

遭受惡意攻擊對網站SEO的影響或大或小,如果你網站的搜尋結果有加上 noindex 標記,Google 就不會索引站內搜尋結果,但有人惡意大量餵給 Google 這些無用的結果,Google 還是會先檢索,才會知道這不用索引。

這些網頁在 Google 爬蟲的角度可能是無價值、無用的,會被列為 檢索而未索引 的機會相當高,而這也會讓 Google 認為這個網站的品質相當低,這就可能影響到SEO。

如果數量很多,就會影響到 Google 爬蟲用來檢索網站的資源(檢索預算 crawl budget),進而導致 Google 花太多資源檢索無用內容而不去檢索網站的正常內容。

如果你的網站並沒有針對站內搜尋結果頁做特殊處理去阻擋 Google 爬蟲檢索或索引,最終的結果有可能 Google 大量索引到垃圾內容,以致它認為網站品質有問題,而影響網站SEO成效。

被惡意攻擊搜尋結果該如何處理?

  • robots.txt 檔案中封鎖所有站內搜尋結果,以WordPress網站為例,加上「Disallow:/?s=*」。
  • 於所有網站內搜尋結果頁加上 meta noindex標記
  • 將無內容的網站內搜尋結果頁的回應代碼(response code)調整為404或加上 meta noindex 標記。。
  • 將網站內搜尋字詞超過 10~20 個字以上就回傳 meta noindex,因為這些黑帽 SEO 的攻擊為了置入這些字詞,因此搜尋關鍵字都會較長,因此這樣就可以擋住大部份的攻擊。
  • 直接把這些黑帽SEO的網域加入禁止外部連結,只是這些黑帽SEO一直會換網域,有時防不勝防,因此不能做為唯一的方法,但若有做好的話,一個月左右也會見效。

WordPress 本身就會於站內搜尋結果頁的原始碼加上noindex標記,可以再於 robots.txt 封鎖網站內搜尋結果頁,如果這些搜尋結果頁對使用者來說是有意義的,則會建議於相關內容加上標籤(tag)。

可能會疑惑,為何有noindex了還要於 robots.txt 封鎖呢?如果只以noindex處理,雖然Google不會索引,但還是會檢索,如此還是會消耗檢索預算,所以最好的方式還是告訴Google不用來爬此頁面的資料

延伸閱讀:

meta robots 與 robots.txt 差別?與SEO的關聯?

robots.txt

meta robots 以及 robots.txt 的工作分別是阻止Google 檢索、索引你的頁面。在現今網路世界中,只有SEO排名高或流量高是沒有用的,流量必須有價值、要能夠產生轉換,所以使用者體驗相對重要,如果你有特定頁面會傷害使用者體驗,你可以透過這些方式去阻止該頁面出現在Google 搜尋結果中。

我們在 Google Search Console 顯示偵測到「Noindex」標記 有介紹noindex的標記,即為meta robots阻止Google索引特定頁面。

ai nuclear energy background future innovation disruptive technology
meta robots 與 robots.txt 差別?與SEO的關聯? 8

meta robots vs. robots.txt

以下以表格介紹兩者的差別:

meta robotsrobots.txt
功能阻止Google索引在搜尋結果阻止Google抓取資料
使用方式在<head>底下加入meta robots標籤,例如noindex上傳檔名為robots.txt的檔案到根目錄
使用時機特定頁面不希望出現在Google搜尋結果頁中,例如購物車頁、結帳頁、網站搜尋結果頁,但這些頁面可能對SEO有幫助,所以還是會讓Google抓取資料特定頁面完全不希望Google抓取資料,例如未完成頁面、測試頁面、機密頁面
  • robots.txt可以阻止搜尋引擎檢索你的特定頁面的資料,如果你使用了robots.txt來阻擋搜尋引擎,那麼搜尋引擎將會略過你所阻擋的頁面,不去做檢索。
  • 而meta robots 是在索引層面阻止搜尋引擎索引你的頁面,但Google還是有爬你的網站資料。
  • 如果只是不想讓網頁顯示在 Google 搜尋結果中,請不要以 robots.txt 做為隱藏網頁的方法。如果有其他網頁的說明文字指向您的網頁,即使 Google 未造訪您的網頁,還是能夠為網頁建立索引。

什麼是robots.txt?

robots.txt是一個檔案,這個檔案會規範來到你的網站的爬蟲的行為,像是有哪些頁面可以爬、哪些頁面不能爬。

robots.txt 檔案能夠告訴搜尋引擎檢索器,可存取網站上的哪些網址。 這個檔案主要用來避免網站因要求過多而超載,而不是讓特定網頁無法出現在 Google 搜尋結果

Google 特別強調,如要防止自己的網頁顯示在搜尋結果中,請使用其他方法,例如密碼保護或是 noindex 標記。

如需自行建立 robots.txt 檔案,可以參考Google官方 建立 robots.txt 檔案

robots.txt的使用時機

最一開始提到robots.txt是一種規範,他會告訴你來到你的網站的爬蟲有哪些頁面可以爬、哪些不能爬,所以robots.txt至少有以下幾種的使用時機

  • 不讓爬蟲爬機密檔案
  • 不讓爬蟲爬未完成的頁面或測試頁面
  • 不讓爬蟲爬一些相對不重要的內容,避免消耗抓取預算
  • 不讓不必要的爬蟲爬取你的網站,消耗網站資源

結論

若某些頁面你不希望在搜尋引擎被搜尋到,但這些頁面事實上有很多對SEO排名有加分的因素,例如有反向連結、流量,所以你會希望Google檢索這些頁面的資料,但別建立進搜尋引擎索引,這時候你需要meta robots 來阻止Google索引你的頁面(noindex)。

而未完成或是正在測試的頁面,對實質SEO沒有任何幫助,希望Google不要爬取資料的話就要使用robots.txt。

需特別注意的是:

如果其他網站連結到 robots.txt 所封鎖的網頁,系統仍然可以為該網頁建立索引。雖然 Google 不會對 robots.txt 所封鎖的內容進行檢索或建立索引,但如果我們透過網路上其他網頁的連結發現封鎖的網址,仍然會建立這些網址的索引。在這種情況下,網頁網址或者網頁連結中的錨定文字這類公開資訊,仍會顯示在 Google 搜尋結果中。如要完全避免這種情形,建議使用密碼保護伺服器上的檔案、使用 noindex,或是完全移除網頁。

資料來源:

網頁字型學問大!會影響網站載入速度?

undraw Font re efri
flying laptop mobile tablet 3d rendering showing builder website responsive web design
網頁字型學問大!會影響網站載入速度? 15

網頁字型是指網頁中使用的文字樣式。網頁字型通常會指定字體、顏色、大小和樣式(例如粗體或斜體)。這些樣式可以讓網頁內容更加清晰和美觀,並且有助於提高用戶體驗。

一般來說,使用者看的網頁中的字體,會因為作業系統預設瀏覽器設定而不同,比如說微軟正黑體;所以當你在設計網站時,也必須將網頁字型的相關問題納入考量,即便你在網站設計稿上用到了特殊中文字型,也沒辦法讓大家瀏覽網頁的時候也看到相同效果,畢竟他們電腦不一定有這套字型。

有一種非常不建議的方法,就是請工程師直接把字體檔案上傳到網站當中,但可能會違反字型授權,更重要的是,每次使用者瀏覽網頁的時候,都得重新下載一次這套字體,以繁體中文的字數來說,中文字體檔案非常龐大,一般字體大小是網頁的三倍以上,會讓網頁載入速度變慢,影響使用者體驗,可能還沒載完網站就不耐煩地把網站關掉了。

因此我們建議,如果是少量且非常特殊的字體,可以以圖片代替。

網頁字型設計必須認識的 Webfont

Webfont 為網頁上替換字型的服務,在網頁中Webfont的使用方式,主要是由W3C協會所制定。如同W3C協會制定了在網頁上的樣式(CSS)呈現,W3C協會也制定了網頁上字體套用CSS後的呈現規範。字型需要存放於網路平台上,否則網頁僅能讀取本地端的字型檔。雖然有安裝字型檔的裝置可以看到網頁上指定的字型,但是沒有安裝該字型檔的裝置卻是無法呈現,這個網頁呈現結果則會跳回裝置上預設的系統字型。

免費和開源的Webfont:Google Fonts

網頁字型
Google Fonts

Google Fonts(以前稱為Google Web Fonts)是 Google 擁有的電腦字體和網站字體服務。這包括免費和開源字體系列,用於瀏覽器、網站中,以及通過CSS和Android使用字體的API。Google Fonts 存放在 Google 主機中,下載字體不需吃自己主機流量,Google 主機速度快。Google 字體庫中的流行字體包括Roboto、Open Sans、Lato、Oswald、Montserrat、Source Sans Pro和Raleway,近年也新增了一些中文、日文字體,提供中文網站使用者更多選擇。

而我們使用的網頁設計架站外掛 Elementor,在核心中就是使用 Google 字體,多達800多種的字體,可以任意使用,但當然大多數為英文字體。

網頁設計常用的字型:思源黑體、思源宋體

思源黑體與思源宋體是由Adobe與Google聯手開發的開源字型,中文命名取自飲水思源之意,支援字符數量極多,爾後Google以不同字重的方式將思源黑體以Noto Sans CJK名稱釋出。一般在缺字的時候會出現方框,因此缺字被戲稱為「豆腐」,而思源體的字型家族英文名稱為Noto,即無豆腐之意,指創作者希望該字型不缺字,是最完善的字型。

由於Google和Adobe在創作思源體時是涵蓋了幾乎全世界地區的文字,TC 指的是 Traditional Chinese,因此你也可以找到對應的日文思源體、英文思源體、簡體中文思源體等等,非常全面。

中文網頁設計通常會使用Google 的開源字體:思源黑體Noto Sans TC思源宋體Noto Serif TC。這些字體是根據 Open Font License 獲得許可的,可以在您的產品和項目中使用它們——印刷或數字、商業或其他方式。

Noto Sans Traditional Chinese 思源黑體繁體中文

截圖 2022 08 12 下午4.25.29
Noto Sans TC

Sans是無襯線的意思,指的是黑體。一般網頁都可以使用黑體,帶有輕鬆大方的感覺,也易於閱讀。

Noto Serif Traditional Chinese 思源宋體繁體中文

截圖 2022 08 12 下午4.30.59
Noto Serif TC

Serif指的是襯線體,在字型筆畫的始末有一些裝飾細節。宋體相較於黑體來說,有嚴肅、認真的氛圍,可以依據您的網站性質、品牌形象選擇使用的字體。

特殊網路字型 Webfont

justfont 為目前最大的中文webfont服務商, 2012年,他們推出了 justfont 中文雲端字型服務,達成了中文字型也能應用於網頁的重要里程碑!justfont 是華文第一個推出「中文網路字型(web font)服務」的網站,專注於中文字型的服務,並在功能完整度、顯示速度以及字型品質上都非常要求。期許能讓網路設計師們,都能夠隨時瀏覽到高品質的字型。

justfont 對於網路字型的說明

網路字型(Web Font)主要用途在使用於網頁上的字型顯示,擺脫以往字型需安裝方能顯示的限制,使得於網頁設計上能夠不用轉圖檔,使用者一樣能夠看到特殊的字型效果。目前在英文語系國家,網路字型的使用甚為方便,但在亞洲語系國家則限制頗多,主要的困難點在於亞洲語系國家的字數太多,導致單一字型檔的大小,動輒5~6M,甚至有達到10M以上的字型檔案,要在瀏覽時下載整個字型檔是不現實的。網路字型機制,是依據您網頁上使用的文字,動態的產生並下載您需要的字型,所需下載的檔案大小等同於圖檔,且使用方便無須額外設定。
justfont webfont
justfont 提供的網路字型

網路字型的好處就是,可以不需要下載全部的中文檔案,透過「網路字型」的機制,只下載網頁上所使用到的字即可,大幅的降低了所需下載檔案的大小。

有興趣的使用者可以參考 justfont 的 Webfont方案,主要採訂閱制,有免費試用,若確定訂閱則以年計費,僅能用於網頁中,webfont僅能以javascript套用,無法下載字型安裝至電腦上使用。並以PVs(Page View) 計算網頁瀏覽次數,代表這個方案可以使用多少個網頁瀏覽次數,每頁不論使用多少字體數量,都以1PV計算,例如:假如你的網站平均一個訪客會瀏覽2個頁面的話,那 100,000 PVs 就可以提供給⋯⋯100,000/2 = 50,000 個訪客使用。

怎麼嵌入特殊字型?

若您還是想在網站中嵌入特殊字型可以參考以下教學:

要在網頁中嵌入特殊字體,您需要使用 CSS 的 @font-face 規則。首先,您需要下載您想要使用的字體文件,並將其上傳到您的網站伺服器。然後,在您的 CSS 文件中,您可以使用 @font-face 規則定義字體的名稱、來源和其他樣式選項。例如,假設您下載了一個名為 “MyFont” 的字體文件,並且將其上傳到了您的網站的 “fonts” 目錄中,您可以使用以下 CSS 來定義字體:

@font-face {
  font-family: "MyFont";
  src: url("/fonts/MyFont.ttf") format("truetype");
}

或是在網頁的 HTML 源代碼中引用該字體文件,並在 CSS 樣式表中使用 font-family 屬性指定字體的名稱。

例如,假設你想在網頁中使用名為 “MyFont” 的字體,你可以在 HTML 源代碼中添加以下代碼來引用字體文件:

<link href="https://example.com/fonts/coolfont.ttf" rel="stylesheet">

然後,您就可以在其他 CSS 規則中使用這個字體了。例如,您可以使用以下 CSS 來指定所有標題元素(例如 <h1><h2> 等)使用這個字體:

h1, h2, h3, h4, h5, h6 {
  font-family: "MyFont", sans-serif;
}

請注意,上述示例只是示例代碼,實際情況可能會有所不同。此外,請確保在使用特殊字體時持有相應的授權。

網站字體也有順位?font-family排序及示例

CSS 中的 font-family 的排序指的是網頁設計者指定的字體列表,按照順序列出了瀏覽器在查找字體時應該使用的字體。這些字體會被優先使用,直到瀏覽器找到一個可用的字體。如果網頁設計者列出的所有字體都不可用,瀏覽器將使用預設 Font Stack 中的第一個字體。因此,”font-family” 的排序是決定網頁顯示的字體的重要因素。

Font Stack 是什麼?

Font Stack 是CSS font-family的一個字體清單,以使用者滿意度來排序。Font Stack 支援網頁字體設定,因此無需透過電腦安裝。

font-family的規則

font-family 是CSS中的一個屬性,它用於指定網頁元素的字體。它的規則如下:

  1. 多個字體名稱可以作為一個字體系列指定給 “font-family”,瀏覽器將按照您列出的順序依次查找這些字體。
  2. 如果您指定的第一個字體無法使用,瀏覽器將使用下一個字體。這樣,您可以提供多個字體作為備選,以確保網頁在大多數瀏覽器上都能以您預期的方式顯示。
  3. 字體名稱必須用引號括起來,如果字體名稱包含空格,則必須使用引號。
p {
   font-family: Arial, "Helvetica Neue", sans-serif;
}

上面這段代碼將指定 “Arial” 字體作為首選字體,如果無法使用,則將使用 “Helvetica Neue”,如果再無法使用,則使用預設的 sans-serif 字體。

一般來說,字體順序的決定因網站設計者和技術平台而異,但通常情況下,系統字體(如Arial、Verdana等)會被放在前面,然後是網路字體,再是其他自訂字體。

網頁字型設計需要考慮的不只是美觀,更要考慮到對網站速度的影響喲!

延伸閱讀:

WordPress文章後台設定教學

WordPress文章

WordPress 是最受歡迎的網站內容管理系統。截至2021年8月,根據 W3Techs統計 全球有大約 43% 的網站都是使用 WordPress 架設網站的。 作為最受歡迎的內容管理系統,在添加、修改文章方面也非常的方便、輕易上手。這篇文章將教大家如何輕鬆設定WordPress文章。

截圖 2022 05 06 下午10.59.20
進入WordPress文章後台

WordPress文章後台

狀態及可見度

截圖 2022 05 06 下午10.33.40
狀態及可見度

這邊可以設定文章可見度、發布時間、作者等等。

作者的部分預設為目前登入的使用者,可以選擇其他使用者為作者,若文章前台會顯示作者,這邊記得選取唷!

截圖 2022 05 06 下午10.59.35
內容可見度

內容可見度除了草稿公開,還可以設定為私密文章受密碼保護文章

永久連結(Slug)

文章的永久連結,文章儲存為草稿後可以編輯,建議可以修改為英文網址,若是中文網址在複製分享時會呈現亂碼,但在網址列會呈現中文,各有利弊,可以自行取捨唷!

截圖 2022 05 06 下午10.34.50
永久連結

文章分類(Category)

文章的分類設定,可以在此勾選,也可以在此自行新增分類。

截圖 2022 05 06 下午10.58.33
分類

文章標籤(post_tag)

文章的標籤,可以自行新增已存在標籤,或是直接新增新標籤,須以逗號或Enter進行分隔。

截圖 2022 05 06 下午10.58.45
標籤

精選圖片、內容摘要、討論

精選圖片為文章的主圖,若有設定主圖預覽文章,記得新增精選圖片!

內容摘要為選填,有些網站的版面設定會顯示內容摘要,有些則無,可以自行依照網站設計進行選填。

文章預設為開啟留言的版型,若特定文章不開放留言討論,記得取消勾選。

截圖 2022 05 06 下午10.59.01
精選圖片、內容摘要、討論

WordPress文章分類、文章標籤管理後台

WordPress後台側欄處的 文章–>分類、標籤,可以新增、修改、刪除分類及標籤。

分類(Category)

分類可以依照需求整理上層分類,分類名稱可以打中文,但代稱(slug)的部分建議使用英文。

截圖 2022 05 06 下午10.50.01
分類設定

標籤(post_tag)

標籤名稱可以打中文,代稱(slug)的部分建議使用英文。有時候誤新增標籤可以在此進行刪除或修改。

截圖 2022 05 06 下午10.50.35
標籤設定

以上WordPress文章設定你學會了嗎?有任何問題都可以詢問我們唷!

延伸閱讀:

如何在你的WordPress網站上安裝Google Authenticator驗證器外掛?

undraw secure login pdn4

現今網路世代,每個人的數位帳號越來越多,也讓人不經煩惱若帳號被盜或密碼外流該怎麼辦?因此越來越多人想辦法要避免帳號被盜,想要保護自己的網站、帳號密碼,現在也提供不少方法可以加強防範資安問題,例如OTP(One Time Password,一次性密碼)2FA(Two Factor Authentication,二階段驗證)機制,都是為了讓帳號除了原本的密碼之外,額外增加一道只有你才知道且隨時變換的鑰匙。Google Authenticator驗證器就是這樣的工具,如果你的帳號可以加上Google Authenticator的保護,會讓帳號更為安全。

什麼是Google Authenticator?

在App Store 上的「Google Authenticator」
Google Authenticator App

Google Authenticator,中文叫做Google身份驗證器,是一種在手機上產生兩步驟驗證碼的驗證器。在WordPress網站密碼不慎被盜用,對方依然無法登入WordPress後台,因為要有第二層的驗證碼,而這個密碼是由手機上已安裝好Google Authenticator App所產生的 。需安裝網站及手機的Google Authenticator,才能完整使用此2FA的安全防護。

如何在網站上安裝設定Google Authenticator?

安裝外掛

進入你的網站後台 –> 外掛 –> 安裝外掛 –> 搜尋 Google Authenticator –> 安裝並啟用

截圖 2022 05 01 上午1.53.04
安裝Google Authenticator外掛

設定Google Authenticator外掛

設定的地方在側欄設定–>Google Authenticator

「Ask for authenticator code on secondary login screen」為在第二次畫面登入中輸入驗證碼,可以視需求勾選。

下面的功能可以選擇針對哪些使用者要開啟Google Authenticator的驗證功能,設定完成後記得儲存!

截圖 2022 05 01 上午1.59.22
設定Google Authenticator

使用者QRCode掃描設定

在後台側欄 -–> 使用者 –-> 個人資料,可以找到Google Authenticator Settings,需勾選Active,可以自訂任何名稱,這個之後也可以在手機中的Google Authenticator App修改。設定方面可以使用預設的Secret 或是 Create new secret 建立一組新的密碼,而下方的QRCode,是方便手機上的Google Authenticator App利用掃瞄QRCode而產生的帳號,最後記得儲存更新個人資料

Relaxed mode,放鬆模式可讓你的手機時鐘有更多時間,讓你可以較輕鬆地輸入驗證碼(±4 分鐘),預設時間為30秒。

截圖 2022 05 01 上午2.13.04
使用者->個人資料設定

在手機下載Google Authenticator App

Apple Store:Google Authenticator App iOS

Google play:Google Authenticator App Android

安裝好App後,打開App,在介紹如何使用之後,一開始會請你掃描QRCode,如果沒有跳出,在畫面的右下角會有一個” + “的圖示,按下之後選擇掃瞄QR圖碼,就可以把手機對準WordPress後台中的QRCode畫面,掃描完成就會成功建立一組帳號了。

之後在登入的頁面,就會多一欄Google Authenticator欄位請你填寫手機App出現的6個數字驗證碼。

截圖 2022 05 01 上午2.39.05
登入頁面

使用Google Authenticator驗證器算是滿方便又能有效保護網站資安問題的方式,但是登入網站時手機一定要在身邊,也要小心不要弄丟手機或是刪除App,有可能再也無法登入網站唷!

延伸閱讀: