google

避免使用下列手法：

自動產生的內容加入連結配罝建立沒有原創內容或極少原創內容的網頁偽裝幕後重新導向隱藏的文字或連結入口網頁剪輯的內容加入無法有效增值的聯盟計畫載入含有無用關鍵字的網頁建立具有惡意行為的網頁，例如網路詐騙，或是植入病毒、木馬程式或其他惡意程式濫用結構化資料標記對 Google 傳送自動查詢

隱藏的文字與連結

為操控 Google 搜尋排名而在內容中加入隱藏的文字與連結，可能會遭系統視為詐欺行為，同時也違反 Google 的《網站管理員指南》。隱藏文字 (例如過多關鍵字) 的方式有很多種，例如：

在白色背景上使用白色文字將文字藏在圖片底下透過 CSS 將文字放置於畫面外將字型大小設為 0 透過建立某個小字元的連結來隱藏連結，例如段落中的連字號

濫填關鍵字

在搜尋結果中顯示合適的網頁標題和摘要

圖片

Web - HTML metadata image size with open graph…etc

網址檢查工具

向 Google 說明您的出站連結限制

rel="sponsored" - Ad
rel="ugc" - User generate content
rel="nofollow" - not follow link

在測試網站時保持 Google 搜尋排名的最佳做法

不過就我的經驗在搞 A/B 測試時沒在導頁的

整合重複的網址

如果要有效的 redirect 頁面請使用 301 作為永久導頁用

本地化(多國語系)

管理多地區和多語言版本的網站

向 Google 提供網頁的本地化版本

HTML tag

<link rel="alternate" hreflang="en-us" href="http://en-us.example.com/page.html" />

HTTP header

Link: <http://example.com/file.pdf>; rel="alternate"; hreflang="en", <http://de-ch.example.com/file.pdf>; rel="alternate"; hreflang="de-ch", <http://de.example.com/file.pdf>; rel="alternate"; hreflang="de"

stiemap

<url>
    <loc>http://www.example.com/deutsch/page.html</loc>
    <xhtml:link rel="alternate" hreflang="de" href="http://www.example.com/deutsch/page.html"/>
    <xhtml:link rel="alternate" hreflang="de-ch" href="http://www.example.com/schweiz-deutsch/page.html"/>
    <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/english/page.html"/>
</url>

請勿使用 IP 分析來調整內容。分析 IP 位置資訊相當困難，而且往往並不可靠。此外，Google 可能無法正確檢索您網站的變化版本。雖然有部分例外，但 Google 檢索器在大多數情況下是源自美國，我們也不會為了偵測網站變化版本而試圖變更位置。如要針對特定地區提供內容，請採用本文列出的方式 (hreflang、替代網址和明確連結)。

當然如果是 App 服務那就沒差了, 因為又不用顧及 Google 爬蟲 XD

保持簡單的網址結構

您可以試著在網址中使用標點符號。http://www.example.com/green-dress.html 這樣的網址比 http://www.example.com/greendress.html 更實用。建議您在網址中使用連字號 (-)，而不要使用底線 (_)。

Chrome headless 研究筆記

on 2018-12-26

Chrome headless 研究筆記

最近要用到 chrome headless 的部分功能

且得在 ubuntu or debian server 實踐

所以筆記一下

Intro

headless 大致分兩種用法

CLI
libary

Refer - Getting Started with Headless Chrome

CLI 用法簡單但是受限很多且沒有找到具體詳細完整的文件, 就連用 man 查都查不到…

也有可能是我自己沒有認真找

libary 就相對容易, 連 Google 自己都有提供部分語言的版本, 且有前端工程師很熟的 Node 版本

on ubuntu server

sudo apt-get install chromium-browser

ex:

chromium-browser --headless --screenshot=test.png --disable-gpu --window-size=320,480 --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D257 Safari/9537.53" http://tedshd.logdown.com

這指令下了截圖, 設定寬高, 模擬 UserAgent

當然也有 --dump-dom 可以看 source code

使用 puppeteer 處理

puppeteer

puppeteer 是 Google 維護的用 node 處理 headless 的套件

用了一下真是感到清爽好用

放一段最簡單的 smaple code

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:64.0) Gecko/20100101 Firefox/64.0');
		await page.goto('https://tysh310246.blogspot.com');

    await page.screenshot({path: 'example.png', fullPage: true});
    await browser.close();

})();

就是如此清爽

且有很多包好的 function 可以用

看了一下文件根本可以用 headless 取代 selenium + webdriver.io 了

但是目前的需求也不需要用到太多其他的功能

有空再慢慢研究

Puppeteer API Tip-Of-Tree

字型

在一台 server 上除非要截的網站是用 webfont 不然就會發現截的圖因為沒有字型所以中文會是方塊字

這部分就得處理一下

可以直接裝 Google 的 noto 字型

wget -c https://noto-website.storage.googleapis.com/pkgs/Noto-hinted.zip

把字型檔載下來放在

/usr/local/share/fonts/

設定 owner

設定權限

安裝字型

sudo fc-cache -fv

搞定

這邊建議直接裝全部語系的字型較為完整, 以免會遇到其他語系還是會有問題

Refer - Ubuntu環境下，手動安裝思源字型

category: google

Research - 加強在 Web 服務在搜尋引擎與部分社群的呈現

從 0 到 1

建立 [Gogole search console](google search console)

social metag og

Google rich content

favicon

lang

PWA(Option)

AMP(Option)

App link(Option)

Google News Publisher Center - Partnerdash(Option)

Google My Business - Stand Out on Google for Free(Option)

wiki(Option)

更新您的 Google 知識面板(Option)

Google Knowledge Graph Search API(Option)

當有 1 之後

資料品質

圖片

本地化(多國語系)

Chrome headless 研究筆記

Intro

on ubuntu server

使用 puppeteer 處理

字型