Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Basic HTML + SEO - A Simple Tutorial @5945
Search
Andro Chen Chun-An
May 02, 2013
Programming
0
51
Basic HTML + SEO - A Simple Tutorial @5945
2013-05-02 Basic HTML + SEO - A Simple Tutorial @5945
Andro Chen Chun-An
May 02, 2013
Tweet
Share
More Decks by Andro Chen Chun-An
See All by Andro Chen Chun-An
入坑滑雪自由行: 新手入門懶人包 - 雪場,費用,行程,行李,訓練 全攻略
androchentw
0
8
2021-02-17_splunk_cafe.pdf
androchentw
0
54
When Andro Meets Android - Android Taipei
androchentw
0
170
What I've Learned From Startups
androchentw
0
74
Baidu SEO II
androchentw
1
83
Baidu SEO - A Practical Guide
androchentw
0
54
Privacy-Preserving Data Mining and Collusion Resistance
androchentw
0
47
啡˙聞
androchentw
1
53
VANET Simulation of AP assistance
androchentw
0
40
Other Decks in Programming
See All in Programming
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
260
Monixと常駐プログラムの勘どころ / Scalaわいわい勉強会 #4
stoneream
0
320
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
240
ドメインイベント増えすぎ問題
h0r15h0
2
540
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
330
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
130
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
550
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
200
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
160
情報漏洩させないための設計
kubotak
5
1.2k
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1k
Оптимизируем производительность блока Казначейство
lamodatech
0
880
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Agile that works and the tools we love
rasmusluckow
328
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Thoughts on Productivity
jonyablonski
68
4.4k
4 Signs Your Business is Dying
shpigford
182
21k
Site-Speed That Sticks
csswizardry
2
230
Scaling GitHub
holman
459
140k
The Invisible Side of Design
smashingmag
299
50k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Automating Front-end Workflow
addyosmani
1366
200k
Transcript
Basic HTML + SEO - A Simple Tutorial " 2013/05/02"
Andro Chen 陳俊安" 5945 呼叫師傅
Agenda • HTML" • Basic" • With CSS" • Tools"
• Example – 電子報" • SEO Concept" • Q & A" • There is no stupid question!" 2014/3/20 Andro Chen © 5945 呼叫師傅 2
HTML - HyperText Markup Language • Structure(Bone) of a webpage"
• CSS – Skin, color" • JavaScript – Brain, animation " • Tags!" 2014/3/20 Andro Chen © 5945 呼叫師傅 3
HTML = Tags + Attributes • Basic1.html" • <!DOCTYPE HTML>"
• <html>" • <head>! • <title>! • <body>! • Basic2.html" • <!-- .. -->" • <h1> to <h6>! • <p>" • Basic3.html" • <a href=“URL”>! • <strong>" • <hr>" 2014/3/20 Andro Chen © 5945 呼叫師傅 4 • Basic4.html" • <meta> utf-8" • <img src=“URL” alt=“text”>! • <button>" • <br>" • <blockquote>" • <i>" • Basic5.html" • <meta> keywords, description! • <div>! • <span>" • <iframe>" • Basic6.html" • <ol>, <li>" • <ul>, <li>" • <table>" • <form>, <input>" • Google!"
Layout – Wiki Outside In 2014/3/20 Andro Chen © 5945
呼叫師傅 5
Layout – Wiki " 2014/3/20 Andro Chen © 5945 呼叫師傅
6
Layout – Wiki " 2014/3/20 Andro Chen © 5945 呼叫師傅
7
Layout – Wiki " 2014/3/20 Andro Chen © 5945 呼叫師傅
8
HTML – Layout With CSS • 行內套用 (Inline)" • <p
style=“font-size: 16px;”></p>" • 嵌入套用 (Embed) " • <style type="text/css"> div { background-color: #abcdef; } </style> " • 外部連接套用 (External Link)" • <link rel=stylesheet type="text/css" href=“site.css"> 2014/3/20 Andro Chen © 5945 呼叫師傅 9 • Box Model" (Via 1keydata.com)"
HTML – Layout With CSS • Basic4_css1.html" • Selector –
tag, #id, .class" • font-size, font-weight, text-decoration" • color, background-color" • Basic4_css2.html" • width, height" • margin, padding, border" • -top, -right, -bottom, -left" 2014/3/20 Andro Chen © 5945 呼叫師傅 10 • float_demo.html" • float <-> clear" • left, right, none"
HTML – Cheat sheet • 改圖 <img src=“URL” alt=“替代文字”>" •
改連結 <a href=“URL”>連結文字</a>" • CSS" • #id {" font-family: “微軟正黑體”, Verdana; /* 字型 */" font-size: 12px; /* 字體大小 */" font-weight: bold; /* 粗斜體 */" text-decoration: underline; /* 底線 */" "color: blue; /* 字顏色 */" }" 2014/3/20 Andro Chen © 5945 呼叫師傅 11
HTML – Tools • Editor - Sublime Text 2" •
Chrome DevTools" • More on 5945 blog" 2014/3/20 Andro Chen © 5945 呼叫師傅 12
HTML – 電子報v1 by Lucien 2014/3/20 Andro Chen © 5945
呼叫師傅 13
Terms • SEM " • Search Engine Marketing" • ~=
Paid search + SEO" • Instant qualified traffic" • SEO" • Search Engine Optimization" • Organic search results • Site Structure, content, keywords" • Long-term management" 2014/3/20 Andro Chen © 5945 呼叫師傅 14
2014/3/20 Andro Chen © 5945 呼叫師傅 15
SEO - Index • Principal" • Spider/Crawler => pre-process =>
rank" • Structure" • Website structure – HTML" • Structure Optimization" • Content" • Page Optimization" • Link Optimization" • Keyword" • Cheat/Punishment: Black Hat SEO" 2014/3/20 Andro Chen © 5945 呼叫師傅 16
2011 Google Ranking Factors 2014/3/20 Andro Chen © 5945 呼叫師傅
17 By SEOMoz
Details • 必讀" • Google搜尋引擎最佳化初學者指南" • Google’s SEO 報告解析" •
工作分配: 一個完整的SEO團隊人員基本配置" • 具體做法" • 搭配 Paid Search 的關鍵字,撰寫專文頁面" 2014/3/20 Andro Chen © 5945 呼叫師傅 18
Reference • HTML + CSS" • http://www.w3schools.com/tags/" • http://css.1keydata.com/tw/" •
SEO & SEM" • Google SEO Report Card" • 社会化媒体对SEO的帮助–社群讯号 • Google!" 2014/3/20 Andro Chen © 5945 呼叫師傅 19
" " " " " " "Q & A 2014/3/20
Andro Chen © 5945 呼叫師傅 20
" " " " " "Thank you! 2014/3/20 Andro Chen
© 5945 呼叫師傅 21