metaタグの使い方と設定場所
- jimdo proを使用してHPを作成している際に、FBシェアボタンを設置した場合、シェアされた画像や文が正しく表示されない問題が発生しました。調査した結果、シェア時に表示する画像や文を設定する必要があることが判明しました。
- 設定方法は、jimdo作成画面からヘッダー編集画面に移動し、特定の位置に以下のmetaタグを追加することです。
- <meta property="og:type" content="ページの種類"> <meta property="og:title" content="ページのタイトル"> <meta property="og:description" content="記事の説明" /> <meta property="og:url" content="ページのURL"> <meta property="og:image" content="表示したい画像のURL">
- ベストアンサー
metaタグについて
皆様お願いいたします。 jimdo proにてHPを作成し、その中にFBシェアボタンを設置しました。 スマホより自HPへいき、シェアしたところ画像、文が変な状態でシェアされます。 調べるとシェアされた時の画像、文を設定（OGPと言うらいいです）しなければならないことがわかりました。 やり方はjimdo作成画面からヘッダー編集へ行き、下記のmetaタグを記載との事です。 <meta property="og:type" content="ページの種類"> <meta property="og:title" content="ページのタイトル"> <meta property="og:description" content="記事の説明" /> <meta property="og:url" content="ページのURL"> <meta property="og:image" content="表示したい画像のURL"> そこでなのですが、私のHPのヘッダー編集画面にいくと、 <style type="text/css"> 〇〇〇〇〇〇〇〇〇 〇〇〇〇〇〇〇〇〇 </style> というようにすでに記載させれています。 どこに上記metaタグを入れたらいいのでしょうか？ よろしくお願いします。
- tengon
- お礼率90% (87/96)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
metaタグは<head>から</head>の中に記述する決まりになっています。 <style type="text/css"> 〇〇〇〇〇〇〇〇〇 〇〇〇〇〇〇〇〇〇 </style> とあるのも、ヘッダー内にCSSを記述してあるものと考えられます。 このタグの前に入れればよいのではないでしょうか。 具体的には <meta property="og:type" content="ページの種類"> <meta property="og:title" content="ページのタイトル"> <meta property="og:description" content="記事の説明" /> <meta property="og:url" content="ページのURL"> <meta property="og:image" content="表示したい画像のURL"> <style type="text/css"> 〇〇〇〇〇〇〇〇〇 〇〇〇〇〇〇〇〇〇 </style> こんな形ですかね。
関連するQ&A
- metaタグのメリットについて。
<link rel="canonical" href="http://XXXXXXXXXXX.com/" /> <meta property="og:locale" content="ja_JP" /> <meta property="og:type" content="website" /> <meta property="og:title" content="XXXXXXXXXXX" /> <meta property="og:description" content="XXXXXXXXXXXXXXXXXXXXXX" /> <meta property="og:url" content="http://XXXXXXXXXXX.com/" /> <meta property="og:site_name" content="XXXXXXXXXXX" /> <meta property="og:image" content="http://XXXXXXXXXXXt.com/news/wp-content/uploads/2018/07/logo_meta.jpg" /> <meta property="og:image:secure_url" content="http://XXXXXXXXXXX.com/news/wp-content/uploads/2018/07/logo_meta.jpg" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:description" content="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" /> <meta name="twitter:title" content="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" /> <meta name="twitter:site" content="@XXXXXXXXXXX" /> <meta name="twitter:image" content="http://XXXXXXXXXXX.com/news/wp-content/uploads/2018/07/logo_meta.jpg" /> <meta name="twitter:creator" content="@XXXXXXXXXXX" /> <meta property="fb:app_id" content="XXXXXXXXXXX"> これはmetaタグです。これらは１つ１つSEO対策としてどういうメリットや動きをするのでしょうか。
- 締切済み
- HTML
- ▲▲METAタグについて▲▲
HTMLとCSSでHPを作るとき。 METAタグはこれでよいでしょうか？？ <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css">
- ベストアンサー
- HTML
- OGプロトコル、イメージを設定したのに別のものが…
FaceBookに自分のWordpressで作ったサイトのURLを貼付けるとなぜかトップページ内で使っているメニューボタンの画像がサムネイルとして表示されてしまいます。 これはあまり望ましくないと思いOGプロトコルを設定してやりサムネ用に300×300のjpg画像を作ってやりog:imageとして設定してやりました。 FaceBookデバッガーで確認したところ無事に設定できていたようだったので安心していたのですがいざURLを投稿してみると今度はトップページ内で使用しているヘッダー画像が表示されるようになってしまいました。 どうしたらよいでしょうか？ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta name="description" content="サイト説明" /> <meta property="og:title" content="<?php wp_title(' | ', true, 'right'); ?><?php bloginfo('name'); ?>"/> <meta property="og:description" content="サイト説明"/> <meta property="og:image" content="サイトURL/@.jpg"/> <meta property="og:url" content="サイトURL"/> <meta property="og:type" content="movie"/> <meta property="og:site_name" content="<?php wp_title(' | ', true, 'right'); ?><?php bloginfo('name'); ?>"/>
- ベストアンサー
- metaタグを用いた画面遷移
metaタグを用いた画面遷移について質問します。 現在、以下のメタタグを用いて、アクションクラスに値を渡しています。 <meta http-equiv="Refresh"content="5; URL=http://localhost:8080/LoginAc.do"> このとき、ページで引き継いでいるヘッダ情報も一緒に渡したいのですが、 何か方法はありませんでしょうか？ 宜しくお願いします。
- ベストアンサー
- Java
- METAタグについて教えて下さい
ホームページのMETA情報のところに、 通常のページのtitleとは別に、 <meta name="pagetitle" content="*******という記述があるホームページを見かけたのですが、 このタグにはどのような意味があるのでしょうか？ また、通常のtitleとは別に、記述をした方がSEO対策上効果的なのでしょうか？ 上記のページ内のソースには、 <meta name="keywords" contentと、 <meta name="description" contentはちゃんと入っていて、 これら以外にmeta name="pagetitle" content のタグがあったのです。 ちなみに上の****の部分には、 キーワードのような単語が並んでいました。 是非、宜しくお願い致します。
- ベストアンサー
- HTML
- metaタグについて
METAタグにて keywords、descriptionを設定し、 ロボット検索は以下のように設定致しました。 <meta name="robots" content="index,follow" /> <meta name="robots" content="noarchive" /> <meta name="robots" content="noimageindex" /> 問題は下の二つなのですが、noarchiveにてキャッシュされないように、noimageindexにてそのページ内の画像は検索されないようにしました。 このような設定でグーグルなどの検索エンジンにはひっかかりますでしょうか？ よろしくお願い致します。
- ベストアンサー
- レンタルサーバ・ASP
- METAタグについて。
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-type" content="text/css"> <meta name="author" content="***"> <meta name="keywords" content="***"> <meta name="description" content="***"> <meta name="robots" content="index,nofollow"> 現在、これだけのMETA要素を入れたINDEXページを作成しています。 そこで疑問に思ったのですが、 1.METAは全てのページに入れなければならないのでしょうか？ 2.(1が[入れなくてもいい]という回答の場合) 全ての[index.html]には入れるべきですか？ 3.上記のMETA要素で、「これはいらない」という物、 あるいは「これは入れたほうがいい」という物を教えて下さい。 以上です。回答よろしくお願いします。
- ベストアンサー
- HTML
- metaタグについて
HTMLでホームページを作成する際、 <meta name="robots" content="index,follow"> というタグをヘッダ部に置いているサイトを良く見ますが、これは、どういった意味でどういう役割をするのでしょうか？ また、代替として「robots.txt」というものがあると聞いたのですが、どういうファイルなのでしょうか？また、metaタグを使用する場合とtxtファイルのそれぞれの長所・短所を併せて教えて下さい。よろしくお願いします。
- ベストアンサー
- HTML
- ＭＥＴＡタグについて
自分で管理しているホームページの飾り付けをしようとし、以下のMETAタグを追加しました。 ------------------------------------------------------- <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis"> <X-SAS-WINDOW TOP=0 BOTTOM=627 LEFT=0 RIGHT=1012> <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=1)"> <meta http-equiv="Page-Exit" content="revealTrans(Duration=2.0,Transition=2)"> <meta http-equiv="Site-Enter" content="revealTrans(Duration=2.0,Transition=4)"> <meta http-equiv="Site-Exit" content="revealTrans(Duration=2.0,Transition=0)"> (このタグを追記すると、ページをロード、リンクアウトしたときに面白いページの読込みをします。) ------------------------------------------------------- 上記タグを追加し、対象ファイルを契約プロバイダのＷｅｂサーバへアップロードし、 このページを動かしたところ、うまく動作されないようでした。 試しに、プロバイダで定められているＣＧＩ専用のディレクトリ(cgi-bin等)に移し 動作させたところ、うまく動作されるようでした。 このＭＥＴＡタグを追加したＨＴＭＬファイルをＣＧＩ専用ディレクトリ以外の ディレクトリでも動作させたいようにしたいのですが、可能なものなのでしょうか？
- ベストアンサー
- HTML
- METAタグについて
HPに以下の様な記述をしたのですが、gooやinfoseekに登録して１週間経ても、全く検索されません。 <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="robots" content="index,follow"> <meta name="keywords" content=""> <meta name="description" content=""> 正しい記述方法について、何方か教えて下さい。
- ベストアンサー
- HTML
お礼
ありがとうございます！ヘッダー編集とあるわりには<head>から</head>が記載されておらず、困っていました。助かりました。感謝いたします！