[HTML] sns 용 META tag

한국어는 교착어이다.

한국어는 띄어쓰기가 영어보다 잘 지켜지지 않는다.

NLTK와 KoNLPy를 이용한 영어, 한국어 토큰화 실습

NLTK에서는 영어 코퍼스에 품사 태깅 기능을 지원하고 있습니다. 품사를 어떻게 명명하고, 태깅하는지의 기준은 여러가지가 있는데, NLTK에서는 Penn Treebank POS Tags라는 기준을 사용합니다. 실제로 NLTK를 사용해서 영어 코퍼스에 품사 태깅을 해보도록 하겠습니다.

nltk 에러나면  CMD에서 pip install nltk

>>> from nltk.tokenize import word_tokenize
Traceback (most recent call last):
  File "<pyshell#19>", line 1, in <module>
    from nltk.tokenize import word_tokenize
ModuleNotFoundError: No module named 'nltk'

>>> from nltk.tokenize import word_tokenize

>>> text="I am actively looking for Ph.D. students. and you are a Ph.D. student."
>>> print(word_tokenize(text))

['I', 'am', 'actively', 'looking', 'for', 'Ph.D.', 'students', '.', 'and', 'you', 'are', 'a', 'Ph.D.', 'student', '.']

>>> from nltk.tag import pos_tag
>>> x=word_tokenize(text)
>>> pos_tag(x)

[('I', 'PRP'), ('am', 'VBP'), ('actively', 'RB'), ('looking', 'VBG'), ('for', 'IN'), ('Ph.D.', 'NNP'), ('students', 'NNS'), ('.', '.'), ('and', 'CC'), ('you', 'PRP'), ('are', 'VBP'), ('a', 'DT'), ('Ph.D.', 'NNP'), ('student', 'NN'), ('.', '.')]

영어 문장에 대해서 토큰화를 수행하고, 이어서 품사 태깅을 수행하였습니다. Penn Treebank POG Tags에서 PRP는 인칭 대명사, VBP는 동사, RB는 부사, VBG는 현재부사, IN은 전치사, NNP는 고유 명사, NNS는 복수형 명사, CC는 접속사, DT는 관사를 의미합니다.

한국어 자연어 처리를 위해서는 KoNLPy("코엔엘파이"라고 읽습니다)라는 파이썬 패키지를 사용할 수 있습니다. 코엔엘파이를 통해서 사용할 수 있는 형태소 분석기로 Okt(Open Korea Text), 메캅(Mecab), 코모란(Komoran), 한나눔(Hannanum), 꼬꼬마(Kkma)가 있습니다.

한국어 자연어 처리를 위해서는 KoNLPy("코엔엘파이"라고 읽습니다)라는 파이썬 패키지를 사용할 수 있습니다. 코엔엘파이를 통해서 사용할 수 있는 형태소 분석기로 Okt(Open Korea Text), 메캅(Mecab), 코모란(Komoran), 한나눔(Hannanum), 꼬꼬마(Kkma)가 있습니다.

한국어 NLP에서 형태소 분석기를 사용한다는 것은 단어 토큰화가 아니라 정확히는 형태소(morpheme) 단위로 형태소 토큰화(morpheme tokenization)를 수행하게 됨을 뜻합니다. 여기선 이 중에서 Okt와 꼬꼬마를 통해서 토큰화를 수행해보도록 하겠습니다. (Okt는 기존에는 Twitter라는 이름을 갖고있었으나 0.5.0 버전부터 이름이 변경되어 인터넷에는 아직 Twitter로 많이 알려져있으므로 학습 시 참고바랍니다.)

>>> from konlpy.tag import Okt
>>> okt=Okt()

>>> print(okt.morphs("열심히 코딩한 당신, 연휴에는 여행을 가봐요"))

['열심히', '코딩', '한', '당신', ',', '연휴', '에는', '여행', '을', '가봐요']

>>> print(okt.pos("열심히 코딩한 당신, 연휴에는 여행을 가봐요"))

[('열심히', 'Adverb'), ('코딩', 'Noun'), ('한', 'Josa'), ('당신', 'Noun'), (',', 'Punctuation'), ('연휴', 'Noun'), ('에는', 'Josa'), ('여행', 'Noun'), ('을', 'Josa'), ('가봐요', 'Verb')]

>>> print(okt.nouns("열심히 코딩한 당신, 연휴에는 여행을 가봐요"))

['코딩', '당신', '연휴', '여행']

위의 예제는 Okt 형태소 분석기로 토큰화를 시도해본 예제입니다.

1) morphs : 형태소 추출
2) pos : 품사 태깅(Part-of-speech tagging)
3) nouns : 명사 추출

위 예제에서 사용된 각 메소드는 이런 기능을 갖고 있습니다. 앞서 언급한 코엔엘파이의 형태소 분석기들은 공통적으로 이 메소드들을 제공하고 있습니다. 위 예제에서 형태소 추출과 품사 태깅 메소드의 결과를 보면, 조사를 기본적으로 분리하고 있음을 확인할 수 있습니다. 그렇기 때문에 한국어 NLP에서 전처리에 형태소 분석기를 사용하는 것은 꽤 유용합니다.

이번에는 꼬꼬마 형태소 분석기를 사용하여 같은 문장에 대해서 토큰화를 진행해볼 것입니다.

>>> from konlpy.tag import Kkma
>>> kkma=Kkma()
>>> print(kkma.morphs("열심히 코딩한 당신, 연휴에는 여행을 가봐요"))

['열심히', '코딩', '하', 'ㄴ', '당신', ',', '연휴', '에', '는', '여행', '을', '가보', '아요']

>>> print(kkma.pos("열심히 코딩한 당신, 연휴에는 여행을 가봐요"))

[('열심히', 'MAG'), ('코딩', 'NNG'), ('하', 'XSV'), ('ㄴ', 'ETD'), ('당신', 'NP'), (',', 'SP'), ('연휴', 'NNG'), ('에', 'JKM'), ('는', 'JX'), ('여행', 'NNG'), ('을', 'JKO'), ('가보', 'VV'), ('아요', 'EFN')]

>>> print(kkma.nouns("열심히 코딩한 당신, 연휴에는 여행을 가봐요"))

['코딩', '당신', '연휴', '여행']

앞서 사용한 Okt 형태소 분석기와 결과가 다른 것을 볼 수 있습니다. 각 형태소 분석기는 성능과 결과가 다르게 나오기 때문에, 형태소 분석기의 선택은 사용하고자 하는 필요 용도에 어떤 형태소 분석기가 가장 적절한지를 판단하고 사용하면 됩니다. 예를 들어서 속도를 중시한다면 메캅을 사용할 수 있습니다.

출처 : wikidocs.net/21698

[FB] facebook 공유하기 위한 웹페이지의 meta 정보 작업 Tag

https://developers.facebook.com/docs/sharing/webmasters

meta 정보가 정확해야 공유하기 했을때 미리보기가 잘 나온다. 

이미지가 항상 문제가 되는데, 최소 사이즈가 200x200 픽셀이다. 

크게 나오는 이미지는  최소한 600x315픽셀 이상이어야 한다. 

이미지관련은 아래의 링크에서 확인해보자. 

https://developers.facebook.com/docs/sharing/best-practices#images

공유디버그(캐쉬 삭제, 미리보기 확인)

https://developers.facebook.com/tools/debug/sharing/

=================================

오픈 그래프 마크업

대부분의 콘텐츠는 URL로 Facebook에 공유되므로, Facebook에 콘텐츠가 표시되는 방식을 관리하기 위해 오픈 그래프 태그로 웹사이트를 마크업하는 것이 중요합니다.

이러한 태그가 없으면 Facebook 크롤러에서 내부의 경험적 접근법을 사용하여 콘텐츠의 제목, 설명, 미리 보기 이미지에 대해 가장 현실성 높은 추측을 내립니다. Facebook에 게시물이 가장 최적화된 품질로 표시될 수 있도록 오픈 그래프 태그를 사용하여 이 정보를 명시적으로 지정합니다.

다음은 Facebook에 최적화되어 표시되도록 오픈 그래프 태그로 형식화된 콘텐츠의 예시입니다.

마크업 예시

예를 들어, 다음은 og:type="article" 및 여러 추가 속성으로 기사, 뉴스 소식 또는 블로그 게시물을 마크업하는 방법입니다.

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

이 속성에는 사용자가 기사를 공유할 때 특별히 표시할 기사에 대한 설명적인 메타데이터가 포함됩니다.

기본 태그

다음은 모든 콘텐츠 유형에 사용해야 하는 가장 기본적인 메타 태그입니다.

태그	설명
og:url	페이지의 표준 URL입니다. 세션 변수, 사용자 식별 매개변수 또는 카운터가 없는 그대로의 URL이어야 합니다. 이 URL의 좋아요 및 공유는 이 URL에서 집계됩니다. 예를 들어, 여러 버전의 페이지에서 좋아요와 공유를 집계하기 위해 모바일 도메인 URL은 표준 URL로 지정된 데스크톱 버전의 URL을 가리켜야 합니다.
og:title	사이트 이름과 같은 브랜드가 없는 기사의 제목입니다.
og:description	콘텐츠의 간략한 설명으로, 대개 2~4개의 문장으로 구성됩니다. 이 설명은 Facebook의 게시물 제목 아래에 표시됩니다.
og:image	사용자가 Facebook에 콘텐츠를 공유할 때 표시되는 이미지의 URL입니다. 자세한 내용은 아래를 참조하고, 고품질 미리 보기 이미지를 지정하는 방법에 대해 알아보려면 모범 사례 가이드를 확인하세요.
fb:app_id	Facebook 도메인 인사이트를 사용하려면 페이지에 앱 ID를 추가해야 합니다. 도메인 인사이트를 사용하면 Facebook에서 회원님의 사이트로 보내는 트래픽의 분석 결과를 볼 수 있습니다. 앱 대시보드에 앱 ID가 있습니다.

콘텐츠 배포를 늘리고 참여를 높이기 위해 다음 두 개의 태그를 추가할 수도 있습니다.

태그	설명
og:type	콘텐츠의 미디어 유형입니다. 이 태그는 뉴스피드에 콘텐츠가 표시되는 방식에 영향을 줍니다. 유형을 지정하지 않는 경우 기본값은 website입니다. 각 URL은 단일 개체여야 하므로, 여러 og:type 값은 가능하지 않습니다. 모든 개체 유형은 개체 유형 참조에서 확인할 수 있습니다.
og:locale	리소스의 언어입니다. 기본값은 en_US입니다. 다른 언어로 번역 기능을 사용할 수 있으면 og:locale:alternate도 사용할 수 있습니다. 현지화에 대한 문서에서 지원되는 언어에 대해 알아보세요.

모든 표준 개체 속성은 개체 속성 참조에서 확인할 수 있습니다.

마크업 테스트

Facebook 크롤러에 마크업이 표시되는 방식을 보려면 공유 디버거에 URL을 입력합니다. 오류나 경고 외에도 크롤러가 스크랩하는 메타 태그가 표시됩니다.

디버거에서는 페이지의 스크랩도 트리거하므로, HTML에 오류가 있는 경우 디버거를 사용하여 콘텐츠를 업데이트할 수 있습니다. 자세한 내용은 개체 업데이트를 참조하세요.

...

텍스트 입력창에서 자동고침/자동완성/자동대문자 기능 OFF

Turn off autocorrect, autocomplete, and autocapitalize

참고 : http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript