質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

SEO

SEO(Search Engine Optimization)は、検索エンジンでウェブページがランキング上位に上がるように工夫する様々なテクニックの事です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

最適化

最適化とはメソッドやデザインの最適な処理方法を選択することです。パフォーマンスの向上を目指す為に行われます。プログラミングにおける最適化は、アルゴリズムのスピードアップや、要求されるリソースを減らすことなどを指します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2533閲覧

HTMLにおける<head>内のインクルード化の方法をご教授下さい。

k-ymd

総合スコア12

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

SEO

SEO(Search Engine Optimization)は、検索エンジンでウェブページがランキング上位に上がるように工夫する様々なテクニックの事です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

最適化

最適化とはメソッドやデザインの最適な処理方法を選択することです。パフォーマンスの向上を目指す為に行われます。プログラミングにおける最適化は、アルゴリズムのスピードアップや、要求されるリソースを減らすことなどを指します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2021/02/12 10:57

今現在,HTMLにてウェブサイトを制作しております.ページ数も多くなる予定なので,<header><footer>をJavaScriptを用いてインクルード化しております.そこで,<head>に書いているコードもインクルード化しようと考えておりますが,これがGoogleなどのSEOに影響がないかを懸念しております.

以下の方法を用いて<head>の一部をインクルード化しようと考えております.

(1)下記の方法を用いることにより,SEOなどに影響等がありますでしょうか.
(2)下記の方法を用いることにより,生じると考えられるリスク又はデメリットを簡易的にご教授して頂きたいです.
(3)その他,インクルード化を行う際に注意すべき点がありましたら,ご教授頂けると幸いです.

html

1<head> 2/* 以下のような重要なコード及びページによって異なるコードは,インクルード化せず,直接書く予定です.*/ 3<meta charset="utf-8" /> 4<title>タイトル</title> 5<meta name="description" content="○○について" /> 6/* 以下はインクルード化 */ 7<script type="text/javascript">head_link();</script> 8</head>

JavaScript

1// 以下のようなICON,CSS,JavaScriptなど全てのページ共通する部分は,インクルード化する 2function head_link(){ 3 var html = ""; 4 html += '<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />'; 5 html += '<link rel="stylesheet" type="text/css" href="style.css" />'; 6 html += '<script type="text/javascript" src="script.js"></script>'; 7 document.write(html); 8}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

(1)下記の方法を用いることにより,SEOなどに影響等がありますでしょうか.

document.writeを使っている時点でアウトです。
Googleどころか、W3Cが、非推奨としてるため、
全てにおいてマイナスになります。
別の手法を用いましょう。

(2)下記の方法を用いることにより,生じると考えられるリスク又はデメリットを簡易的にご教授して頂きたいです.

上記の通りですが、
質問者さんの手法にメリットは何もありません。
SEOどころかの観点から考えた時、
パフォーマンスが悪く、保守性が非常に悪いWeb標準外の手法なため、
よろしくありません。
現在のSEOでは、ページ表示のパフォーマンスは非常に重要な要素となります。
自作でインクルードを用いるなら、
DOMに関してもっと勉強し、
パフォーマンスが高い構文にできるようにましょう。

(3)その他,インクルード化を行う際に注意すべき点がありましたら,ご教授頂けると幸いです.

上記のように、自作でやるならDOMに関してかなり修練と経験が必要です。
それをやる自信がなければ、
素直に、既存のフレームワーク、
React.JSや、Vue.js、Angularなどを使いましょう。
少なくとも上記はSEOもしっかりとされるフレームワークです。
(構築さえしっかりすれば)
ただし、フロントフレームワークは、少々ハードルが高いので、習得には気力と時間は必要になります。
それでも、フレームワークを自作するよりは遥かに楽と言えます。

また、コメントでもいただいている通り、
クローラーロボットの全てが、JSを実行・解釈できるわけではなく、
上記フロントフレームワークも完璧とはいかないのが現状です。
よって、SEOを気にするのならば、
メタの記載は特に、サーバーサイドによっての出力が一番確実となります。

投稿2021/02/12 20:27

編集2021/02/15 17:17
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/02/12 20:44

テンプレートエンジン対応のサーバーサイドの言語で事足りる気がします。
miyabi_takatsuk

2021/02/12 20:51

ですね。 Ruby On Railsとか特に様々なテンプレートエンジン使えますしね。 Haml勉強したい…。
think49

2021/02/13 01:39 編集

> SEOどころか、Web標準外の手法なため、 document.write はHTML Standard仕様に残存していますので、Web標準外ではないと思います。 https://momdo.github.io/html/dynamic-markup-insertion.html#document.write() 結論が非推奨に変わりありませんが、GoogleとしてはSEO面よりもパフォーマンス上(PageSpeed Tools)及び保守性の理由が大きいと認識しています。 https://www.google.com/search?q=site%3Adevelopers.google.com+document.write https://developers.google.com/speed/docs/insights/BlockingJS?hl=ja > また、document.write は使用しないでください。実行順序に依存するスクリプトや、ページの DOM または CSSOM へのアクセスや変更が必要なスクリプトは、そうした制約に対応するために書き直しが必要となる場合があります。 --- 後はGoogleの公式文書を確認すべきかなと https://developers.google.com/search/docs/guides/javascript-seo-basics?hl=ja > JavaScript SEO の基本を理解する ただ、Googleは別として現存する全てのクローラがJavaScriptを完全に理解するわけではないので、head要素のような重要な情報はサーバサイドで出力するのが最も安全だと私は思います。
miyabi_takatsuk

2021/02/14 07:57

think49さん > ご指摘ありがとうございます。 元に、回答修正していきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問