發表文章

PHP簡單的字串資料加密與解密方法

圖片
PHP simple encryption and decryption functions php 字串加密與解密簡單的寫法,這裡使用的是 openssl_encrypt 這個語法: // 加密函数 function encryptFunction($data, $key) { $encryptedData = openssl_encrypt($data, 'AES-256-CBC', $key, 0, substr($key, 0, 16)); return $encryptedData; } // 解密函数 function decryptFunction($encryptedData, $key) { $data = openssl_decrypt($encryptedData, 'AES-256-CBC', $key, 0, substr($key, 0, 16)); return $data; } // 因為上面寫了 openssl_encrypt() 至少要16 byte,所以這裡的key至少要16個字 $encryptionKey = 'abcdefghijk123457'; 因為寫了 substr($key, 0, 16) 抓取 $key 的 1~16 位置的文字,所以 $key 沒有16個字的話會報錯,你可以視自己的需求改變長短。 實際使用範例 // for example $tempVariable = 'oh nyo!'; $tempVariableEncrypt = encryptFunction($tempVariable, $encryptionKey); // mmdpiTHs1NnuNZrk7zxnWA== $decryptBack = decryptFunction($tempVariableEncrypt, $encryptionKey); // oh nyo! 這個方法可以簡單運用在存入資料庫,與取出資料庫的資訊給具有權限的人。

PHP 301轉址的方法與其對SEO的影響

圖片
PHP header()重新導向新網址 使用header()語法宣告301 我們可以先跟搜尋引擎的爬蟲宣告這是 301 頁面,之後再轉址。相較於直接重定向轉址,這對爬蟲來說會比較友善,等於是說這一頁被淘汰了,它才不會一直花費效能來這一頁。 另外,宣告 301 也能告知爬蟲,重新導向的網址內容是優於原本網址的版本。 header("HTTP/1.1 301 Moved Permanently"); header("Location: https://example.com/"); exit(); 又或者我們可以這樣寫: header("Location: https://example.com/", TRUE, 301); exit(); 使用http_response_code()語法宣告301 寫法如下: http_response_code(301); header("Location: https://example.com/"); exit(); 301、302、不宣告,分別差在哪裡? 301 狀態碼是「永久轉址」的意思,表示網頁已永久遷移至新的位置。如同前面所述,爬蟲就不會一直白白浪費效能。 302 狀態碼是「暫時轉址」的意思,因為某些原因,暫時轉址到其它頁面。可以告訴爬蟲,未來這個頁面還會再恢復使用。 不宣告直接刪除就跟404找不到頁面差不多意思,會造成使用者體驗不佳;而直接轉址的話,基本上會被視為301;最糟糕的情況是不宣告也不刪除,就直接把原來的內容複製到另一頁,或是在別的頁面更新原內容,這有可能會造成「重複內容」的情況發生。 標準網址含有追蹤碼怎麼辦? 有時候,Google會將含有追蹤碼的網址當成標準網址,原因是主要的參照網頁的網址有追蹤碼的關係,這會造成SERP的網址也包含追蹤碼,來源媒介會不準確。 這時候可以寫一段JavaScript轉址到你要的標準網址,Google會將其視為類似301的修正: const params = new Proxy(new URLSearchParams(window.location.search), { get: (searchParams, prop) => search...

使用這些問題清單評估你的網頁內容

圖片
創造有用又可信任的內容,也就是我們常聽到的 EEAT(經驗、專業知識、權威性和可信度),並顧慮到網頁要以人為出發點撰寫內容。 Google在近期的更新(包含核心更新)都不斷地強調「實用的內容」,到底什麼是實用的內容,他們給出了一些 問題 給網站管理者參考…… 你的SEO是搜索引擎優化還是搜索引擎優先? 或者有人稱之為「最佳化」…… 網頁是給使用者觀看和使用的,你的最終目的畢竟是轉換,而不是為了獲得搜索引擎排名而製作的搜索引擎優先內容,請不要忘記這一點。試著問自己網站內容的撰寫方式,避免自己走火入魔: 內容主要是為了吸引搜索引擎爬蟲而製作的嗎? 是否在許多不同主題上製作了大量內容,希望其中一些內容在搜索結果中得到良好的排名? 是否大量使用「自動化工具」來製作各種主題的內容? 總是在總結別人說的話而沒有增加更多價值? 創造的內容只是因為它們看起來很流行,而不是為了現有的觀眾寫這些東西嗎? 是否會讓讀者需要再次搜索才能從其他來源獲得更好的資訊? 迷信網頁內容要達到特定的字數? 在沒有任何真正專業知識的情況下撰寫某些主題,且主要是因為你認為自己會獲得搜索流量? 內容是否是在回答一些實際上沒有正確答案的問題? 創造以人為本的內容 網站是否有現有或預期的受眾,他們會認為內容對他們很有用嗎? 內容是否清楚地展示了第一手的專業知識和深度(例如,來自實際使用產品或服務或訪問某個地方的專業知識)? 網站是否有主要目的或重點? 有人會覺得他已經足夠理解某個主題,並帶著這些知識幫助實現他的目標嗎? 使用者是否會覺得他們獲得了令人滿意的體驗? 內容的品質 相信大家都知道內容的品質是SEO最著重的部分,除了問自己下列問題之外,還可以考慮讓你信任但與網站無關的其他人提供誠實的評估: 內容是否提供原創訊息、報告、研究或分析? 內容是否完整或全面地描述某個主題? 內容是否提供了有用的分析或有趣的訊息? 如果內容借鑒了其他來源,它是否避免單純地複製或重寫這些來源,而是提供實質性的附加價值和原創性? 主標題或頁面標題是否提供了內容或該段落的描述性、有用的摘要? 主標題或頁面標題是否避免寫得很誇大或震驚? 你認為有人會加入書籤、與他人分享或引用嗎? ...

從短語關鍵字和PAA出發,寫出良好的SEO文章

圖片
之所以稱為「短語關鍵字」的原因在於,它通常是一個單字或一個詞。 短語關鍵字的SEO重點 首先,要找出搜尋流量相對較多的詞,我們不可能思考「零流量關鍵字」,那是長尾關鍵字其中之一的工作;另外,還需要知道大部分的使用者為什麼會搜尋這個字。因此,我們可以歸納出四個重點目標: 流量 表面上的搜尋原因 相關搜尋原因 潛在搜尋原因 這裡要注意千萬不要被「流量」衝昏頭,它只佔了其中一個原因,而不是全部,必需要是與網站本身有關或真正能帶來轉換的字詞。以下我用「cim」這個短語關鍵字來舉例。 表面上的搜尋原因 我們可以從SERP中很快知道,它是什麼意思佔了很大的比重,因此我們可以在寫文章時,提及這個字的意思,並可以考慮往外延伸至「由來」、「演變」或相似詞的「比較」。 相關搜尋原因 另外,可以看排名較後面的網頁在說什麼、「相關搜尋」或是查看「其他人也問以下問題」的區塊來擴充文章篇幅和深度。例如,「cim工程師的徵才網頁」,在文章中就可以提及工程師們面臨的問題與挑戰。 Google的autocomplete 其他人也問的區塊,有人稱其為PAA(people also ask) bing也有相關搜尋可以參考 Google相關搜尋區塊 潛在搜尋原因 而在SERP前後排名與內容的多方思考之後,我們可以推論,使用者潛在的真正搜尋原因,是想要知道「cim的工作內容」,我們就可以在文章中加入這個重點內容,最後再加上近況與未來的結論,這樣就是一篇很好的文章。 Google 從以前就一直在宣導 有用內容 的重要性,所以推測出使用者的潛在原因是很重要的步驟。 繼續強化標題與可讀性 而 title 當然也要從cim這個字擴充,最好有提到「什麼」和「工程師」這兩個詞。 如果可以的話,再畫一、兩張原創的圖片後放在文章中更好,才不至於讓使用者看一篇密密麻麻只有文字的文章。 當然,還要充實你自己(也就是作者與網站本身)。如果你代表公司寫文章,記得到 wiki 介紹自己的公司,也請記得充實作者頁面,增加相關性質的文章,讓你的文章可信度增加。 方法 最後,如果你還有餘力與能力的話,一定要寫出「解決方案」,畢章歸納別人說過的話大家都辦的到,能夠解決使用者問題的網頁,才算是真正有價值的網頁!

用CSS簡單寫出漸層色的邊框與圓角(Gradient Border and Radius)

圖片
我們只要用很古老以前就存在的 border-image-source 和比較新的漸層語法 conic-gradient 互相結合就可以辦到。 簡單的漸層邊框範例 #example-card{ width: 200px; height: 200px; border: 20px solid hsl(80 100% 50%); border-image-slice: 1; border-image-source: conic-gradient( from 0deg, hsl(80 100% 50%), hsl(200 100% 60%), hsl(80 100% 50%) ); } EXAMPLE 因為 conic-gradient 的關係,這裡只要注意不要用在 IE 和舊 edge 就可以了。如果還是很擔心,其實用 linear-gradient 也可以。 邊框圓角 大家都知道,漸層屬性的CSS是寫在「xxx-image」底下(這裡是 border-image),而此屬性的 border-radius 會失效。因此,若要實現圓角就必須使用其它方法實現,這裡我們用擁有裁切功能的 clip-path。 clip-path: inset(0 round 24px); inset 的意思是內部裁切,0 是貼合主體,這樣就能簡單實現外邊框圓角。

無限滾動(Infinite Scrolling)對網站SEO的影響

圖片
最近遇到一個要讓 blog 文章無限滾動的要求,也就是說使用者在滾動到網頁下緣的時候,JavaScript 會自動戴入一篇相關的新文章在網頁中,目的是讓使用者繼續觀看相關的內容,增加在網頁的互動時間。 我使用的語法是 Intersection Observer API 和 replaceState,與後端互動的語法則是 jQuery 的 ajax。 Googlebot 會抓取無限滾動的內容嗎? 答案是:會。 至於會抓到多深?根據我自己的觀察,可以抓到至少兩篇無限滾動後出現的文章,Google 還蠻厲害的。 SEO 出現問題 就在我把程式碼寫上去之後一、兩天,網站的所有文章都開始出現一些 SEO 的問題,甚至到了不得不處理的地步,因為各網頁的排名有很明顯地下降(至少我這種寫法確實會影響 SEO,或許存在著對 SEO 更安全的寫法)。 CLS 無限滾動後出現的內容很明顯會造成網頁的區塊位移,我想這大家應該都可以理解,但業主認為這是小問題。而對於業主的「目標」,我也不否認這是可以忽略的問題。 載入時間 若無限滾動後出現的文章容量大小不大,這不會是什麼問題,但就是有容量很大的文章。 我不知道無限滾動後才出現的內容算不算在 Google 的載入時間中,所以我只能說無限滾動可能會讓載入時間受到影響。 結構化資訊錯誤 因為有許多文章使用例如 FAQ 的結構化資訊(FAQ 規定一個網頁只能出現一次),所以理所當然地,Google Search Console 馬上就發出了錯誤訊息通知。 這個問題對我來說是無法無視的,因為這會讓被認定為有語法錯誤的文章的 FAQ 結構不會出現在 SERP 之中。 解決方法 目前是在外面包一層用來偵測 search bot 的程式碼來規避。短期看起來是有效的,因為網頁又回到原本的排名。 var botPattern = "(/bot|google|baidu|crawler|spider|duckduck|crawling|bing)"; var regexp = new RegExp(botPattern, 'i'); var userAgent = navigator.userAgent; if (!regexp.test(userAgent)){ // infinit...

在Search Console指定國際目標的地理定位,會影響網站排名

圖片
如果你的網站客群是全世界,那麼在 Google Search Console 的國際地理定位選項可能會影響網站在搜尋結果 SERP 的排名表現。 網站如何指定國際目標? 該功能在「舊版工具和報表」之中,點開就可以看到「 指定國際目標 」。點擊進入後,在第二個頁籤(國家/地區)可以選擇要不要開啟與定位在哪裡。 而第一個頁籤「語言」,可以檢查網站的 hreflang 標記有沒有錯誤。 但是,如果網站的域名是 .tw 結尾,那麼該系統會自動幫你的網站定位為「台灣」,連選擇的權利都沒有。 地理定位如何影響網站排名? 在 Google 的 SEO Office Hours 影片 中,有人問 John Mueller 為何一個較小的姊妹網站,排名比他們的主要新聞網站還要好。 John Mueller 回答可能是 Search Console 的國際定位設定的問題: 「我注意到的一件事是您在 Search Console 中設置了巴基斯坦的地理定位。我不知道這是否是設計使然,又或是您刻意設定的。如果您想製作一個國際通用的英文新聞網站,那麼關閉地理定位可能是有意義的。在搜尋方面,如果你想定位巴基斯坦以外的國家,比如一般的英語新聞網站,那麼我肯定會關掉它。因為它會較為專注於巴基斯坦的搜尋,然後稍微少關注其他國家。」 結論 所以,以 John Mueller 說的話,再加上該功能的設定特性,在一開始買網域名稱的時候,就已經要確定網站的定位了!? 是要專注在一個地方經營,還是往全世界經營;如果主要目標是在台灣的排名,選擇 .tw 網域或指定地理位置很好;但它可能會對其他國家/地區的排名產生較不利的影響(曝光會少一些),在一開始就要想清楚。

有時候可以用matchMedia當resize的替代方案

圖片
matchMedia 的易用性 JavaScript 語法中的 matchMedia 瀏覽器相容性很高,IE10 以上都支援,所以基本上不用擔心什麼 polyfill。 而 matchMedia 的用法就像寫 CSS 的 media query 或 HTML 的 picture 一樣: var xsMQ = window.matchMedia('(min-width: 480px)'); var mdMQ = window.matchMedia('(min-width: 992px)'); 變數 xsMQ 和 mdMQ 是 boolean 值 ,因此,可以用判斷式來做想做的事。 matchMedia 與 change 事件結合 我們都知道 resize 有效能問題,需要用 debounce 或 throttle 解決,而如果把上述的 matchMedia 判斷式寫成 function,更可以用 change 事件 做到 resize 可以做的事! function mediaQueryStep(){ if(xsMQ.matches){ if(mdMQ.matches){ // big size:do something... }else{ // between big and small size:do something... } }else{ // small size:do something... } } xsMQ.addEventListener('change', mediaQueryStep); mdMQ.addEventListener('change', mediaQueryStep); mediaQueryStep(); 所以,在一些media query 沒有每改變 1 pixel 就會觸發某事件的情況下,matchMedia 也不失為一個好選擇。

Chrome和Edge在網址列打上網域加空格,會觸發站內搜尋功能

圖片
最近才在上方的網址列發現站內搜尋這個功能…… 網址列站內搜尋功能展示 操作方法 只要在網址列輸入該網域後,再空一格就會出現站內搜尋的功能;而且,就算是使用 Google CSE 的站內搜尋網站也會出現。但是,並不是每個網站都能這麼順利出現這個功能。 輸入後出現的搜尋結果頁面 網站實裝猜測 我自己原本猜測是跟 WebSite 這個結構化資訊或使用者本身常不常去有關,但就算有設定也常去了,也不見得百分之百會出現這個功能,所以 chrome 的依據到底是什麼其實沒那麼肯定。 站內搜尋結構化資料 站內搜尋的結構化資料範例如下,其本上每個網站只有 url 和 target 欄位值不一樣而已,但要注意只需加在網站首頁就好了,不要每一頁都加。 { "@context": "https://schema.org", "@type": "WebSite", "url": "https://test.example.com", "potentialAction": [{ "@type": "SearchAction", "target": "https://test.example.com/search?q={search_term_string}", "query-input": "required name=search_term_string" }] } 你也可以看 Google 寫的 網站連結搜尋框 ,基本上大同小異。 有了這個設定,說不定還能在 SERP 出現搜尋欄,雖然一樣是不一定會出現,但怎麼想都賺。 Firefox 的建議網頁 順帶一提,如果使用一樣的方式在 Firefox 網址列操作的話,跟 Chrome 不同,會出現「建議網頁」。 Firefox 網址列的建議網頁

「提供 next-gen 格式的圖片」是什麼意思

圖片
如果你在改善網站速度,對這句話想必一定很眼熟(沒錯,就是 PageSpeed Insights),但到底什麼是 next-gen?簡單來說就是 WebP、AVIF、JPEG2000、JPEG XR 等格式的圖片。 WebP WebP 目前是這四種格式中支援度最廣的格式,且支援去背和透明度。 它除了 IE11 之外,基本上都支援;而 safari 則要看版本夠不夠新(macOS 11)。 WebP 的瀏覽器支援度 另外,它有一個很像的名詞叫 WebM 影片格式: WebM 是一個由 Google 資助的專案(WebP 也和 Google 有關),目標是構建一個開放的、免著作權費用的影片格式檔。該影片格式能提供高品質的影片壓縮以配合 HTML5 使用。( wiki )用途基本上一樣是為了改善網頁載入速度。 AVIF Netflix 聲稱 AVIF 將會是下一代的圖像編碼演算法,並稱它對於他們的影音串流媒體網站而言,是取代 JPEG 格式的最佳選擇。 不過,相較於 2010 年就出現的 WebP,2019 年才誕生的 AVIF 支援度在2023年之後才追趕上來。 AVIF的瀏覽器支援度 JPEG 2000 JPEG 2000 比前兩者更早出現,副檔名是 .jp2 或 .j2c,跟 AVIF 一樣在當年被吹捧成下一代圖像的壓縮標準,但至今幾乎沒有網站在用,也只有 safari 有支援,其它瀏覽器完全不想理它。 JPEG2000 的瀏覽器支援度 JPEG XR、JPEG XL JPEG XR(JPEG extended range)是基於由 Microsoft 所開發的 HD Photo 的圖像格式,所以……基本上只有 IE9~IE11 和舊版本的 Edge 支援。 IE 專屬的 JPEG XR JPEG XL 則發表於 2017 年,但就目前為止的支援度是慘不忍賭,完全沒有瀏覽器支援。 實際運用 基本上,還是要靠 HTML 的 picture 來使用最安全,或者是寫程式判斷瀏覽器支援度,然後載入相對應的圖片格式。個人認為,目前使用 WebP + jpg/png/gif 的應對方式就夠了,頂多再加個 AVIF,但效益如何就自己判斷了。 再來就是 server 端有沒有設定宣告的問題。舉例來說,如果你是用 web.config 設定網站的話...

網站 Favicon 使用 SVG 檔的好處

圖片
什麼是 favicon? favicon 是 favorites icon 的縮寫,中文通常稱為頁面圖示(page icon)或網站圖標(website icon);簡單一點來說,就是瀏覽器最上面各分頁會出現的圖案。 像我這個網站的favicon 是位可愛的吸血鬼 favicon 除了可以用傳統的 ico 檔,也可以用 png 檔,甚至可以用 SVG 檔。 為何要特地用 SVG 檔? 用一般圖檔就好了,何必要再創作一個 SVG 檔呢?因為 瀏覽器有 dark mode 的存在 ,這個模式可能會讓網頁的 favicon 看不清楚,這就是我推薦使用 SVG 檔的原因,因為我們可以很輕易地在 SVG 檔中塞 CSS 語法進去調色,別的檔案格式沒有這種能力。 看到一看就知道沒去背的白底 icon 會讓我很焦慮, 以下為簡單的例子: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"> <style> path{fill:#2858aa;} @media (prefers-color-scheme: dark) {path{fill: #23A6DE;}} </style> <path d="example"/> </svg> 「 prefers-color-scheme : dark」就是在 dark mode 下呈現的樣貌,寫法跟 media query 一樣。我們可以在括號範圍內設定一個比較亮的顏色(fill: #23A6DE)才不會讓使用者看不清楚。 favicon HTML 設定 在 HTML 的 head 標籤裡照這樣設...

Google搜尋結果出現縮排網頁(indented),造成排名變動

圖片
在搜尋結果中,某些網頁下面會附帶一個前方空一格的網頁(Indented Results)。這種「縮排」會造成什麼情況?因為它與排名第一才可能會出現的目錄(Sitelinks)不同,也算在搜尋結果排名之中,就把原本排名 9、10 名的網頁擠到第 2 頁去了(預設一頁只有十個搜尋結果)。 什麼情況會產生縮排網頁 多語系且不同網址的相同內容。 與使用者意圖相關的內容。 同網域且在講同一件事的文章。 PDF 其它相關內容? 下面簡單找幾個例子來看: 這2篇文章都在說同一件事,可能因此才附加縮排網頁 sitelinks 和 縮排同時出現 不同子網域出現在縮排的情況,研判是相關內容且對使用者更方便的網頁(一頁式 eDM) 依我的理解,這可能與「搜尋旅程」有關。但是搜尋「mes廠商」的使用者,還需要理解什麼是mes嗎?(在我寫完這篇文章後2天,Google就把它拿掉了) 另外,中文使用者一定較容易看到,繁中或簡中雙語系其一出現在縮排的搜尋結果,例如 wiki、facebook 或其它多語系網站。 還有一種是相同內容,但不同媒介的文章,例如網頁版和 pdf 版。曾遇過 title 與內文一模一樣的 pdf 縮排。 就目前看到的情況是這樣,可能還有其它狀況。 初步實驗 我拿出現不同子網域 B 的縮排網頁當受試者(上面不是縮排的子網域為 A):做一個幾乎跟縮排網頁一模一樣內容的網頁,但放在相同的子網域 A 中,並把原本在 B 的縮排網頁 301 轉址到這個新網頁。 得到的結果是:搜尋結果的縮排網頁消失。 但若搜尋結果本身是首頁的話,縮排網頁會先消失幾天,之後又出現變成 sitelinks 的一份子,然後又消失。 我的看法 所以,Google 對自己在 SERP 選上的網頁沒有自信嗎?居然用這種方式幫本來排名就較強勢的網頁多佔一個名次。 又或者,是在幫重覆內容的網頁解套?雖然 Google 說過重覆內容不會被懲罰,但同個母網域最多只會出現 2 個網頁在搜尋結果的規則,就讓擁有重覆內容的網站管理者傷透腦筋;這種「縮排」一出現反而幫了這些網站大忙, 這讓盡力保持沒有重覆內容的網站情何以堪? 無論如何,會附帶縮排的搜尋結果,或許是 Google 認為該區塊可以讓 使用者的搜尋旅程 短一點。 附上 John Mueller 在 202...

網頁標題在Google搜尋結果會被如何更改?

圖片
有些網頁在 SERP 的標題 <title> 會被 Google 大幅度改寫,而實際的運作機制又是什麼呢?SEO 又是否會被影響? Google 如何生成新的網頁標題: 我們已經知道 Google 會改寫標題的頭尾(把產品或企業名稱加在標題結尾或開頭),但這次的改動比起前者更進一步,可能整句都會被重寫或刪除。 根據 Google 公開的說明頁面 和他們之後提供的 補充說明 可以得知,他們確實在 8 月 16 日推出了新的網頁標題生成系統,並會從該網頁的主視覺標題、一般標題、h1 或 h2 h3 之類的標籤內容,或者使用樣式而變得大而突出的內容,進而產生新的網頁標題文案。 更甚者,可能還會參考頁面中的其他文字、使用指向該頁面連結中的文字,或是自己改年份加項次來「改善」該頁面原本的標題。 但實際上改變不止侷限於 Google 公開的方式,還包含 直接截短 、 刪除句中的某些關鍵字 。用這個網誌來舉例的話,〈簡單理解LCP、FID、CLS三個網站使用體驗核心指標是什麼、對SEO的影響、改善案例〉這篇的標題因為太長了,便會被 Google 截短只剩下〈簡單理解LCP、FID、CLS三個網站使用體驗核心指標是什麼〉。 所以,我們可以簡單歸納出原本和現今的標題改動方式: 在前面或後面加上品牌名。 直接截斷。 截取網頁內容資訊(通常是大標)。 增加搜尋相關關鍵字在標題中。 刪除不必要的關鍵字或行銷術語後重新排列。 改年份或加項次(第1季 第2季)來區別重覆標題。 使用指向該頁面連結中的文字(極少)。 上述情況有時候會同時出現。 順帶一提,Google 認定「品牌名」的方式,經過我自己的實驗是和首頁的 title 大有關聯,另外還會參考各網頁 title 像產品名的重覆字詞。而 title 整體太長的話,除了常見的「...」結尾之外,也可能會直接把品牌名刪除;而比較特別在結尾有「雙品牌」的標題,也見過其中一個品牌名被移到最前面的情況。所以請小心命名,避免關鍵字被當成品牌名的一部分而遭 Google 刪改或移動。 另外,Google 對於品牌名的區隔符號比較偏好「-」而不是「|」,括號也有高機率會被更改。 ...