tedshd's DevNote

Develop & Design Note by Ted

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

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

這是一份紀錄著如何加強 SEO? 的筆記

參考來源大部分會是 Google 文件或者是 blog 發佈的消息與部分試驗出來的結果

僅供參考

從 0 到 1

建立 Gogole search console
瞭解 Sitemap
social metag og
結構化資料格式

結構化資料測試工具

Google rich content

探索 Search Gallery

favicon

web - favicon 使用筆記

可讓 Google 識別的特殊標記
lang
PWA(Option)
AMP(Option)
App link(Option)
Google News Publisher Center - Partnerdash(Option)
Google My Business - Stand Out on Google for Free(Option)
提高在 Google 搜尋中的能見度
wiki(Option)

建立 wiki 頁面, 因為 Google 會把 wiki 中相關頁面呈現在前面

對品牌較有效益

更新您的 Google 知識面板(Option)
Google Knowledge Graph Search API(Option)

Knowledge Graph & 知識面板是 Google 一個很猛的計畫

涵蓋範圍不只是只有 web

當有 1 之後

資料品質

Follow the structured data guidelines

品質指南

避免使用下列手法:

自動產生的內容
加入連結配罝
建立沒有原創內容或極少原創內容的網頁
偽裝
幕後重新導向
隱藏的文字或連結
入口網頁
剪輯的內容
加入無法有效增值的聯盟計畫
載入含有無用關鍵字的網頁
建立具有惡意行為的網頁,例如網路詐騙,或是植入病毒、木馬程式或其他惡意程式
濫用結構化資料標記
對 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 更實用。建議您在網址中使用連字號 (-),而不要使用底線 (_)。

2019 Mozilla Developer Roadshow Asia Taipei 與會紀錄

2019 Developer Roadshow Asia: Taipei

2019 Developer Roadshow Asia: Taipei

上次在台灣的 Roadshow 應該是 17 年的那場吧

發表 Quantum 的那次

如果之後我沒錯過台灣的場次的話

這次有趣的是竟然是在 2019 Meet Taipei 創新創業嘉年華的展覽中佔一塊場地

所以也自動幫你報名創業展的 VIP, 期間都可以入場參觀

前面在簡介 Mozilla

前面先啥扯到東南亞市場趨勢

感覺 Mozilla 會有些計畫會針對東南亞

大致上分幾個主軸

  1. Firefox lite
  2. Firefox Develop tool
  3. Web VR
  4. IOT
  5. Firefox collect data

Firefox support feature

更安全且具有隱私性

Firefox lite

在歷經上次失敗的 Firefox app 之後(之前用過 Android 版, 整體的順暢度根本沒法跟 Chrome 比

這次在行動裝置出了 Firefox lite

簡單的說, 它也想要整合許多功能在 lite 中, 但這樣不就不 lite 了?

Develop tool for CSS Grid

Web XR

正式宣佈 2019 為 MR 元年?

VR 聊天室

Mozilla WebThings

WebThings Gateway for Raspberry Pi®

Gateway remote access

視覺化呈現

視覺化的行為操作

類似 IFTTT

youtube-dl - 使用筆記

youtube-dl - 使用筆記

youtube-dl 是一個跟影音相關方便使用的 cli 工具

這裡筆記一下一些用法

列出該影片可以下載的 format

youtube-dl -F <URL>

output

[youtube] e17Um7wExuQ: Downloading webpage
[youtube] e17Um7wExuQ: Downloading video info webpage
[info] Available formats for e17Um7wExuQ:
format code  extension  resolution note
249          webm       audio only tiny   54k , opus @ 50k (48000Hz), 192.69KiB
250          webm       audio only tiny   72k , opus @ 70k (48000Hz), 255.58KiB
140          m4a        audio only tiny  130k , m4a_dash container, mp4a.40.2@128k (44100Hz), 476.29KiB
251          webm       audio only tiny  138k , opus @160k (48000Hz), 500.94KiB
278          webm       82x144     144p   32k , webm container, vp9, 30fps, video only, 105.14KiB
160          mp4        82x144     144p   43k , avc1.4d400b, 30fps, video only, 147.87KiB
242          webm       136x240    144p   72k , vp9, 30fps, video only, 224.00KiB
133          mp4        136x240    144p   90k , avc1.4d400c, 30fps, video only, 303.08KiB
243          webm       202x360    240p  130k , vp9, 30fps, video only, 379.65KiB
134          mp4        202x360    240p  219k , avc1.4d400d, 30fps, video only, 659.67KiB
244          webm       270x480    240p  235k , vp9, 30fps, video only, 670.44KiB
135          mp4        270x480    240p  375k , avc1.4d4015, 30fps, video only, 1.10MiB
247          webm       406x720    360p  428k , vp9, 30fps, video only, 1.19MiB
248          webm       608x1080   480p  737k , vp9, 30fps, video only, 2.03MiB
136          mp4        406x720    360p  761k , avc1.4d401e, 30fps, video only, 2.09MiB
137          mp4        608x1080   480p 1458k , avc1.64001f, 30fps, video only, 3.95MiB
271          webm       810x1440   720p 2767k , vp9, 30fps, video only, 6.69MiB
313          webm       1080x1920  1080p 4410k , vp9, 30fps, video only, 12.22MiB
43           webm       640x360    360p , vp8.0, vorbis@128k, 1.28MiB
18           mp4        202x360    240p  359k , avc1.42001E, mp4a.40.2@ 96k (44100Hz), 1.29MiB
22           mp4        406x720    360p  713k , avc1.64001F, mp4a.40.2@192k (44100Hz) (best)

下載指定的 format

youtube-dl -f <format code> <URL>

下載最好的

youtube-dl -f best <URL>

下載指定的 format

youtube-dl -f mp4 <URL>

php - float 浮點數科學記號轉換

php - float 浮點數科學記號轉換

php - float

php 的浮點數大小受限於系統, 且會自動轉換成科學記號呈現, 但是一般人不會去看科學記號

echo 0.0000234;
// 2.34E-5

在呈現上希望轉換回小數點的呈現

可以用以下方法做到

$s = 0.0000234;
trim(rtrim(sprintf("%.10f", $s), '0'), '.');
// 0.0000234

這邊 sprintf 只取 10 位數

因為就之前遇到的系統超過 10 位數都會是不精確的浮點數

Web - HTML metadata image size with open graph...etc

Web - HTML metadata image size with open graph...etc

HTML use some meta tag for SEO, social media or App link...

List some limit with image size or logo size

Facebook open graph

Refers - Images in Link Shares

  • The minimum allowed image dimension is 200 x 200 pixels.
  • The size of the image file must not exceed 8 MB.
  • Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.

Twitter card

A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card support an aspect ratio of 1:1 with minimum dimensions of 144x144 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. The image will be cropped to a square on all platforms. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.

Refers - Optimize Tweets with Cards

Pinterest

No limit

Refers - Rich Pins

Logo

  • The image must be 112x112px, at minimum.
  • The image URL must be crawlable and indexable.
  • The image must be in .jpg, .png, or. gif format.

Refers - Logo  |  Search  |  Google Developers

Summary

Use 600x350 or 1200x630 PNG or JPG

If use for other type

Can reference Google developer Structured data

Refers

The Open Graph protocol

Some tip: The Facebook Crawler