特典機能について

Twitterで表示の際 スニペットを非表示にしたい | CSSカスタマイズ相談 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、骨の手術明けのためしばらく体調を優先して運営させていただきます。ですので、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては12月前半まで実施させていただきます。
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

スポンサーリンク
Twitterで表示の際 スニペットを...
 
共有:
通知
すべてクリア

[解決済] Twitterで表示の際 スニペットを非表示にしたい


y.takahashi
 y.takahashi
(@y.takahashi)
ゲスト
結合: 2年前
投稿: 19
Topic starter  

★ Twitterに アドレスを入力した際表示される時 スニペットを表示しないで 画像と タイトルのみ表示する方法をご教授いただければ助かります

 

 

ブログカードの スニペットの非表示等は 検索でよく見つけられ その情報を元に反映できるのです・・

.blogcard-snippet {
display:none;
}

 

Twitterでの表示は ブログカードの設定は意味が無いようなので

 

Twitter投稿以外のページでは スニペットを表示したうえで ※すべてのスニペットの表示を消したくはないです

 

Twitterでの表示の スニペット自体を消したいです。

 

ページで生成される ヘッダー部分にあるこの部分で表示していると思いますが

<meta property="twitter:description" content="スニペットの表示">

こちらの 部分 仮に「スニペットの表示」の部分 非表示か  まったく非表示

もし  何らかのルール上 問題がある場合 捨て文字として&nbsp; とか・・

 

まったく消してしまうと OGPの記載コードを読んでしまう気がして・・

 

的外れでしたらスミマセン

 

 

よろしくお願いいたします。

 

 

 

 


未解決
y.takahashi
 y.takahashi
(@y.takahashi)
ゲスト
結合: 2年前
投稿: 19
Topic starter  

使わせていただいているのは cocoon-child です。


かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 4年前
投稿: 4764
かうたっく - Facebook
 

CSSで該当箇所を指定して消しても良いと思いますよ

 

該当ページのurlを置いてもらったら見ますけど?


わいひら 件のいいね!
y.takahashi
 y.takahashi
(@y.takahashi)
ゲスト
結合: 2年前
投稿: 19
Topic starter  

かうたっくさん ありがとうございます

https://c.pickout.info/  こちらトップページになります

各ページを開いても ソースを見ると記載されていますが  わたくしの力では・・

よろしくお願いいたします。


かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 4年前
投稿: 4764
かうたっく - Facebook
 

https://c.pickout.info/?p=372

これかわいー^^

 

でTwitterは いづこだぁ????


y.takahashi
 y.takahashi
(@y.takahashi)
ゲスト
結合: 2年前
投稿: 19
Topic starter  

ありがとうございます!(^^)! ツイッターは 運営者のとこに書いてます

 

非表示は何とかなりそうですか?


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 
投稿者:: @y.takahashi

ありがとうございます!(^^)! ツイッターは 運営者のとこに書いてます

どの部分か、ちょっとわからないです。
該当部分のスクリーンショットをいただければと思います。


かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 4年前
投稿: 4764
かうたっく - Facebook
 

私もどこかわからないです^^;


さる子
(@saruko)
メンバーサイト Moderator
結合: 2年前
投稿: 423
さる子 - Twitter
 

ツイッターで https://c.pickout.info のアドレスを呟いたときに、画像の赤枠のところを非表示にしたい、ってことであってますか?


わいひら 件のいいね!
y.takahashi
 y.takahashi
(@y.takahashi)
ゲスト
結合: 2年前
投稿: 19
Topic starter  

おはようございます

かうたっく さん
わいひら さん
さる子 さん
皆様対応いただいたのに説明不足で失礼いたしました。

実際のツイートの事ではなく ツイッターのアカウントだと思い
右メニュー -当ブログの事- の運営者に ツイッターアカウントへのリンクがあるという意味で書いてしまいました。

説明の画像を添付いたします
赤の枠の部分を非表示に出来ればと思っております。

よろしくお願いいたします。


y.takahashi
 y.takahashi
(@y.takahashi)
ゲスト
結合: 2年前
投稿: 19
Topic starter  

念のため補足させていただきますが 添付のスクリーンショットは ツイッター投稿欄に ワードプレスの記事のアドレスを入力した際に表示される ツイッターカードです。

よろしくお願いいたします。

 


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 

これは、ツイッター上でのことですよね?
だとしたら変更はできないです。


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 

https://c.pickout.info/?p=861

このページとかであれば、投稿編集画面の「SEO設定」にある「メタディスクリプション」に全角スペースとかを入れるとうまくいく可能性はあるかも。
Twitterクロールの仕様のことになるので、詳しくはわかりませんが、もしかしたらそれでもなにか文章を取得されてしまうかもしれません。


y.takahashi
 y.takahashi
(@y.takahashi)
ゲスト
結合: 2年前
投稿: 19
Topic starter  

ご回答ありがとうございます

 

>「メタディスクリプション」に全角スペースとかを入れるとうまくいく可能性はあるかも。

この部分は seo対策部分なので いじりたくないんです・・

 

あくまで ツイッターの表示だけ変更出来ればと・・

 

 

 

ソースを見ると 以下が生成されているので

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:description" content="元服のモデルさんの着用写真は、ちょっと上品そうな感じだけど、あえてラフな感じの女の子に着せてみました!どうかな?">
<meta property="twitter:title" content="ワンショルオールインワン!">
<meta property="twitter:url" content="https://c.pickout.info/?p=861">
<meta name="twitter:image" content="https://c.pickout.info/wp-content/uploads/2020/06/f2-2-1.png">
<meta name="twitter:domain" content="c.pickout.info">

 

ワードプレスでページ生成の際に対応できないかと・・ 

非表示にしたい部分を 全て消すと ツイッタ側で OGPを読みそうなので 該当の部分に &nbsp; とか入れればいいのかななどと・・

 

ワードプレスで生成しているページなので この部分の 生成を制限すればいいのかな・・ などと 素人考えでした

 

難しいようでしたら 諦めます・・

よろしくお願いいたします

 

 


y.takahashi
 y.takahashi
(@y.takahashi)
ゲスト
結合: 2年前
投稿: 19
Topic starter  

ツイッターでは メタディスクリプション に入力した文面が表示されますが こちらは文字数制限がcocoonの設定で出来ない為
※cocoon設定→ インデックス →自動生成抜粋文字数 では制限出来ない

メタディスクリプションは  SEO対策用に 文字数を考えて入力するため 下手に短くしたくないのです・・

その為ツイッター投稿時の 表示を 消せれば一番理想と思ったわけでした。

 

★現状    <meta property="twitter:description" content="元服のモデルさんの着用写真は、ちょっと上品そうな感じだけど、あえてラフな感じの女の子に着せてみました!どうかな?">

 

★理想    <meta property="twitter:description" content="&nbsp;">

&nbsp;部分は 何らか 入力しないと OGPを読みそうなので・・ 素人考えなので 意味が無いのかもしれませんが・・

 

よろしくお願いいたします。


y.takahashi
 y.takahashi
(@y.takahashi)
ゲスト
結合: 2年前
投稿: 19
Topic starter  

ブログカードの文字消し等は CSSで対応できても ツイッターカードは 難しいのでしょうか?

数日 ググって調べましたが 情報が探せませんでした。

 


たなかま
(@tanakama)
Honorable Memberサイト
結合: 4年前
投稿: 593
たなかま - Twitter
 

こんにちは。

ブログカードの文字消し等は CSSで対応できても ツイッターカードは 難しいのでしょうか?

はい。CSSで消しても、ツイッターカードは出てきます。

ツイッターカードは、head内のmeta og:descriptionが反映されます。

 

おそらくPHPのカスタマイズが必要ですが、その場合はサポート外となってしまいます。

tmp/header-ogp.phpに記述があるので、それほど難しくはないと思います。

 

ただし、半角スペースを入れて、ツイッターカードの抜粋が消せるかは、実際にやってみないと分かりません。

(半角スペースを無視する仕様か、反映されるのかは、試さないと分からないですね)


わいひら 件のいいね!
たなかま
(@tanakama)
Honorable Memberサイト
結合: 4年前
投稿: 593
たなかま - Twitter
 

僕の運営するサイトでは、Cocoonの抜粋に10文字程度の短い説明文を入れています。

この抜粋に入れると、ツイッターカードの抜粋にも短い説明文が入ります。

 

ただし、抜粋はdescriptionとインデックスカード(一覧ページ)にも入ります。

descriptionが10文字程度というのは、ちょっとまずいので、All in One SEO Packプラグインでdescriptionを入れています。

 

このあたりを上手くやれば、何とかできそうですが、SEOにも影響するので、慎重にやった方がいいですね。


わいひら 件のいいね!
y.takahashi
 y.takahashi
(@y.takahashi)
ゲスト
結合: 2年前
投稿: 19
Topic starter  

たなかま さん

回答ありがとうございます

 

>ツイッターカードは、head内のmeta og:descriptionが反映されます。

 

生成されたページの ソースをみると <!-- OGP -->  og:description とは 別に

<!-- Twitter Card --> twitter:description が 別途記載があるようですが こちらを読むのではないのでしょうか?

 

>おそらくPHPのカスタマイズが必要ですが、その場合はサポート外となってしまいます。
>
>tmp/header-ogp.phpに記述があるので、それほど難しくはないと思います。

 

 

サポート対象外は承知しております・・

ダメ元で いじってみようと思いますが

<!-- OGP --> の記載はありますが <!-- Twitter Card -->の記載が無いようです

 

生成されるページの ソースに  <!-- OGP --> <!-- Twitter Card --> が別々にありますので

 

<!-- Twitter Card -->の記載があればこちらを読むのではないでしょうか?

無い場合は <!-- OGP -->を読むのでは・・・

 

この辺無知なので  CSSも ネット探して 色々 記載 修正 記載修正の 繰り返しで 現状のページになってます。

 

間違っていたら すみません・・

 

 

>ただし、抜粋はdescriptionとインデックスカード(一覧ページ)にも入ります。

入ってほしくないんですよ・・

 

あくまで ツイッターでの表示だけ消したいんです

 

ヒントがあれば 教えていただければ助かります。

 

 


たなかま
(@tanakama)
Honorable Memberサイト
結合: 4年前
投稿: 593
たなかま - Twitter
 

<!-- Twitter Card --> twitter:description が 別途記載があるようですが こちらを読むのではないのでしょうか?

失礼しました。その通りですね。

twitter:descriptionは、tmp/header-twitter-card.phpにあります。

 

カスタマイズする際には、以下のプレビューサイトで確認すると確実です。

https://cards-dev.twitter.com/validator

こちらでプレビューすると、ツイッターのサーバーキャッシュもクリアされますので。


わいひら 件のいいね!
y.takahashi
 y.takahashi
(@y.takahashi)
ゲスト
結合: 2年前
投稿: 19
Topic starter  

情報 ありがとうございます

 

PHP修正で 非表示にすることが出来ました

 

ほんと 助かりました  ありがとうございました

 


わいひら 件のいいね!
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

Cocoon
タイトルとURLをコピーしました