發表文章

從 Metadata 到 AI 摘要：Google 搜尋結果 Title 與 Description 摘要化的演進研究

圖片
從 Metadata 到 AI 摘要：Google 搜尋結果 Title 與 Description 摘要化的演進研究 摘要 Google 搜尋結果中的 title 與 description，近年愈來愈常不是網站自行撰寫的 <title> 與 meta description 原樣呈現，而是由 Google 依據查詢意圖、頁面內容與搜尋介面需求動態生成。這種現象並非近年才出現。早在 2006 年，Google 就已明確表示搜尋結果中的 snippets 是「完全自動化」生成，來源不只包括頁面內容，也可能參考其他網站對該頁的描述。2021 年 8 月，Google 又正式更新 title link 的生成機制，強化對搜尋結果標題的重寫。到了 2024 年 5 月，AI Overviews 正式上線，Google 搜尋結果進一步由「連結列表＋簡短摘要」轉向「AI 先摘要，再附來源連結」的答案型介面。本文將梳理這一演進歷程，分析 Google 官方政策說明及其對 SEO 實務的影響。 ( Google for Developers ) 一、研究問題 過去 SEO 實務常將 <title> 與 meta description 視為搜尋結果呈現的核心欄位：前者決定搜尋結果標題，後者決定搜尋結果下方描述。然而，近年搜尋結果中常見到以下現象： 網頁 <title> 與搜尋結果標題不一致。 網頁 meta description 未被採用，取而代之的是頁面內文片段。 搜尋結果頂端不再只是「標題＋摘要＋連結」，而是出現 AI 整理後的回答。 因此，本文的研究問題是： Google 何時開始將搜尋結果 title 與 description 從站方自填欄位，轉變為演算法主導的摘要式輸出？其政策脈絡與說明為何？ ( Google for Developers ) 二、Google 對 Description 的摘要化：2006 年即已明確 若從 description 的角度來看，Google 很早就不是把 meta description 當成必然顯示的固定文案。Google 在 2006 年 7 月的官方文章〈More control over page snippets〉中指出，搜尋結果下方的描述文字（snippets）是「compl...
張貼留言
閱讀完整內容

『 จริง 』泰文：真的／真實。

圖片
『 จริง 』泰文：真的／真實。
張貼留言
閱讀完整內容

Chat GTP 影像生成 - 人群臉譜

圖片
  1. 開啟 ChatGPT 2. 上傳你的圖像 3。 提示 高角度空拍視角,數千上萬微小人形成人臉細膩的側廓,創意人群藝術理念,海量多元的個體排列塑造眼鼻嘴唇等臉部五官,長長的戲劇性陰影投放在輕盈的水泥地上,最小的背景大 右邊的負空間,超細節的微型公仔,充滿活力的服裝色彩,敏銳的聚焦,光實感,8K解析度,電影燈光,上而下的無人機透視,概念的社會藝術,深度與質感,現代海報設計美學。 -------------------------------- 設計師粉專:「 JACKIE 設計 」 作品官網: https://www.jackiedesign.tw IG:jackietsai_ rock LINE:@521uvxhj  
張貼留言
閱讀完整內容

共享機器人、Robot share

圖片
 共享機器人、Robot share 以後機器人會像ubike 一樣可以租用幫忙人類做臨時的服務(幫老人家提重物，帶視障人士走路等等...)，而且任務完成他還可以自己走回去亭內。
張貼留言
位置： 台灣
閱讀完整內容

我又回來經營此部落格啦～

圖片
由於遭遇了伺服器廠商跑路，我的舊部落格：https://note.jackie.com.tw。就沒有在使用啦！ 之後會在這裡分享資訊唷！
張貼留言
位置： 台灣臺灣
閱讀完整內容

Jackie Note部落格搬家

我的部落格搬家囉，新網址: https://note.jackie.com.tw
張貼留言
閱讀完整內容

html5 a 標籤 download 屬性 在 chrome,edge,ie9,ios safari,line,facebook 相關介紹 & 下載外部網域圖片方法

圖片
範例: <a href="#" download="aaa.jpg"> 當<a>標籤加上download屬性時就能下載圖片，download="aaa.jpg"則是能夠為圖片命名。 不過在跨瀏覽器的支援下就有問題了，接下來我們來探討在chrome,edge,ie9,line,facebook底下download會發生甚麼事。 download屬性兼容性如下: chrome:支援。 edge:支援。 ie9:不支援。 以下也會介紹若使用外部網域圖片，按下<a>之後會發生甚麼事。 chrome 支援download屬性，按下<a>之後會再網頁下方出現下載圖片，功能完全正常。 若要使用外部網域圖片必須 使用javascript先將圖片網址設定在canvas裡，再轉成base64圖檔 ，之後才能成功下載，否則會因為是下載第三方資源而讓download失效，變成是網頁檢視(預覽)圖片。 p.s 如果是使用iphone7或iphone7plus開啟chrome的話，使用canvas轉base64檔會下載成一個document檔(無效的檔案)，所以為了iphone7以下的機型，必須改成下載本地端的圖檔。 edge 支援download屬性，按下<a>之後會再網頁下方出現下載圖片，功能完全正常。 若要下載圖片必須使用javascript，將 a 標籤的 href 修改url，但是必須為 本地端的圖片url ，否則會變成是網頁檢視(預覽)圖片。 若使用外部網域圖片，則download屬性失效，變成是前往該網站預覽圖片。 ie9 不支援download屬性，按下<a>之後download失效，變成是網頁檢視(預覽)圖片。 若使用外部網域圖片會變成是網頁檢視(預覽)圖片。 FACEBOOK瀏覽器 不支援download屬性，按下<a>之後download失效，變成是另開網頁檢視(預覽)圖片，長按圖片可以下載。 QQ瀏覽器 不支援download屬性，按下<a>之後download失效，變成是另開網頁檢視...
張貼留言
閱讀完整內容

javascript 獲得0~x的隨機亂數

var r=Math.floor(Math.random()*4);//隨機獲得0~3的亂數
張貼留言
閱讀完整內容

javascript 偵測使用者的裝置是否為行動裝置

function detectmob() { if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) ){ return true; } else { return false; } }
張貼留言
閱讀完整內容

「jquery.timers」jquery定時器

有時settimout跟setinterval會發生越來越快問題，或是設定多組settimout跟setinterva，時間間隔會錯亂。我推薦使用jquery.timers，定時器能正常的每秒執行一次。 /************************************************************* * everyTime(時間間隔, [計時器名稱], 函式名稱, [次數限制], [等待函式程序完成]) *************************************************************/ //每1秒執行函式test() function test(){ //do something... } $('body').everyTime('1s',test); //每1秒執行 $('body').everyTime('1s',function(){ //do something... }); //每1秒執行，並命名計時器名稱為A $('body').everyTime('1s','A',function(){ //do something... }); //每20秒執行，最多5次，並命名計時器名稱為B $('body').everyTime('2das','B',function(){ //do something... },5); //每20秒執行，無限次，並命名計時器名稱為C //若時間間隔抵到，但函式程序仍未完成則需等待執行函式完成後再繼續計時 $('body').everyTime('2das','C',function(){ //執行一個會超過20秒以上的程式 },0,true); /*********************************************************** * oneTime(時間間隔, [計時器名稱], 呼叫的函式) ***************************************...
張貼留言
閱讀完整內容

javascript利用餘數寫網頁loop輪播器slider當前index

/*html*/ <div class="arrow arrow_left" onclick="changeindex(-1);"></div> <div class="arrow arrow_right" onclick="changeindex(1)"></div> /*javascript*/ var this_index = 0; //設定一個初始0的整數 function changeindex(change){     this_index = (this_index+change+7)%7;     console.log(this_index) } 邏輯是(例如): 30%30=>0 31%30=>1 32%30=>2 33%30=>3 7的部分要看你的slider的lenght(長度)而定， 如此一來按左右兩箭頭就能判斷slider當前的index囉！進而寫出輪播器效果
張貼留言
閱讀完整內容

Google AdSense廣告如何領取收益？

▼參考連結1： 【部落格教學】Google AdSense怎麼領款？西聯匯款，京城銀行，終於領到第一筆100美金了!! https://kaohsiungtoeat.pixnet.net/blog/post/221999394-%E3%80%90%E9%83%A8%E8%90%BD%E6%A0%BC%E6%95%99%E5%AD%B8%E3%80%91google-adsense%E6%80%8E%E9%BA%BC%E9%A0%98%E6%AC%BE%EF%BC%9F%E8%A5%BF%E8%81%AF%E5%8C%AF ▼參考連結2： [懶人包]Google AdSense廣告如何領錢？電匯、西聯匯款、支票。 https://sofree.cc/google-adsense-payment/
張貼留言
閱讀完整內容

CSS animation 簡寫&好用的工具

▼css animation 簡寫: animation: saleChange 2s 1s infinite; -webkit-animation: saleChange 2s 1s infinite; ▼CSS animation 好用的工具教學: 一些好用工具的教學可參考以下影片( Big Boy Can Code ) https://www.youtube.com/watch?v=Y4xBYZJSvuM&t=13s ▼CSS animation 好用的工具: animate.css: https://daneden.github.io/animate.css/ animista: https://animista.net/ keyframes.app: https://keyframes.app/
張貼留言
閱讀完整內容

用 js 寫區塊自適應，等比縮放

▼500是可以調整的數值，藍色數字調整不同比例視窗所呈現的區塊長寬 page3ContentResize();     $(window).resize(function() {         page3ContentResize();     });     function page3ContentResize(){//page3Contant區塊自適應         var page3_width = $('.page3').width(),             page3_height = $('.page3').height(),             page3Content_set_newwidth = 0,             page3Content_set_newheight = 0;         if(page3_width<page3_height+ 500 ){             // console.log('寬小於高')             page3Content_set_newWidth = page3_width/ 1.3 ;             page3Content_set_newHeight = page3_width/ 3.5 ;         }else{             // console.log('寬大於高')             pa...
張貼留言
閱讀完整內容

niceScroll.js 搭配 boostrap 的 modal 組件 js 設定&改變滾動條樣式方法支援多瀏覽器

▼css部分可做以下設定 /* 设置滚动条的样式 */ .right_info::-webkit-scrollbar { width:12px; } /* 滚动槽 */ .right_info::-webkit-scrollbar-track { -webkit-box-shadow:inset006pxrgba(255,255,255,1); border-radius:10px; background:rgba(255,255,255,1); } /* 滚动条滑块 */ .right_info::-webkit-scrollbar-thumb { border-radius:10px; background:rgba(24,65,144) !important; -webkit-box-shadow:inset006pxrgba(0,0,0,0.5); } .right_info::-webkit-scrollbar-thumb:window-inactive { background:rgba(255,0,0,0.4); } /* 滚动条ie */ .right_info{   scrollbar-base-color: #ffffff;   scrollbar-face-color: #144190;   scrollbar-3dlight-color: #ffffff;   scrollbar-highlight-color: #ffffff;   scrollbar-track-color: #ffffff;   scrollbar-shadow-color: #ffffff;   scrollbar-dark-shadow-color: #ffffff; } ▼niceScroll.js可做以下設定 var explorer = window.navigator.userAgent;     if (explorer.indexOf("MSIE") >= 0) {//ie10及以下 ...
張貼留言
閱讀完整內容