-2

How can I use CSS Selector to select "meta property="og:title"" ?

<meta property="og:type" content="article" />
<meta property="og:title" content="How Computers Got to Where They are" />
<meta property="og:description" content="In the late 1950s, Goyeman forever changed the theory of computing when he discovered atoms interacting subparts of dinucleau particles to lead to an incredible journey." />
<meta property="og:url" content="https://www.voltamagazine.org/how-goyeman-revolutionized-computing-21380521/" />
<meta property="og:site_name" content="Volta Magazine" />
<meta property="og:image" content="https://y2655xcwy6xx58.cloudfront.net/uploads/2016/01/Goyeman_1200x630-Social02.jpg" />
<meta property="og:image:width" content="1200" />
user963241
  • 6,758
  • 19
  • 65
  • 93

1 Answers1

1

Using the attribute selector [] should do the trick.. Check the ref here.

document.querySelector("meta[property='og:title']")

//for grabbing the attribute value
const title = document.querySelector("meta[property='og:title']").content

Adding wildcard empowers the selector.

  1. Selecting the attribute start from 'og'
document.querySelectorAll("meta[property^='og']")
  1. end with og
document.querySelectorAll("meta[property$='og']")
  1. contain 'og'
document.querySelectorAll("meta[property*='og']")
tcf01
  • 1,699
  • 1
  • 9
  • 24
  • Thanks, is it javascript or css? – user963241 Feb 17 '21 at 06:13
  • Both js and css can be used. Same mechanism. If using in css, just grab this out ```meta[property='og:type']{//your css rules}``` – tcf01 Feb 17 '21 at 06:13
  • Thanks, makes sense, is it possible to select only "content" as well `"How Computers Got to Where They are"` using css ? – user963241 Feb 17 '21 at 06:22
  • What will be your use case? – tcf01 Feb 17 '21 at 06:25
  • To just grab this string and save it. I am using a web scraper to do it which needs CSS selectors. – user963241 Feb 17 '21 at 06:30
  • Then you can save it using js. I thought you want to use the css to grab the value. Check my updated answer. – tcf01 Feb 17 '21 at 06:38
  • Css will be unable to grab in this case, right? Because CSS Selector always returns entire HTML element, right? Just wanted to make sure. – user963241 Feb 17 '21 at 06:40
  • Of course. From the name(Cascading Style Sheet) you can tell, this is for some styling stuff. What I understand is that you would like to do some logical stuff and therefore it make sense to use js. Besides, the web scraper you are using is based on js right? – tcf01 Feb 17 '21 at 06:46