# Google search develop for SEO - research log 對於一個網站上線要讓 Google 容易搜尋到需要做很多事
多到爆炸,而且每年都有新東西出來, 實在看得很煩…
感覺網路都被 Google 控制了…
Google 甚至出了一個develop guide
如要最新的消息與規範可以到 Introduction | Search | Google Developers
因為以下寫的東西可能過幾年後又有新的東西要加了
最後會再補充一些 social media 的 meta tag…
注意
這只是列出提要, 具體細節可以看所附的想關參考連結或拿關鍵字餵 Google
不然這文章寫一個禮拜都還不一定寫得完
但主要的經驗會在文章中提到
## 網站上線要給 Google crawler 爬需要注意的東西 ### metadata 以下兩種方式
建立 mockuop data
建立 Google search console(webmaster) or Google My Business(這通常是為了公司品牌或店家使用)
身為一個攻城獅
建立 mockup data 是基本(後續會介紹)
Google search console 可以讓你了解關於你的網站在 Google 上的一些情況, 像是被 search 多少次、曝光多少次或被 Google 建立了多少 index 等等, 還有很多東西, 也都會在加入許多新的功能, 所以最好定期去看一下
...
# AMP - develop log ## Intro 這是針對對 AMP 有基本概念的筆記, 基本概念請去 amp project 看就好
知道 AMP 是啥的再來看這文章會較有用
– 我是分隔線 —
會被 cache 在 Google domain 下
更新分主動 / 被動
主動(跟 Google 說該頁面有更新)
被動(當有任何人開啟該 AMP 頁面, Google 會在背後重新跟該頁面 AMP url 重新拉來 cache,但 15s 內不重新拉)
## 限制 廣告問題(需第三方有支援的廣告商, amp-ad 中有支援的)
AJAX cross domain 問題(需 server side allow)
Cookie 讀不到
user login 問題(需使用 AMP 的元件)
App Indexing on Google Search & AMP 衝突(Google 正在解這問題)
...
# Firebase - Firebase Cloud Message(FCM) Research Log This article is focus on web version
## Intro You can easy to use web notification push notification to your web site.
Set Up a JavaScript Firebase Cloud Messaging Client App
## Different with use pure web notification Using the Notifications API
Browser support FCM - Chrome(desktop & Android) & Firefox(desktop & Android) pure notification api - Chrome(desktop & Android) & Firefox(desktop & Android) & Opera(desktop) & Safari(desktop) Android need service worker Service Worker FCM - require pure notification api - option pure web notification only a notification object, you need handle connection push message from server.
...
# JavaScript - get text from dom object not include wrap html tag in child ## Intro ### Case 1 <div id="case_1"> Hi, This is a <em>Apple</em> </div> I want to get Hi, This is a ### Case 2 <div id="case_2"> <p>I have a pen.</p>PPAP </div> I want to get PPAP
### Case 3 <div id="case_3"> Apple<span> and pen</span> and pineapple pen </div> I want to get Apple and and pineapple pen
...
# Content Security Policy - 論一般網站放置的可行性 ## 前言 Content Security Policy 出來也有一段時間了
他的目的是為了從 header 下手去抵禦一些攻擊, 基本上遵循它的rule 就可以避掉一些 XSS 攻擊
但有時加入這功能會需要變動程式的架構或者某些性質的服務是根本就是設定到可以動的話安全係數會降低許多
這裏會稍微舉一些例子來說明
關於 Content Security Policy 以下有一些連結可以幫助瞭解這個 header
Refer - An Introduction to Content Security Policy
Refer - Content Security Policy 入门教程
Refer - Content-Security-Policy - HTTP Headers 的資安議題 (2)
Refer - Content Security Policy Reference
目前有只用的知名服務有 github 和 dropbox
## 簡介 簡單說就是會限制頁面上出現的東西
domain inline style inline script iframe, frame object https 可以用 html <meta> 或用 http header 的方式使用, 所以純靜態網頁也是可以用的
...
# JavaScript - touch and click behavior in mobile browser On mobile web
If you click it
And mobile browser can fire touchstart and click
Fire touchstart event and then fire click event has the difference in time.
the step is touchstart -> click
So if you has a popup and you use touchstart event bind close behavior.
You can find it fire click event.
Then some bug happened.
...
# Sublime Text - How to modify font size in sidebar In sublime text 3
If you want modify font size in sidebar
Follow step
Preferences -> Browse Packages Open User directory Create a file File named your theme name How to get it Preferences -> Settings - User -> theme Or default theme Default.sublime-theme Add content [ { "class": "sidebar_label", "font.size": 18 }, ] ## other in Mac the path is
...
# gulp - One problem i found when i use CSS minify with some CSS library When i use pure.
And i use gulp as my front-end build tool.
I used cssmin as my CSS minify tool.
By default it can extreme compress CSS file.
The one problem happen!
display not match
Because use CSS minify can remove inherited CSS property.
So in webkit browser doesn’t has display: -webkit-flex; and layout will be an error.
...
# Linux - install gogole chrome in debian Linux wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' sudo apt-get update sudo apt-get install google-chrome-stable refer - How to install Chrome browser properly via command line?
...
# webdriver.io - 前端測試入門筆記… 前端測試工具很多種
我這裡的需求是要做自動化測試
不知為何就選了這套 webdriver.io
可能就只是單純名字很炫(誤
當然一開始要先要有 Selenium
但為何 Selenium 跟我以前的印象有差別了…
我發現它的 firefox add-on 不能把錄製的動作輸出成 code 了, 是我的錯覺嗎?還是改方式了
但我想說就算了, 直接用寫的也罷
webdriver.io 只是因為是在我看過的關於測試文章中最後有印象的東西所以就去找它了(這是事實…
也還好我的記憶沒錯, 看了介紹和文件覺得 webdriver.io 有符合我的需求且又是用 Node.js 來寫, 所以對我較友善
先記錄一下使用流程
## Base tool Java sudo apt-get update java -version sudo apt-get install default-jre sudo apt-get install default-jdk Node.js Install
## On Local Get Started
突然發現文件寫得很詳細了…
雖然在做設定那有些選項不同但也影響不大
但想玩進階的方式可參考以下文章
設定 Selenium 參數可參考
基本上以下是我建的順序
### 1 先建 package.json { "name": "webdriver", "description": "automation test", "devDependencies": { } } ### 2 下載 Selenium server 之後有新版請再去確認版本
...