Links & JavaScript | WMConf Lightning Talks Google Webmasters English Japanese

Links & JavaScript | WMConf Lightning TalksYouTube↗ IA↗(long shot)
Science & Technology 8.4K views 282 likes 20 dislikes 29 Apr 2020

Google Search Central 785K subscribers United States YouTube↗

Click to Play Video

Hello, and welcome

こんにちは

to the Webmaster Conference Lightning Talk series.

Webmaster Conference Lightning Talkシリーズへようこそ

In this series, we share short versions of the content that we might share at Webmaster Conferences

このシリーズは世界中のウェブマスターカンファレンスで通常お届けしているコンテンツの

around the world as well.

短縮版です

This time, we will talk about everyone's favorite--

今回の話題は皆さん関心が高い

links and JavaScript web apps. ♪ (upbeat music) ♪

リンクとJavaScriptのウェブアプリです [リンク＆JavaScript]

All right. I think everyone who has ever used the web has seen them.

さてウェブを利用したことがあればリンクを見たことがありますよね

Links-- they take users from one page to another,

リンクによりユーザーが

either within the same site or on another site.

同じサイトか別サイトへページ間を移動します

They were <i>the</i> killer feature of the web when it was introduced,

公開時にはウェブでも特に優れた機能で

and they are a pretty big deal today as well.

今日でも大きな機能を果たしています

But besides letting users navigate between different content,

異なるコンテンツの間をユーザーにナビゲートさせる他に

they also serve an important purpose for bots and search engines,

Google検索などの検索エンジンやボットにも

such as Google Search.

重要な目的を果たしています

First and foremost, they allow crawlers

第一にリンクによりクローラーが

to find other pages of your website and move from page to page

ウェブサイトのページ内のリンクを見つけそれをたどることで

by finding the links in a page and then following them.

他のページを見つけてページを移動できます

The other important purpose is that, by following links,

この他に重要な目的はリンクをたどることでクローラーが

the crawler gains an understanding of site structure and information architecture.

サイト構造と情報アーキテクチャを把握することです

This is helpful when understanding what pages might be relevant to a given topic.

これは与えられたトピックに関連するページを把握するのに役立ちます

But now, how do you make a link?

ではリンクの作成方法は？

It turns out that this isn't as straightforward as one might think.

これは考えられているよりも簡単ではないのです

The most straightforward way to put a link on your website

サイトにリンクを配する最も簡単な方法は

is to just use a good old <i><a></i> tag

古き良き<a>タグを

with the URL of the page it points to in the <i>href</i> attribute.

href属性で指定するページのURLと合わせて使用することです

You may also sprinkle a little bit of JavaScript on your link--

リンクに少々 JavaScriptを加えても

that's absolutely fine.

まったく大丈夫です

This way, the link stays functional,

こうするとリンクの機能を保ちつつ

and you can upgrade it with JavaScript functionality too.

JavaScriptの機能でアップグレードもできます

Now, you may consider leaving out the <i>href</i> attribute,

href属性を省くのは

but that's not a good idea.

良い考えではありません

This way, the link only works when JavaScript works properly,

こうするとリンクが機能するのは JavaScriptが正しく機能した時だけになり

and crawlers can't really find out where the link goes to.

クローラーがリンク先を見つけにくくなります

This is making your link more brittle, so it's better to avoid it.

リンクが不安定になるのでこれは避けましょう

It also doesn't help to add an <i>href</i> attribute without a useful URL

このJavaScriptのURLのように

or with a pseudo URL, like this JavaScript URL here.

有用なURLなしにまたは偽のURLで href属性を追加するのも役立ちません

The result is the same as with a link without an <i>href</i> attribute.

結果はhref属性がないリンクと同じです

It's not a good idea.

良い考えではありません

Using a button might seem an option,

ボタンの使用は一選択肢に見えても

but that's not a good idea either.

これも良い考えではありません

The rule of thumb is if it does something on the current page, it should probably be a button.

原則として現在のページに何か行うにはボタンであるべきで

If it takes the user to a different piece of content that wasn't on the page before-- it should be a link.

ユーザーを以前ページになかった別のコンテンツに案内するにはリンクであるべきです

It's worthwhile to say that you also shouldn't simulate links by using any other HTML element,

またアドバイスとして JavaScriptでクリックハンドラを追加するなど

and, you know, add a click handler in JavaScript.

他のHTML要素を使用してリンクを装うのはやめましょう

This breaks the built-in accessibility features

ビルトインのユーザー補助機能を壊すので

and isn't a good idea either.

これも良い考えではありません

That all goes to say,

use semantic HTML link markup and point your link to a proper URL.

セマンティックHTML リンクマークアップを使用して適切なURLへのリンクを指定しましょう

So, what's a proper URL?

では適切なURLとは？

Well, we've ruled out pseudo URLs, like the JavaScript code on something-something.

JavaScriptを追加した偽のURLは排除してありますが

But let's take a look at URLs for a moment.

URLを少し見てみましょう

These URLs are typical examples.

これらのURLは典型的な例です

There's a protocol-- basically, the "language" that is spoken

プロトコル-- つまり URLアクセス時に使用される「言語」があります

when accessing the URL-- in this case, <i>HTTP</i> or <i>HTTPS.</i>

この場合 HTTPやHTTPSです

It also has a host-- <i>example.com</i> here--

またここの example.comのようなホスト--

so a name that some computer or multiple computers respond to.

あるコンピュータまたは複数コンピュータが応答する名前があります

Last but not least, it also has a path to a specific piece of content on that computer.

大事なのはこれにはコンピュータ上の特定コンテンツへのパスもあることです

This URL here also has another part-- a fragment identifier.

こちらのURLにはフラグメント識別子という別の役割もあります

That fragment identifier isn't a different piece of content.

フラグメント識別子は異なるコンテンツではありません

If we leave it out, we get the same content.

これを省いても同じコンテンツを得られますが

What the fragment identifier does, though,

フラグメント識別子の役割は

is it points to a specific part of the document.

ドキュメントの特定の箇所を示すことです

And here is the thing--

ここで問題は

because fragments aren't meant to point to different content,

フラグメントは異なるコンテンツを示すものではないので

crawlers ignore them.

クローラーがそれを無視することです

They just pretend that the fragments don't exist.

フラグメントが存在しない振りをします

But that means if you build a single page application with URLs that look like this,

つまりご覧のようなURLを伴う単一ページアプリをビルドする場合

crawlers won't follow these links.

クローラーはこれらリンクをたどりません

So, to sum it all up-- use proper link markup.

まとめると適切なリンクのマークアップを使用すること

Do not use fragment URLs

クローラーに発見させ、たどらせるリンクには

for links that you want crawlers to discover and follow.

フラグメントURLを使用しないことです

And you should be building websites that work well with JavaScript,

JavaScriptとうまく機能しリンクを見つけてもらえる

and the links will be found.

ウェブサイトをビルドしましょう

Thank you very much for listening!

ご視聴ありがとうございました

Have a great time, and see you soon again!

楽しんでまたすぐお会いしましょう

♪ (upbeat music) ♪ ♪ (upbeat music continues) ♪ ♪ (upbeat music continues) ♪ ♪ (upbeat music continues) ♪

[検索しやすいウェブサイトをビルドする] [もっと見る] [ライブチャットは続きます！]

Similar videos:

Como hacer saltos de gimnasia | split, squat y más | Paula Murillo

2.3K views 0 likes 0 dislikes 11 Oct 202059% match

Kitty Chapter 10 SECRET ENDING PREDICTIONS - RGCfamily Roblox
RGCfamily
15.4K views 419 likes 10 dislikes 27 Jan 202159% match

Fix For Mercedes Key FOB Not Working
iRepair Autos
418.4K views 5K likes 310 dislikes 18 Sep 201758% match

嘴唇暗紫，心供血差，每天刮公孫100下，打通血脈，改善心供血【健康管理師李曉】
Health Manager Li Xiao
30.1K views 848 likes 22 dislikes 05 Oct 202057% match

The Secret of Great Artists
César Córdova
112.7K views 5.8K likes 72 dislikes 10 Jan 202157% match

What Your Tongue Says About Your Health
Natural Cures
191.8K views 2.2K likes 130 dislikes 20 Nov 201757% match

Electrified Wolverine Claws: HOW DEADLY ARE THEY?
Hacksmith Industries
10.6M views 132.8K likes 3.8K dislikes 02 Mar 201757% match

Construction container - Soudure partie 2 - Renforcement de la structure - J + 6
Kerworkshop
18.6K views 542 likes 2 dislikes 13 Nov 202057% match

Ben Martin's Stealth Commissions Preview - Coming April 10th
Chris Nunez
632 views 2 likes 1 dislikes 13 Mar 201857% match

क्या हो अगर धरती का आकार किसी डोनट की तरह हो | What If Earth Was Shaped Like a Donut?
क्या हो अगर - What If India
3K views 207 likes 6 dislikes 13 Aug 202056% match

SUPER ANTENA HDTV MEGA POTENTE
El Transformador PLUS
304.5K views 2.7K likes 258 dislikes 08 Nov 201756% match

Probamos AMOLADORA Angular gentileza de Banggood
Leo Besson
1.2K views 105 likes 8 dislikes 15 Jul 202056% match

0 views 0 likes -1 dislikes 07 Jun 202656% match

Andoer BG-2F Vertical Battery Grip Holder for Nikon (D3100, D3200, D3300). Review and testing!)
Alexey Yurkevich - AlexeYexelA
707 views 19 likes 2 dislikes 20 Sep 201856% match

0 views 0 likes 0 dislikes 07 Jun 202656% match

FOGONERO o Asador !! , súper completo !! #locosxelasado
Leo Besson
15.1K views 336 likes 5 dislikes 23 Dec 202056% match

Amazon Lumberyard Engine Welcome Guide Tutorial Part 8
Amazon Lumberyard
4.2K views 64 likes 1 dislikes 05 Oct 202056% match

Billie Eilish, ROSALÍA - Lo Vas A Olvidar (Official Music Video) | REACTION 🇪🇸ES | Allan Cardoso
Allan Cardoso
10.5K views 499 likes 21 dislikes 21 Jan 202156% match

How to make AC Tester | Mains Voltage Detector Circuit | DIY
NematicsLab
805 views 65 likes 5 dislikes 25 Sep 202056% match

【超小厨】黄辣丁炖豆腐，贴玉米饼，热气腾腾的一锅，夫妻俩吃爽了！
ChefChao
177.2K views 3.5K likes 147 dislikes 24 Dec 202056% match

🔥 Spoiler of ONE PIECE 991 [FULL]
Anime Site
9.5K views 278 likes 36 dislikes 22 Sep 202056% match

mélangez la pierre d'alun et le citron, utilisez en bain de siège: vous allez adorer
Rose Moony
488.3K views 0 likes 0 dislikes 20 Oct 201856% match

✅ APRENDE a hacer LETRAS CORPOREAS // PUEDES GANAR Buen Dinero
Pro Grafico
1.8K views 109 likes 0 dislikes 19 Oct 202056% match

Funcionamiento de las Cámaras
MovilOne Mobile repair
1.9K views 197 likes 0 dislikes 25 Nov 202056% match

Comment perdre rapidement la graisse du ventre en utilisant de l'ail - Remèdes naturels
Rose Moony
214K views 0 likes 0 dislikes 28 Apr 201956% match

STRUFFOLI O CICERCHIATA RICETTA FACILE DOLCE DI CARNEVALE | FRANCESKA CHEF | italian honey balls
Franceska Chef recipes
5.5K views 290 likes 3 dislikes 04 Jan 202156% match

Glycolysis ANAEROBIA (SIMPLE explanation)
Veterinaria Panda
2.7K views 35 likes 2 dislikes 29 Oct 201955% match

🔗 CADENA DE PLATA, JOYERÍA 💎
Guillermo Petrochelli Orfebre
8.6K views 503 likes 3 dislikes 03 Jan 202155% match

JADAM Lecture Part 16. Common Herbs Become Powerful Pesticides. Making JADAM Herb Solution JHS.
JADAM Organic Farm & Garden
7K views 249 likes 5 dislikes 19 Jun 202055% match

DIY Como AFILAR tus TIJERAS , muy fácil
Leo Besson
48.8K views 1.1K likes -1 dislikes 19 Dec 202055% match

Settings Privacy About Contact Donate